php网页版聊天软件实现代码

本文实例为大家分享了php匿名聊天室的具体实现代码，供大家参考，具体内容如下

1. index.html

<html>
 <head>
  <title>聊天室</title>
  <meta charset="utf-8"/>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <link href="./css/style.css" rel="stylesheet"/>
  <script>
   var maxid = 0;
   function showmessage() {
    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //监听
    xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
      eval("var info=" + xhr.responseText);
      var text = "";
      for (var i = 0; i < info.length; i++)
      {
       text += "<div class='alert alert-success'>" +
         "<span class='name'>" + info[i].send + ":</span>" +
         "<span class='message'>" + info[i].content + "</span>" +
         "<span>(" + info[i].time + ")</span>" +
         "</div>";
       maxid = info[i].id;
      }

      var old = document.getElementById("msg").innerHTML;
      document.getElementById("msg").innerHTML = old + text;
      document.getElementById("msg").scrollTop = document.getElementById("msg").scrollHeight;
     }
    };
    //初始化
    xhr.open("get", "./action.php?maxid=" + maxid);
    //发送
    xhr.send();
   }

   $(document).ready(
     function ()
     {
      showmessage()
      self.setInterval("showmessage()", 2000);
     }
   );
   function send() {
    var postData ="content="+document.getElementById('content').value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "./add.php", true);
    //一定要写头信息不然服务器接收不到
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
     var XMLHttpReq = xhr;
     if (XMLHttpReq.readyState == 4) {
      if (XMLHttpReq.status == 200) {
       document.getElementById('content').value="";
      }
     }
    };
    xhr.send(postData);
   }
  </script>
 </head>
 <body>

  <div class="panel panel-default" id="main">
   <!--聊天室名字-->
   <div class="panel-heading">
    <h3 class="panel-title">
     匿名者聊天室
    </h3>
   </div>
   <!--聊天室名字-->
   <!--聊天室消息框-->
   <div class="panel-body ">
    <div class="well no-bottom ">
     <!--     消息框样式-->
     <!--
     <div class="alert alert-success">成功！很好地完成了提交。</div>
     <div class="alert alert-info">信息！请注意这个信息。</div>
     <div class="alert alert-warning">警告！请不要提交。</div>
     <div class="alert alert-danger">错误！请进行一些更改。</div>
     -->
     <div id="msg" class="showmessage">
     </div>
     <!--聊天室消息框-->
     <div class="well" >
      <form role="form">
       <div class="form-group">
        <label for="name">发送消息</label>
        <textarea class="form-control" id="content" name="content"
           style="resize: none;font-family: Microsoft YaHei;" rows="3" >
        </textarea>
       </div>
       <div style="text-align: right">
        <button type="button" class="btn btn-primary" onclick="send()">
         <span class="glyphicon glyphicon-envelope"></span>
         发送
        </button>
       </div>
      </form>
     </div>
     <!--聊天室发送框-->
    </div>
   </div>
  </div>
 </body>
</html>

2. action.php

<?php

$link = mysqli_connect('localhost', 'root', '123', 'test');
mysqli_query($link, 'set names utf8');
$info= array();
header("Content-type: text/html; charset=utf-8");
$id=$_GET['maxid'];
$data = mysqli_query($link, "select * from talk where id>$id");
while ($array = mysqli_fetch_assoc($data)) {
 $info[] = $array;
};

 echo json_encode($info);

3. chat.sql

DROP TABLE IF EXISTS `talk`;
CREATE TABLE `talk` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id',
 `send` varchar(10) CHARACTER SET utf8 DEFAULT NULL COMMENT '发送者昵称',
 `ip` varchar(12) CHARACTER SET utf8 DEFAULT NULL,
 `content` varchar(500) CHARACTER SET utf8 DEFAULT NULL,
 `time` varchar(50) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=52 DEFAULT CHARSET=utf8;

4. add.php

<?php

/**
 * @功能 将表单插入数据库
 */
$content=$_POST['content'];
print_r($_POST);
$time= date("Y-m-d H:i:s", time(0));
$link = mysqli_connect('localhost', 'root', '123', 'test');
mysqli_query($link, 'set names utf8');
$ip = $_SERVER["REMOTE_ADDR"];
$sql="INSERT INTO talk VALUES(NULL,'匿名者','$ip','$content','$time')";
$data = mysqli_query($link,$sql);
echo "$content";
if($data)
 echo "1";
 else
  echo "0";

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android聊天工具基于socket实现

    特简单, 没有数据库, 还没有处理各种异常. 登录:输入用户名点击的登录即可. 发送消息: 特定格式->toUser:message 1. 服务器:保存在线用户 public class Online { private static Online mOnline = null; private LinkedHashMap<String, Socket> mOnlines = new LinkedHashMap<String, Socket>(); private Onlin

  • Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)

    Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex).WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考:如何理解 TCP/IP, SPDY, WebSocket 三者之间的关系? 今天的重点是讲如何在Android中脱离WebView使用WebSocket,而不是在Web浏览器

  • Android高仿微信聊天界面代码分享

    Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav

  • 小小聊天室Python代码实现

    相对于Java方式的聊天室,Python同样可以做得到.而且可以做的更加的优雅.想必少了那么多的各种流的Python Socket,你一定会喜欢的. 至于知识点相关的内容,这里就不多说了. UDP方式 服务器端 # coding:utf-8 # __author__ = 'Mark sinoberg' # __date__ = '2016/7/7' # __Desc__ = 创建一个简单的套接字监听请求 import socket HOST = '192.168.59.255' PORT = 9

  • Android仿微信语音聊天功能

    Android仿微信语音聊天功能

    本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.weichat; import java.io.File; import java.io.IOException; import java.util.UUID; import android.media.MediaRecorder; public class AudioManager { private

  • Android仿微信群聊头像

    Android仿微信群聊头像

    工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了. 给大家分享一下怎么实现的吧.首先我们先看一下效果图: 好了,下面说一下具体怎么实现的: 实现思路 1.首先获取Bitmap图片(本地.网络) 2.创建一个指定大小的缩略图 3.组合Bitmap图片 很简单,本地图片需要我们从本地读取,如果是网络图片我们也可以根据URL来获取bitmap进行组合 具体实现过程 1.布局文件: <LinearLayo

  • java实现小型局域网群聊功能(C/S模式)

    本文实例为大家分享了java群聊功能,供大家参考,具体内容如下 Java 对TCP协议的支持: --> java.net包中定义了两个类ServerSocket 和Socket ,分别用来实现双向连接的server 端和client 端.  --> Client 类定义客户端 package com.dragon.java.tcpchat; import java.io.IOException; import java.net.Socket; import java.net.UnknownHo

  • Android蓝牙通信聊天实现发送和接受功能

    很不错的蓝牙通信demo实现发送和接受功能,就用了两个类就实现了,具体内容如下 说下思路把 主要有两个类 主界面类 和 蓝牙聊天服务类 . 首先创建线程 实际上就是创建BluetoothChatService() (蓝牙聊天服务类) 这个时候把handler 传过去 这样就可以操作UI 界面了,在线程中不断轮询读取蓝牙消息,当主界面点击发送按钮时 调用BluetoothChatService 的发送方法write 方法,这里的write 方法 使用了handler 发送消息,在主界面显示,另一个

  • 使用jQuery调用XML实现无刷新即时聊天

    使用jQuery调用XML实现无刷新即时聊天

    HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用JQuery调用XML实现

  • php网页版聊天软件实现代码

    本文实例为大家分享了php匿名聊天室的具体实现代码,供大家参考,具体内容如下 1. index.html <html> <head> <title>聊天室</title> <meta charset="utf-8"/> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="styleshee

  • vue+web端仿微信网页版聊天室功能

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室--vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 •MVVM框架:Vue2.5.6 •状态管理:Vuex •页面路由:Vue-router •iconfont图标:阿里巴巴字体图标库 •自定义滚动条:vue-gemi

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • JS基于递归实现网页版计算器的方法分析

    本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中 这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&

  • 原生JavaScript实现网页版计算器

    原生JavaScript实现网页版计算器

    本文实例为大家分享了JavaScript实现网页版计算器的具体代码,供大家参考,具体内容如下 由于无聊看电脑上的系统软件翻到了计算器这个功能,就简单写一下这个计算器的功能吧,这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制即可 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <

  • 使用Java和WebSocket实现网页聊天室实例代码

    使用Java和WebSocket实现网页聊天室实例代码

    在没介绍正文之前,先给大家介绍下websocket的背景和原理: 背景 在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况,HTML5定义了WebSocket协议,能更

  • 网页版在线聊天java Socket实现

    本文为大家分享了一个满足在线网页交流需求的实例,由于java Socket实现的网页版在线聊天功能,供大家参考,具体内容如下 实现步骤: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首先实现第一步的简单功能,难点在于: 1.没有用过a

  • java Socket实现网页版在线聊天

    本文为大家分享了一个满足在线网页交流需求的实例,由于java Socket实现的网页版在线聊天功能,供大家参考,具体内容如下 实现步骤: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首先实现第一步的简单功能,难点在于: 1.没有用过a

  • JAVASCRIPT代码编写俄罗斯方块网页版

    JAVASCRIPT代码编写俄罗斯方块网页版

    俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码里对应 1.背景图片:tetris.png 2.失败时候的弹出框图片:game-over.png 3.七种色彩小方块图片:  

  • javascript html实现网页版日历代码

    javascript html实现网页版日历代码

    本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&

随机推荐