PHP聊天室简单实现方法详解


Posted in PHP onDecember 08, 2018

本文实例讲述了PHP聊天室简单实现方法。分享给大家供大家参考,具体如下:

用户 => 客服 (先把信息入库,然后通过ob+长连接不断从数据库查询数据发送给客服)

客服 => 用户 (先接收用户信息,然后把回复信息入库,最后通过ajax轮询不断请求数据,显示到用户聊天界面)

【注意:】如果所有页面搭建好,先链接客服聊天页面(server.php) ,接着再链接用户页面(client.php)

附图说明:

PHP聊天室简单实现方法详解

第一步:建表

说明: rec : 接收信息方, sender : 发送信息方, content : 发送内容 , is_new : 作为标记,1是 新信息 2是 已读信息 (默认是1)

CREATE TABLE `chat_log` (
 `log_id` int(11) NOT NULL AUTO_INCREMENT,
 `rec` varchar(10) NOT NULL COMMENT '接受方',
 `sender` varchar(10) NOT NULL COMMENT '发送方',
 `content` text NOT NULL COMMENT '发送内容',
 `is_new` tinyint(4) NOT NULL DEFAULT '1' COMMENT '信息 1新信息 0 已读信息',
 PRIMARY KEY (`log_id`,`rec`)
) ENGINE=MyISAM AUTO_INCREMENT=105 DEFAULT CHARSET=utf8 COMMENT='用户客服聊天轮询表'

第二步:链接数据库 : connect.php

$link = mysql_connect('localhost', 'root', '');
mysql_query("set names utf8");
mysql_select_db("chat");

第三步:用户聊天界面: client.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User窗口</title>
  <style>
    #user {
      width: 440px;
      height: 300px;
      border: 1px solid blue;
    }
  </style>
  <script src='http://code.jquery.com/jquery-latest.js'></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        var content = $("textarea").val();
        if(content == ''){alert('发送内容不能为空');return;}
        // 发送给客服
        <!-- 把提交数据通过toServer.php存入数据库-->
        $.post("toServer.php", {'msg':content}, function (res) {
          var obj = JSON.parse(res);
          $("#user").append("<b>你向客服发送:</b>" + obj + "<br>");
          $("textarea").val(" ");
        });
      });
      // 用ajax轮询方式 从数据库获取 客服是否有发送消息给用户
      var polling = {
        "url"   : 'fromServer.php',
        "dataType" : 'json',
        success  : function (res) {
          //ajax请求返回的数据
          var obj = res;
          //追加到User聊天的页面
          $("#user").append("<b style='color:red'>客服回复:" + obj.content + "</b><br>");
          $.ajax(polling);
        }
      };
      $.ajax(polling); //轮询发送ajax请求
    })
  </script>
</head>
<body>
  <iframe src="" width="0" height="0" frameborder="0"></iframe>
  <h3>与客服聊天窗口</h3>
  <div contenteditable="true" id="user"></div>
  <div>
    <textarea name="msg_list" id="" cols="60" rows="15"></textarea>
    <button id="btn" type="button">send..</button>
  </div>
</body>
</html>

第四:用户发送信息入库 + ajax轮询查询有无客服回复信息

toServer.php

require('connect.php');
$msg = htmlspecialchars($_POST['msg'], ENT_QUOTES);
$sql = "INSERT INTO `chat_log` (rec, sender, content) VALUES('admin', 'user', '$msg' )";
mysql_query($sql, $link);
echo json_encode($msg);

fromServer.php

require('connect.php');
set_time_limit(0);//永不超时
while (true){
    $sql = "SELECT * FROM `chat_log` WHERE rec='user' AND is_new=1 ORDER BY log_id DESC LIMIT 1";
    $res = mysql_query($sql, $link);
    if($row = mysql_fetch_assoc($res)){
      $sql = "UPDATE `chat_log` SET is_new=0 WHERE log_id=".$row['log_id'];
      mysql_query($sql,$link);
      die(json_encode($row));
    }
}

 

第五步: 客服聊天页面 server.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>客服窗口</title>
  <style>
    #server {
    width: 440px;
    height: 300px;
    border: 1px solid blue;
    }
  </style>
  <script src='http://code.jquery.com/jquery-latest.js'></script>
  <!-- 进行ob缓存输出 -->
  <script>
    function showMsg(res) {
      var obj = eval(res);
      $("#server").append("<b style='color:red'>User向你发送:" + obj.content + "</b><br/>");
    }
    //回复User信息
    $(function () {
      $("#btn").click(function () {
        var content = $("textarea").val();
        //客服发送的信息通过toClient.php存入数据库
        $.post("toClient.php", {'msg':content},function (res) {
          var obj = JSON.parse(res);
          $("#server").append("你向User发送:" + obj+ "<br>");
          $("textarea").val("");
        })
      });
    })
  </script>
</head>
<body>
  <iframe src="./fromClient.php" width="0" height="0" frameborder="0"></iframe>
  <h3>与User聊天窗口</h3>
  <div contenteditable="true" id="server"></div>
  <div>
    <textarea name="msg_list" id="" cols="60" rows="15"></textarea>
    <button id="btn" type="button">send..</button>
  </div>
</body>
</html>

第六步: 客服查询数据库有无用户发送信息 + 发送信息给用户

fromClient.php

require('connect.php');
ob_start();       //打开一个输出缓冲区,所有的输出信息不再直接发送到浏览器,而是保存在输出缓冲区里面
echo str_repeat('', 4096);
ob_end_flush();     //发送内部缓冲区到浏览器,删除缓冲区内容,关闭缓冲区
ob_flush();       //发送内部缓冲区的内容到浏览器,删除缓冲区的内容,不关闭缓冲区
set_time_limit(0);//永不超时
while(true){
    $sql = "select * from `chat_log` where rec= 'admin' and is_new= 1 ORDER BY log_id DESC LIMIT 1 ";
    $res = mysql_query($sql, $link);
    if($row = mysql_fetch_assoc($res)){
      $sql = "UPDATE `chat_log` SET is_new=0 where log_id=".$row['log_id'];
      mysql_query($sql, $link);
      echo "<script>parent.showMsg(".json_encode($row).")</script>";
      ob_flush();
      flush();      //将ob_flush释放出来的内容,以及不在PHP缓冲区中的内容,全部输出至浏览器;刷新内部缓冲区的内容,并输出
      sleep(1);
    }
}

toClient.php

require('connect.php');
$msg = htmlspecialchars($_POST['msg'], ENT_QUOTES);
if(!empty($msg)){
    $sql = "insert into chat_log(rec, sender, content) values('user', 'admin', '$msg')";
    mysql_query($sql);
    echo json_encode($msg);
}

这里我在电脑上运行(server.php和client.php)聊天,一开始卡得不行,过一会好了之后就正常聊天了,只是不太清楚原因,有知道的朋友麻烦告诉一下我,感激不尽!
(我理解的是因为长连接导致的)

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
如何将数据从文本导入到mysql
Oct 09 PHP
E路文章系统PHP
Dec 11 PHP
snoopy 强大的PHP采集类使用实例代码
Dec 09 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
Jul 03 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
Apr 08 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
Jun 19 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
Feb 12 PHP
PHP入门教程之面向对象基本概念实例分析
Sep 11 PHP
利用PHP生成CSV文件简单示例
Dec 21 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
Jun 06 PHP
解决出现SoapFault (looks like we got no XML document)的问题
Jun 24 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
Oct 23 PHP
PHP文件操作实例总结【文件上传、下载、分页】
Dec 08 #PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
Dec 08 #PHP
Laravel框架定时任务2种实现方式示例
Dec 08 #PHP
PHP单例模式模拟Java Bean实现方法示例
Dec 07 #PHP
thinkPHP框架实现的简单计算器示例
Dec 07 #PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
Dec 07 #PHP
laravel5使用freetds连接sql server的方法
Dec 07 #PHP
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
基于javaScript的this指向总结
2017/07/22 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现simhash算法实例
2014/04/25 Python
Python 数据结构之队列的实现
2017/01/22 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
数学专业推荐信范文
2013/11/21 职场文书
幼儿园家长寄语
2014/04/02 职场文书
大学生在校表现评语
2014/12/31 职场文书
社会实践心得体会范文
2016/01/14 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python