Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿百度商桥项目-DOM操作实现客服与多客户聊天/更换识别终端用户的方式/聊天记录保存到数据库
Blogger Information
Blog 57
fans 3
comment 0
visits 60511
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿百度商桥项目-DOM操作实现客服与多客户聊天/更换识别终端用户的方式/聊天记录保存到数据库
岂几岂几
Original
1343 people have browsed it

仿百度商桥项目-DOM操作实现客服与多客户聊天/更换识别终端用户的方式/聊天记录保存到数据库

学习心得

  • 都是复习, DOM操作, js,jQuery操作等. 基本实现西门老师上课讲的功能内容.

  • cURL的使用, 基础课没教, 在这里卡了蛮久, 需要找时间学习.

1. 实现思路

  • 切换客户聊天记录容器: 使用类似朱老师教的”页签菜单切换”demo.

  • 客服端刷新后, 找回正在沟通的客户: 客户端在创建链接前, 强制先输入手机号. 客服端通过后台管理系统, 用账号登录. 这样就可以用手机号或客服账号做客户连接对象全局数组/客服连接对象全局数组的key. 同时连接对象也设置属性identity, 为其赋值客户手机号或客服账号.

    • 客服刷新页面后, 可以遍历客户连接全局数组, 找到连接属性sendId值为客服账号的连接属性, 将其identity(即手机号)发送消息给客服页面, 客服页面遍历手机号数组, 把这些客户重新添加回客户列表. 然后以客户手机号, 客服账号做查询条件, 使用cURL模拟想laravel发送GET请求, 通过laravel从数据库中查询聊天记录, 并渲染回各个客户的”聊天页签”中(回填聊天记录没做了, 懒…).

  • 提供websocket通信的服务器(也就是warkerman的应用服务器), 使用cURL模拟发送POST请求到laravel, 通过laravel的控制器方法操作数据库, 把聊天记录保存到数据库.

    • 因为是服务器和服务器之间通信, 所以可以不必验证token, 在laravel中的VerifyCsrfToken中间件中, 把定位到保存聊天记录到数据库的控制器方法的路由加入到$except属性数组中, 即, 告诉laravel, 这个路由的post请求就不用验证token了.

2. 效果图

  • 1- 客服端界面

  • 2- 客户端界面

  • 3- 客服小姐姐分配到客户时的客服端界面

  • 4- 客户端收发消息

  • 5-客服端收发消息

  • 6-客服端切换聊天对象
  • 7- 数据库数据

3. 代码清单

  • 1- 使用warkerman搭建websocket通信服务器
  1. <?php
  2. use Workerman\Worker;
  3. require_once __DIR__ . '/workerman/Autoloader.php';
  4. // 加载发送请求的方法
  5. require_once 'save_msg.php';
  7. // 注意：这里与上个例子不同，使用的是websocket协议
  8. $ws_worker = new Worker("websocket://0.0.0.0:2000");
  10. // 启动4个进程对外提供服务
  11. $ws_worker->count = 4;
  13. /* 创建全局连接数组，key=连接的id，val=连接; 因为存在客户可能刷新浏览器页面, 触发websocket给同一个客户再分配一个新的连接id
  14. * 所以, 一般是用客户保存在数据表中的用户id来做key, 每次刷新, 用户id都跟最新分配的连接关联, 就能解决用户刷新的问题了.
  15. * 用户id从哪来? 可以在登录成功后把用户id保存到cookie中. 
  16. * 另一种方案: 把$conns链接数组保存到缓存(如: Redis)中, 同样用用户id做key, 序列化/json格式化的连接做value.
  17. */
  18. /*
  19.  * 新版本: key改为客户在前端录入的手机号, 使用消息数组中key为from_id的元素存储; 
  20.  * 客服数组的key改为管理员账号, 同样用from_id存储
  21.  */
  22. // 客户连接数组
  23. $customerConns = [];
  24. // 客服连接数组
  25. $servicerConns = [];
  27. // 发送约定格式的消息数组(转换成json)
  28. function sendMessage($conn, $from_id, $type, $msg, $custom_id=null) {
  29.     $sendInfo['from_id'] = $from_id;
  30.     $sendInfo['type'] = $type;
  31.     $sendInfo['msg'] = $msg;
  32.     if($custom_id != null) {
  33.         $sendInfo['custom_id'] = $custom_id;
  34.     }
  35.     $conn->send(json_encode($sendInfo));
  36. }
  38. function saveMessage($from, $to, $msg) {
  39.     $msgInfo['from'] = $from;
  40.     $msgInfo['to'] = $to;
  41.     $msgInfo['msg'] = $msg;
  42.     $msgInfo['send_time'] = time();
  43.     saveMsg('cms.com/admin/servicer/savemsg', $msgInfo);
  44. }
  46. // 当收到客户端发来的数据后返回hello $data给客户端
  47. $ws_worker->onMessage = function($connection, $data)
  48. {
  49.     global $customerConns;
  50.     global $servicerConns;
  52.     // 分辨用户类型, 只能客户和客服之间通信.
  53.     // 判断客户端模拟用户登录状态的标识type, 若值为login标识登录成功. 则把用户的类型(客户/客服)
  54.     // 以自定义属性的方式设置到$connection(即连接)中
  55.     // json->数组
  56.     $data = json_decode($data, true);
  57.     if($data['type'] == 'login') {
  58.         var_dump($connection->id);
  59.         // 给连接动态加入group属性,标识[客户]和[客服]
  60.         $connection->group = $data['group'];
  61.         // 改用客户前端录入的手机号/客服小姐姐的登录账号作为连接的识别码, 不用$connection->id了
  62.         $connection->identity = $data['from_id'];
  63.         // 模拟"登录"的连接,放入到对应连接数组中
  64.         if($data['group'] == 'admin') {// admin标识为[客服]
  65.             var_dump('客服小姐姐' . $data['from_id'] . '上线了, 其分配到的链接id为: ' . $connection->id);
  67.             // 改用客服小姐姐的登录账号作为key
  68.             // $servicerConns[$connection->id] = $connection;
  69.             $servicerConns[$data['from_id']] = $connection;
  71.             // 遍历客户连接全局数组, 找到sendId为当前客服小姐姐的客户链接, 返回给这个客服小姐姐
  72.             $customPhoneNumbers = [];
  73.             foreach($customerConns as $phoneNumber => $customerConn) {
  74.                 if(!empty($customerConn->sendId) && $customerConn->sendId == $connection->identity) {
  75.                     $customPhoneNumbers[] = $phoneNumber;
  76.                 }
  77.             }
  78.             // 找到这位客服小姐姐服务的客户
  79.             if(count($customPhoneNumbers) > 0) {
  80.                 sendMessage($connection, 'system', 'login', '继续为[' . implode(',', $customPhoneNumbers) . ']服务吧', $customPhoneNumbers);
  81.             }
  82.         } else {// member标识为[客户]
  83.             // DEL: 改用用户在前端录入的手机号作为key
  84.             // $customerConns[$connection->id] = $connection;
  85.             $customerConns[$data['from_id']] = $connection;
  87.             // 如果是客户登录, 还需要给他安排一个客服(array_rand()函数随机返回数组元素的key值)
  88.             $connection->sendId = array_rand($servicerConns, 1);
  89.             // 没有小姐姐可供分配
  90.             // if(!is_numeric($connection->sendId)) {
  91.             if(empty($connection->sendId)) {
  92.                 sendMessage($connection, 'system', 'msg', '暂无客服小姐姐在线, 请稍后刷新重试');
  93.                 var_dump('暂无客服小姐姐');
  94.                 return;
  95.             }
  96.             var_dump('给手机号为'.$connection->identity.'的客户(链接id: '.$connection->id.')分配的是'.$connection->sendId.'客服小姐姐(链接id: '.$servicerConns[$connection->sendId]->id.')');
  98.             // 通知这位客服, 有新客户进来
  99.             $target = $servicerConns[$connection->sendId];
  100.             sendMessage($target, 'system', 'login', '有新客户登录, 电话号码为: ' . $connection->identity, $connection->identity);
  101.         }
  102.     } else if($data['type'] == 'msg') {// 模拟"发送数据"的连接
  103.         // 判断发送数据的连接是[客服]还是[客户]
  104.         if($connection->group == 'member') {// 客户
  105.             // if(!is_numeric($connection->sendId)) {
  106.             if(empty($connection->sendId)) {
  107.                 sendMessage($connection, 'system', 'msg', '为您服务的小姐姐可能已掉线, 请刷新');
  108.                 var_dump('暂无客服小姐姐');
  109.                 return;
  110.             }
  111.             // 获取在客户登录时指定的客服连接
  112.             $target = $servicerConns[$connection->sendId];
  113.             var_dump('客户' .$connection->identity . '给账号为' . $connection->sendId . '的客服小姐姐发信息');
  114.             sendMessage($target, $connection->identity, 'msg', $data['msg']);
  115.             // 保存消息到数据库
  116.             saveMessage($connection->identity, $target->identity, $data['msg']);
  117.         } else if($connection->group == 'admin') {// 客服
  118.             // 跟谁说话
  119.             $phoneNumber = $data['sendId'];
  120.             if(empty($phoneNumber) || !isset($customerConns[$phoneNumber])) {
  121.                 sendMessage($connection, 'system', 'msg', '该用户不存在, 可能已下线');
  122.                 return;
  123.             }
  124.             // 要跟其说话的客户的链接对象
  125.             $target = $customerConns[$phoneNumber];
  126.             sendMessage($target, $connection->identity, 'msg', $data['msg']);
  127.             saveMessage($connection->identity, $target->identity, $data['msg']);
  128.             var_dump('客服' .$connection->identity . '给手机号为' . $phoneNumber . '的客户发信息');
  129.         }
  130.     }
  131. };
  133. // 当有连接断开时
  134. $ws_worker->onClose = function($connection) {
  135.     global $servicerConns;
  136.     global $customerConns;
  138.     if($connection->group == 'admin') {// 客服断开
  139.         $unconnId = $connection->identity;//$connection->id;
  140.         // 把断开的客服连接移除出客服连接数组
  141.         unset($servicerConns[$connection->id]);
  142.         var_dump('客服' . $unconnId . '下线了');
  143.         // 客服断开, 需要给该客服负责的客户重新分配新客服
  144.         foreach($customerConns as $customerConn) {
  145.             if($customerConn->sendId == $unconnId) {// 该客服小姐姐负责的客户
  146.                 $customerConn->sendId = array_rand($servicerConns, 1);
  148.                 // 没分配到客服小姐姐, 直接结束分配.
  149.                 if(empty($customerConn->sendId)) {
  150.                     sendMessage($connection, 'system', 'msg', '坏了, 客服小姐姐的网络开小差了, 请稍后刷新重试吧');
  151.                     var_dump('当前没有客服小姐姐在线');
  152.                     continue;
  153.                 }
  155.                 var_dump('重新给手机号为'.$customerConn->identity.'的客户(链接id: '.$customerConn->id.')分配的是'.$customerConn->sendId.'客服小姐姐(链接id: '.$servicerConns[$customerConn->sendId]->id.')');
  156.                 // 新分配的客服小姐姐的连接
  157.                 $target = $servicerConns[$customerConn->sendId];
  158.                 // 给新分配到的客服小姐姐发分配消息
  159.                 sendMessage($target, 'system', 'login', '有新客户登录, id为:' . $customerConn->identity, $customerConn->identity);
  160.             }
  161.         }
  162.     } else {// 客户断开
  163.         // 断开的客户连接id
  164.         $unconnId = $connection->identity;
  165.         var_dump('客户' . $unconnId . '下线了');
  166.         // 负责该客户的客服小姐姐id
  167.         $servicerId = $connection->sendId;
  168.         // 把断开的客户连接移除出客户连接数组
  169.         unset($customerConns[$connection->identity]);
  171.         if(empty($servicerId)) {// 判断断开的客户是否有客服接待, 没有, 则直接断开客户连接;
  172.             return;
  173.         }
  174.         // 客户断开, 系统给负责该客户的客服发消息, 不必再负责该客户
  175.         $target = $servicerConns[$servicerId];
  176.         sendMessage($target, 'system', 'logout', '客户' . $unconnId . '跟你说了声拜拜后, 下线了', $unconnId);
  177.     }
  178. };
  180. // 运行worker
  181. Worker::runAll();
  • 2- 使用cURL模拟发送保存聊天记录的脚本
  1. <?php
  2. function saveMsg($url, $data) {
  3.     // $header = ["Content-Type:application/x-www-form-urlencoded", "token:test", "client:h5"];
  4.     $header = ["Content-Type:application/json", "token:test", "client:h5"];
  5.     $res = curlPost($url, $data, 5, $header, 'json');
  6.     var_dump($res);
  7.     return $res;
  8. }
  11. /**
  12.  * 传入数组进行HTTP POST请求
  13.  */
  14. function curlPost($url, $post_data = array(), $timeout = 5, $header = "", $data_type = "") {
  15.     $header = empty($header) ? '' : $header;
  16.     //支持json数据数据提交
  17.     if($data_type == 'json'){
  18.         $post_string = json_encode($post_data);
  19.     }elseif($data_type == 'array') {
  20.         $post_string = $post_data;
  21.     }elseif(is_array($post_data)){
  22.         $post_string = http_build_query($post_data, '', '&');
  23.     }
  24.     var_dump($post_string);
  26.     $ch = curl_init();    // 启动一个CURL会话
  27.     curl_setopt($ch, CURLOPT_URL, $url);     // 要访问的地址
  28.     curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);  // 对认证证书来源的检查   // https请求 不验证证书和hosts
  29.     curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);  // 从证书中检查SSL加密算法是否存在
  30.     // curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); // 模拟用户使用的浏览器
  31.     //curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // 使用自动跳转
  32.     curl_setopt($ch, CURLOPT_AUTOREFERER, 1); // 自动设置Referer
  33.     curl_setopt($ch, CURLOPT_POST, true); // 发送一个常规的Post请求
  34.     curl_setopt($ch, CURLOPT_POSTFIELDS, $post_string);     // Post提交的数据包
  35.     curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);     // 设置超时限制防止死循环
  36.     curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
  37.     //curl_setopt($curl, CURLOPT_HEADER, 0); // 显示返回的Header区域内容
  38.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     // 获取的信息以文件流的形式返回 
  39.     curl_setopt($ch, CURLOPT_HTTPHEADER, $header); //模拟的header头
  40.     $result = curl_exec($ch);
  42.     // 打印请求的header信息
  43.     //$a = curl_getinfo($ch);
  44.     //var_dump($a);
  46.     curl_close($ch);
  47.     return $result;
  48. }
  • 3- 客户端
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>"百度商桥"客服端</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <style>
  11.         * {
  12.             padding: 0;
  13.             margin: 0;
  14.             box-sizing: border-box;
  15.         }
  16.         body {
  17.             padding: 10px;
  18.             width: 100vw;
  19.             height: 100vh;
  20.             background-color: #f0f0f0;
  21.             display: grid;
  22.             gap: 10px;
  23.             grid-template-columns: 240px auto;
  24.             grid-template-rows: 3fr 2fr;
  25.             grid-template-areas: 
  26.                 "customer-list message-list"
  27.                 "customer-list message-send";
  28.         }
  29.         .customer-list {
  30.             grid-area: customer-list;
  31.             background-color: white;
  32.             border: 1px solid #ccc;
  33.         }
  34.         .message-list {
  35.             grid-area: message-list;
  36.             background-color: white;
  37.             overflow-y: auto;
  38.             padding: 10px;
  39.             display: grid;
  40.             grid-template-rows: 50px auto;
  41.         }
  42.         .message-list > .system-message {
  43.             height: 40px;
  44.             width: 100%;
  45.             background-color: wheat;
  46.             border: 1px solid #eaeaea;
  47.             margin-bottom: 10px;
  48.             border-radius: 5PX;
  49.             overflow-y: hidden;
  50.         }
  51.         .message-list > .private-chat-box {
  52.             background-color: #DFECEC;
  53.             border-radius: 5px;
  54.         }
  55.         .show {
  56.             display: block;
  57.         }
  58.         .hide {
  59.             display: none;
  60.         }
  61.         .message-send {
  62.             display: grid;
  63.             grid-auto-rows: auto 40px;
  64.             grid-area: message-send;
  65.             background-color: white;
  66.             padding: 10px;
  67.         }
  68.         .message-send > .message-input-area {
  69.             padding: 5px;
  70.             background-color: #fafafa;
  71.             border: 1px solid #ccc;
  72.             margin-bottom: 10px;
  73.             border-radius: 5px;
  74.             outline: none;
  75.             overflow-y: auto;
  76.         }
  77.         .message-send > .message-input-area:hover {
  78.             box-shadow: 0px 0px 1px #333;
  79.         }
  80.         .message-send > .btn-area {
  81.             width: 100%;
  82.             text-align: right;
  83.         }
  84.         .msg-box-friend {
  85.             padding: 10px;
  86.             width: 75%;
  87.             margin: 5px auto 0 5px;
  88.             background-color: lightblue;
  89.             border: 1px solid #ccc;
  90.             border-radius: 5px;
  91.             /* overflow-x: wordwrap; */
  92.             white-space:normal;
  93.         }
  95.         .msg-box-me {
  96.             padding: 10px;
  97.             width: 75%;
  98.             margin: 5px 5px 0 auto;
  99.             background-color: wheat;
  100.             border: 1px solid #ccc;
  101.             border-radius: 5px;
  102.             /* overflow-x: wordwrap; */
  103.             white-space:normal;
  104.         }
  105.         .customer-item {
  106.             border: 1px solid #e0e0e0;
  107.             border-radius: 5px;
  108.             margin: 5px;
  109.             padding: 5px 10px;
  110.         }
  111.         .active {
  112.             background-color: skyblue;
  113.         }
  114.         .bling {
  115.             color: red;
  116.             background-color: linen;
  117.         }
  118.     </style>
  119. </head>
  120. <body>
  121.     <input type="hidden" name="username" value="{{$username}}">
  122.     <!-- 客户列表 -->
  123.     <div class="customer-list">
  125.     </div>
  126.     <!-- 消息记录 -->
  127.     <div class="message-list">
  128.         <div class="system-message"></div>
  129.         <!-- <div class="private-chat-box"></div> -->
  130.     </div>
  131.     <!-- 发送消息 -->
  132.     <div class="message-send">
  133.         <div class="message-input-area" contenteditable="true">
  135.         </div>
  136.         <div class="btn-area">
  137.             <span class="layui-btn layui-btn-success" onclick="send()">发送</span>
  138.         </div>
  139.     </div>
  140. </body>
  141. <script>
  142.     layui.use(['layer'], function() {
  143.         layer = layui.layer;
  144.         $ = layui.jquery;
  145.     });
  147.     // 假设服务端ip为127.0.0.1
  148.     ws = new WebSocket("ws://127.0.0.1:2000");
  149.     /* 当客户端连通服务器端的时候 */
  150.     ws.onopen = function() {
  151.         // 当客户端连通服务端时, 把当前客户端的用户标识(客户/客服)发给服务端
  152.         var data = {};
  153.         // js对象的属性可以自定义. type: login, 标识用户行为为声明登录；type: msg, 标识用户行为为发送消息。
  154.         data.type = 'login';
  155.         // 约定admin代表登录的用户是客服
  156.         data.group = 'admin';
  157.         // 使用登录账号作为客服小姐姐的登录标识(因为链接id在刷新或关闭浏览器后值会改变)
  158.         data.from_id = $('input[name="username"]').val();
  159.         // 发送JSON格式的数据
  160.         ws.send(JSON.stringify(data));
  161.     };
  162.     ws.onmessage = function(e) {
  163.         var data = JSON.parse(e.data);
  164.         // alert("收到服务端的消息：" + e.data);
  167.         // 系统发来的消息, 表示有新客户接入, 并分配到当前客服小姐姐
  168.         if(data.from_id == 'system' && data.type == 'login') {
  169.             if(!Array.isArray(data.custom_id)) {
  170.                 addOldCustomer(data.custom_id);
  171.             } else {
  172.                 data.custom_id.forEach(function(item) {
  173.                     addOldCustomer(item);
  174.                 });
  175.             }
  177.             // 发送客户接入的系统消息
  178.             var str = "<span style='margin-right: 20px; color: red;'>系统消息: "+data.msg+"</span>";
  179.             $('.system-message').prepend($(str));
  180.         } else if(data.from_id == 'system' && data.type == 'logout') {// 客户下线
  181.             // 客户列表移除客户
  182.             $('.customer-item[data-id="'+data.custom_id+'"]').remove();
  183.             // 聊天记录窗口移除聊天容器
  184.             $('.private-chat-box[data-id="'+data.custom_id+'"]').remove();
  185.             // 系统消息走一波
  186.             // 发送客户接入的系统消息
  187.             var str = "<span style='margin-right: 20px;'>系统消息: 客户"+data.custom_id+"下线了</span>";
  188.             $('.system-message').prepend($(str));
  189.         } else if(data.type = 'msg') {// 客户给客服发消息
  190.             // 客户列表中的客户项背景色变一下再还原
  191.             // 客户列表中的当前客户项
  192.             var customerItem = $('.customer-item[data-id="'+data.from_id+'"]');
  193.             blingbling(customerItem);
  195.             // 获取正在聊天的窗口的data-id值
  196.             var chatting_id = $('.private-chat-box').filter('.show').data('id');
  197.             // 当前没有正在聊天的窗口, 则显示跟发送消息的客户的聊天窗口
  198.             if(chatting_id == undefined) {
  199.                 // 显示聊天对话框
  200.                 var chatbox = $('.private-chat-box').filter('[data-id="'+data.from_id+'"]');
  201.                 // chatbox.removeClass('hide').addClass('show');
  202.                 // 相当于点击当前发送消息的客户的客户向
  203.                 var customItem = $('.customer-item[data-id="'+data.from_id+'"]')
  204.                 talkTo(customerItem[0]);
  205.                 // 显示客户讲的消息
  206.                 var str = "<div class='msg-box-friend'>"+data.from_id+"说: "+data.msg+"</div>";
  207.                 $(str).appendTo(chatbox);
  208.             } else if(chatting_id != data.from_id) {// 正在聊天的客户不是当前发送消息的客户
  209.                 // 把消息插入跟当前客户的聊天窗口
  210.                 var str = "<div class='msg-box-friend'>"+data.from_id+"说: "+data.msg+"</div>";
  211.                 $(str).appendTo($('.private-chat-box').filter('[data-id="'+data.from_id+'"]'));
  213.                 // 在客户列表中当前发送消息的客户项右边加上未读标签数量
  214.                 // 客户项中的未读消息数量框
  215.                 var msgCount = customerItem.find('.layui-badge');
  216.                 // 如果没有, 表示之前没有未读消息, 加上即可
  217.                 if(msgCount == undefined || msgCount.length < 1) {
  218.                     $('<span class="layui-badge">1</span>').appendTo(customerItem);
  219.                 } else {// 有, 未读消息加一
  220.                     var count = parseInt(msgCount.html()) + 1;
  221.                     msgCount.html(count);
  222.                 }
  223.             } else if(chatting_id == data.from_id) {// 当前聊天窗口就是当前发送消息的客户
  224.                 // 逻辑可以直接用chatting_id是undefined的逻辑, 后期考虑合并
  226.                 // 显示聊天对话框
  227.                 var chatbox = $('.private-chat-box').filter('[data-id="'+data.from_id+'"]');
  228.                 chatbox.removeClass('hide').addClass('show');
  229.                 console.log(chatbox);
  230.                 // 显示客户讲的消息
  231.                 var str = "<div class='msg-box-friend'>"+data.from_id+"说: "+data.msg+"</div>";
  232.                 $(str).appendTo(chatbox);
  233.             }
  234.         }
  235.     };
  237.     // 客服刷新网页, 找回正在沟通的客户列表
  238.     function addOldCustomer(custom_id) {
  239.         // 把新登录的客户加到客户列表区
  240.         var customer = $('<div class="customer-item" data-id="'+custom_id+'" onclick="talkTo(this)">客户'+custom_id+'</div>');
  241.         customer.appendTo('.customer-list');
  242.         // 闪一下
  243.         blingbling(customer);
  245.         // 在消息记录容器(message-list)中插入跟登录的客户聊天的对话框div
  246.         var privateChatBox = '<div class="private-chat-box hide" data-id="'+custom_id+'"></div>';
  247.         $(privateChatBox).appendTo('.message-list');
  249.     }
  251.     // 客户上线/有未读消息/有新消息, 变一下色, 2秒后复原
  252.     function blingbling(jqele) {
  253.         jqele.addClass('bling');
  254.         setTimeout(() => {
  255.             jqele.removeClass('bling');
  256.         }, 2000);
  257.     }
  259.     // 点击客户列表区, 选择要聊天的客户对象
  260.     function talkTo(ele) {
  261.         $(ele).siblings().removeClass('active');
  262.         $(ele).addClass('active');
  264.         // 显示聊天窗口
  265.         var dataId = $(ele).data('id');
  266.         $('.private-chat-box').removeClass('show').addClass('hide');
  267.         $('.private-chat-box[data-id="'+dataId+'"]').removeClass('hide').addClass('show');
  269.         // 移除未读消息
  270.         $(ele).find('.layui-badge').remove();
  271.     }
  273.     function send() {
  274.         var str = "<div class='msg-box-me'>我说: "+$('.message-input-area').html()+"</div>";
  275.         var data = {};
  276.         // 标识此次发送的数据是发送消息
  277.         data.type='msg';
  278.         // 标识是从客服端发的
  279.         data.group = 'admin'
  280.         // 获取当前选中的客户
  281.         var customer_id = $('div[class*=active]').data('id');
  282.         if(isNaN(customer_id)) {
  283.             return layer.alert('请先选中一个客户, 再发送消息.');
  284.         }
  285.         data.sendId = customer_id;
  286.         // 要发送的消息
  287.         data.msg = $('.message-input-area').html();
  288.         $(str).appendTo('.message-list > .private-chat-box.show');
  289.         // 转成json字符串发送。
  290.         ws.send(JSON.stringify(data));
  291.         $('.message-input-area').html('');
  292.     }
  293. </script>
  294. </html>
  • 4- 客服端
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>"百度商桥"客户端</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  16.         body {
  17.             background-color: #fafafa;
  18.         }
  20.         .im {
  21.             width: 400px;
  22.             height: 520px;
  23.             background-color: wheat;
  24.             margin: 40px auto;
  25.             padding: 10px;
  26.             box-shadow: 0 0 5px #999;
  27.         }
  29.         .im .history {
  30.             background-color: white;
  31.             border: 1px solid #aaa;
  32.             width: 100%;
  33.             height: 290px;
  34.             padding: 5px;
  35.             overflow-y: auto;
  36.             border-radius: 5px;
  37.         }
  39.         .im .inputing {
  40.             background-color: white;
  41.             border: 1px solid #aaa;
  42.             width: 100%;
  43.             height: 150px;
  44.             margin-top: 10px;
  45.             padding: 5px;
  46.             outline: none;
  47.             border-radius: 5px;
  48.         }
  50.         .im .btn-area {
  51.             width: 100%;
  52.             text-align: right;
  53.             margin-top: 10px;
  54.         }
  56.         .msg-box-friend {
  57.             padding: 10px;
  58.             width: 75%;
  59.             margin: 5px auto 0 5px;
  60.             background-color: lightblue;
  61.             border: 1px solid #ccc;
  62.             border-radius: 5px;
  63.             /* overflow-x: wordwrap; */
  64.             white-space:normal;
  65.         }
  67.         .msg-box-me {
  68.             padding: 10px;
  69.             width: 75%;
  70.             margin: 5px 5px 0 auto;
  71.             background-color: wheat;
  72.             border: 1px solid #ccc;
  73.             border-radius: 5px;
  74.             /* overflow-x: wordwrap; */
  75.             white-space:normal;
  76.         }
  77.     </style>
  78. </head>
  79. <body>
  80.     <input type="hidden" name="phone_number" value="">
  81.     <div class="im">
  82.         <div class="history">
  84.         </div>
  85.         <!-- contenteditable="true", 这个div就可编辑了 -->
  86.         <div class="inputing" contenteditable="true">
  88.         </div>
  89.         <div class="btn-area">
  90.             <span class="layui-btn layui-btn-success" onclick="send()">发送</span>
  91.         </div>
  92.     </div>
  93. </body>
  94. <script>
  95.     layui.use(['layer'], function() {
  96.         layer = layui.layer;
  97.         $ = layui.jquery;
  99.         // 在layer加载完成后再弹出, 否则无法上下左右居中显示弹出框.
  100.         layer.ready(function() {
  101.             // 用户填入手机号
  102.             getPhoneNumber();
  103.         });
  104.     });
  106.     function getPhoneNumber() {
  107.         layer.prompt({
  108.             formType: 0,
  109.             title: '请输入你的手机号',
  110.             area: ['800px', '350px'],
  111.             btn: ['确定']
  112.         }, function(value, index, elem) {
  113.             // 验证是否是有效地手机号码
  114.             if(!(/^1[3456789]\d{9}$/.test(value))){ 
  115.                 return layer.alert("手机号码有误，请重填");  
  116.             } 
  117.             // 保存电话号码到隐藏域
  118.             $("input[name='phone_number']").val(value);
  120.             // 连接websocket服务器
  121.             connect(value);
  123.             layer.close(index);
  124.         });
  125.     }
  127.     function connect(value) {
  128.         // 假设服务端ip为127.0.0.1
  129.         ws = new WebSocket("ws://127.0.0.1:2000");
  131.         /* 当客户端连通服务器端的时候 */
  132.         ws.onopen = function() {
  133.             // 当客户端连通服务端时, 把当前客户端的用户标识(客户/客服)发给服务端
  134.             var data = {};
  135.             // js对象的属性可以自定义. type: login, 标识用户行为为声明登录；type: msg, 标识用户行为为发送消息。
  136.             data.type = 'login';
  137.             // 约定admin表示登录的用户是客户
  138.             data.group = 'member';
  139.             // 识别客户的唯一码从连接id改为用户手机号, 因为刷新后, 连接id就会变.
  140.             data.from_id = value;
  141.             // 发送JSON格式的数据
  142.             ws.send(JSON.stringify(data));
  143.         };
  145.         // 从服务器端获取到消息时
  146.         ws.onmessage = function(e) {
  147.             // alert("收到服务端的消息：" + e.data);
  148.             var receive = JSON.parse(e.data);
  149.             var str = "<div class='msg-box-friend'>"+receive.from_id+"说: "+receive.msg+"</div>";
  150.             $(str).appendTo('.history');
  151.         };
  152.     }
  156.     function send() {
  157.         // 消息框
  158.         var str = "<div class='msg-box-me'>我说: "+$('.inputing').html()+"</div>";
  159.         var data = {};
  160.         // 标识此次发送的数据是发送消息
  161.         data.type='msg';
  162.         // 标识是从客服端发的
  163.         data.group = 'admin'
  164.         // 标识私聊的对象id，0标识群发. DEL_客户连接时由系统随机分配客服小姐姐, 不需要手动指定了
  165.         // data.sendId = 0;
  166.         // 要发送的消息
  167.         data.msg = $('.inputing').html();
  168.         // 在消息历史中显示发送的消息
  169.         $(str).appendTo('.history');
  170.         // 发送JSON格式的数据
  171.         ws.send(JSON.stringify(data));
  172.         $('.inputing').html('');
  173.     }
  174. </script>
  175. </html>
  • 5- 保存消息的控制器方法
  1. public function saveMsg(Request $req) {
  2.     $msg = $req->all();
  3.     DB::table('msg_list')->insert($msg);
  4.     return json_encode(['status' => 0, 'message' => '保存成功']);
  5. }
Correcting teacher：GuanhuiGuanhui

Correction status：qualified

Teacher's comments：标题可以适当的简洁些！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post