Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿百度商桥项目-实现商桥客户和客服点对点通信
Blogger Information
Blog 57
fans 3
comment 0
visits 60509
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
仿百度商桥项目-实现商桥客户和客服点对点通信
岂几岂几
Original
1176 people have browsed it

实现商桥客户和客服点对点通信

学习心得

  • 因为所有操作都通过消息内容来辨别操作类型和操作对象, 所以理解起来比较绕, 好在经过西门老师的耐心讲解, 自己也基本能实现了.

  • 待解决的问题: 用户刷新浏览器, 相当于执行下线, 换个马甲再上线的操作, 这样没法使用连接对象id来标识用户. 可以考虑, 使用保存在 cookie 中的客户信息, 如客户id等, 作为两个全局数组的key值来标识用户及其当前链接对象. 两个全局数组再放入高速缓存, 如 Redis 中, 问题可解.

1. 实现思路

    1. 客户端的用户类型分为 客户 和 客服 两种, 实例只实现 客户 和 客服 点对点通信.
    1. 客户端发送的消息分为: 当客户端成功创建跟服务器的链接时, 发送的包含客户端类型(客户或客服)的上线消息; 客户端和客户端之间, 通过服务器转发的聊天信息; 客户端下线(断开链接)时, 发送的下线消息.
    1. 使用通信的数据辨别通信行为. 约定通信的数据数组中包含以下元素(发送时转换成json字符串):
    • 1.1 msg 元素, 值为要发送的消息正文.
    • 1.2 type 元素, 用于区分发送的消息类别; 值为 login 时, 表示有新客户端跟服务器成功创建链接时发送的身份信息; 值为 msg 时, 表示此次发送的是聊天信息; 值为 logout 时, 表示发送消息的客户端将断开链接.
    • 1.3 from_id 元素, 用户保存发送消息的客户端 链接id , 若为系统发送消息, 则值为 system .
    • 1.4 sendId 元素, 值为发送消息的客户端希望服务器把消息转发给的目标客户端 链接id .
    • 1.5 group 元素, 用来区分发送消息的客户端用户类型, member 值表示用户为 客户 , admin 值表示用户为 客服 .
    • 1.6 custom_id 元素, 客户 成功创建链接时, 系统给跟该用户对接的 客服 发送客户上线的消息, 此时 from_id 被设置为 system , 所以使用 custom_id 元素指定上线的 客户 客户端id; 当 客户 断开连接时, 系统给跟该用户对接的 客服 发送客户下线消息, 此时 from_id 被设置为 sytem , 所以使用 custom_id 元素指定下线的 客户 客户端链接id.
    1. 客户端链接成功后, 发送上线消息到服务器, 服务器根据消息中的属性值, 执行不同的处理.
    • 在链接对象中设置 group 属性, 值等于上线消息中的 group 元素值, 标识该链接是 客户 还是 客服 链接.
    • 创建两个全局数组, 分别保存 客户 链接和 客服 链接. key为链接id, 值为链接对象.
    • 若是 客服 客户端发来的上线消息, 则把发送消息的 客服 链接放入 客服 全局数组即可.
    • 若是 客户 客户端发送来的上线消息
      • 把发送消息的 客户 链接放入 客户 全局数组;
      • 使用 array_rand() 函数从 客服 数组中随机获取一个 客服 链接id, 分配给当前 客户 . 若当前没有 客服 , 则服务器给当前 客户 链接的客户端发送消息, 让客户端过一会儿刷新重试.
      • 若随机到 客服 , 则把 客服 id设置到当前 客户 的 sendId 属性, 然后服务器给随机到的 客服 链接的客户端发送消息, 通知该 客服 有新 客服 上线, 客服 客户端前端的 客户 列表新增当前 客户 项.
    1. 客户 客户端发送聊天消息到服务器, 服务器根据消息中的 sendId 元素值, 从全局 客服 数组中获取对应的 客服 链接对象, 若获取不到, 则服务器发送系统消息提示 客户 客户端刷新界面重新创建链接来获取 客服 链接. 若获取到对象, 则转发消息给该 客服 对象.
    1. 客服 客户端点击 客户 列表中的 客户 , 获取其 客户 链接id , 组装成消息发送给服务器. 服务器的处理跟 客户 客户端发送消息的处理类似.
    1. 客户 客户端下线(关闭浏览器/刷新浏览器)时, 给服务器发送下线消息, 服务器通过发送消息的 客户 链接id, 将其从 客户 全局数组中移除, 并根据消息中的 sendId 给负责该客户的 客服 链接发送系统消息, 通知该 客服 , 客户 下线的消息.
    1. 客服 客户端下线时, 给服务器发送下线消息, 服务器同样先根据其id从 客服 全局数组中移除, 再遍历 客户 全局数组, 找到其负责的 客户 链接(可以优化的点, 可以在 客服 发送的消息中带上其负责的 客户 id), 为其重新分配 客服 .

2. 代码清单

    1. 服务端
  1. <?php
  2. use Workerman\Worker;
  3. require_once __DIR__ . '/workerman/Autoloader.php';
  5. // 注意：这里与上个例子不同，使用的是websocket协议
  6. $ws_worker = new Worker("websocket://0.0.0.0:2000");
  8. // 启动4个进程对外提供服务
  9. $ws_worker->count = 4;
  11. /* 创建全局连接数组，key=连接的id，val=连接; 因为存在客户可能刷新浏览器页面, 触发websocket给同一个客户再分配一个新的连接id
  13. * 所以, 一般是用客户保存在数据表中的用户id来做key, 每次刷新, 用户id都跟最新分配的连接关联, 就能解决用户刷新的问题了.
  14. * 用户id从哪来? 可以在登录成功后把用户id保存到cookie中. 
  15. * 另一种方案: 把$conns链接数组保存到缓存(如: Redis)中, 同样用用户id做key, 序列化/json格式化的连接做value.
  17. */
  18. // 客户连接数组
  19. $customerConns = [];
  20. // 客服连接数组
  21. $servicerConns = [];
  23. // 当收到客户端发来的数据后返回hello $data给客户端
  24. $ws_worker->onMessage = function($connection, $data)
  25. {
  26.     global $customerConns;
  27.     global $servicerConns;
  29.     // 分辨用户类型, 只能客户和客服之间通信.
  30.     // 判断客户端模拟用户登录状态的标识type, 若值为login标识登录成功. 则把用户的类型(客户/客服)
  31.     // 以自定义属性的方式设置到$connection(即连接)中
  32.     // json->数组
  33.     $data = json_decode($data, true);
  34.     if($data['type'] == 'login') {
  35.         var_dump($connection->id);
  36.         // 给连接动态加入group属性,标识[客户]和[客服]
  37.         $connection->group = $data['group'];
  38.         // 模拟"登录"的连接,放入到对应连接数组中
  39.         if($data['group'] == 'admin') {// admin标识为[客服]
  40.             $servicerConns[$connection->id] = $connection;
  41.         } else {// member标识为[客户]
  42.             $customerConns[$connection->id] = $connection;
  44.             // 如果是客户登录, 还需要给他安排一个客服(array_rand()函数随机返回数组元素的key值)
  45.             $connection->sendId = array_rand($servicerConns, 1);
  46.             // 没有小姐姐可供分配
  47.             if(!is_numeric($connection->sendId)) {
  48.                 $sendInfo['from_id'] = 'system';
  49.                 $sendInfo['type'] = 'msg';
  50.                 $sendInfo['msg'] = '暂无客服小姐姐在线, 请稍后刷新重试';
  51.                 $connection->send(json_encode($sendInfo));
  52.                 var_dump('暂无客服小姐姐');
  53.                 return;
  54.             }
  55.             var_dump('给id为' . $connection->id .'的客户分配的是id为' . $connection->sendId . '的客服小姐姐');
  57.             // 通知这位客服, 有新客户进来
  58.             $target = $servicerConns[$connection->sendId];
  59.             $sendInfo['from_id'] = 'system';
  60.             $sendInfo['custom_id'] = $connection->id;
  61.             $sendInfo['type'] = 'login';
  62.             $sendInfo['msg'] = '有新客户登录, id为:' . $connection->id;
  63.             $target->send(json_encode($sendInfo));
  64.         }
  65.     } else if($data['type'] == 'msg') {// 模拟"发送数据"的连接
  66.         // 判断发送数据的连接是[客服]还是[客户]
  67.         if($connection->group == 'member') {// 客户
  68.             if(!is_numeric($connection->sendId)) {
  69.                 $sendInfo['from_id'] = 'system';
  70.                 $sendInfo['type'] = 'msg';
  71.                 $sendInfo['msg'] = '暂无客服小姐姐在线, 请稍后刷新重试';
  72.                 $connection->send(json_encode($sendInfo));
  73.                 var_dump('暂无客服小姐姐');
  74.                 return;
  75.             }
  76.             // 获取在客户登录时指定的客服连接
  77.             $target = $servicerConns[$connection->sendId];
  78.             var_dump('给id为' . $connection->sendId . '的客服小姐姐发信息');
  79.             // 把发送消息的连接id设置到要发送的数据中
  80.             $sendInfo['from_id'] = $connection->id;
  81.             $sendInfo['msg'] = $data['msg'];
  82.             // 给要发送消息的对象发送消息
  83.             $target->send(json_encode($sendInfo));
  84.         } else if($connection->group == 'admin') {// 客服
  85.             $customer_id = $data['sendId'];
  86.             if(!is_numeric($customer_id)) {
  87.                 $sendInfo['type'] = 'msg';
  88.                 $sendInfo['msg'] = '该客户不存在, 可能已下线';
  89.                 $sendInfo['from_id'] = 'system';
  90.                 $connection->send(json_encode($sendInfo));
  91.                 return;
  92.             }
  93.             // 获取要发送消息的客户连接
  94.             if(!isset($customerConns[$customer_id])) {
  95.                 $sendInfo['type'] = 'msg';
  96.                 $sendInfo['msg'] = '该客户不存在, 可能已下线!';
  97.                 $sendInfo['from_id'] = 'system';
  98.                 $connection->send(json_encode($sendInfo));
  99.                 return;
  100.             }
  101.             $target = $customerConns[$customer_id];
  102.             $sendInfo['type'] = 'msg';
  103.             $sendInfo['msg'] = $data['msg'];
  104.             $sendInfo['from_id'] = $connection->id;
  105.             $target->send(json_encode($sendInfo));
  106.         }
  107.     }
  109.     // 群发消息
  110.     /* global $ws_worker;
  111.     foreach($ws_worker->connections as $conn) {
  112.         $conn->send('hello');
  113.     } */
  114.     // 向客户端发送hello $data
  115.     // $connection->send('hello ' . $data);
  116. };
  118. // 当有连接断开时
  119. $ws_worker->onClose = function($connection) {
  120.     global $servicerConns;
  121.     global $customerConns;
  123.     if($connection->group == 'admin') {// 客服断开
  124.         $unconnId = $connection->id;
  125.         // 把断开的客服连接移除出客服连接数组
  126.         unset($servicerConns[$connection->id]);
  127.         var_dump('客服' . $unconnId . '下线了');
  128.         // 客服断开, 需要给该客服负责的客户重新分配新客服
  129.         foreach($customerConns as $customerConn) {
  130.             if($customerConn->sendId == $unconnId) {// 该客服小姐姐负责的客户
  131.                 $customerConn->sendId = array_rand($servicerConns, 1);
  133.                 // 没分配到客服小姐姐, 直接结束分配.
  134.                 if(!is_numeric($customerConn->sendId)) {
  135.                     var_dump('当前没有客服小姐姐');
  136.                     continue;
  137.                 }
  139.                 var_dump('重新给客户' . $customerConn->id . '分配新的客服小姐姐:' . $customerConn->sendId);
  140.                 // 新分配的客服小姐姐的连接
  141.                 $target = $servicerConns[$customerConn->sendId];
  142.                 // 给新分配到的客服小姐姐发分配消息
  143.                 $sendInfo['from_id'] = 'system';
  144.                 $sendInfo['custom_id'] = $customerConn->id;
  145.                 $sendInfo['type'] = 'login';
  146.                 $sendInfo['msg'] = '有新客户登录, id为:' . $customerConn->id;
  147.                 $target->send(json_encode($sendInfo));
  148.             }
  149.         }
  150.     } else {// 客户断开
  151.         // 断开的客户连接id
  152.         $unconnId = $connection->id;
  153.         var_dump('客户' . $unconnId . '下线了');
  154.         // 负责该客户的客服小姐姐id
  155.         $servicerId = $connection->sendId;
  156.         // 把断开的客户连接移除出客户连接数组
  157.         unset($customerConns[$connection->id]);
  159.         if(!is_numeric($servicerId)) {// 判断断开的客户是否有客服接待, 没有, 则直接断开客户连接;
  160.             return;
  161.         }
  162.         // 客户断开, 系统给负责该客户的客服发消息, 不必再负责该客户
  163.         $target = $servicerConns[$servicerId];
  164.         $sendInfo['from_id'] = 'system';
  165.         $sendInfo['msg'] = '客户' . $unconnId . '跟你说了声拜拜后, 下线了';
  166.         $sendInfo['custom_id'] = $unconnId;
  167.         $sendInfo['type'] = 'logout';
  168.         $target->send(json_encode($sendInfo));
  169.     }
  170. };
  172. // 运行worker
  173. Worker::runAll();
    1. 客户 客户端
  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>
  12.         * {
  14.             margin: 0;
  15.             padding: 0;
  16.             box-sizing: border-box;
  17.         }
  18.         body {
  19.             background-color: #fafafa;
  20.         }
  22.         .im {
  23.             width: 400px;
  24.             height: 520px;
  25.             background-color: wheat;
  26.             margin: 40px auto;
  27.             padding: 10px;
  28.         }
  30.         .im .history {
  31.             background-color: white;
  32.             border: 1px solid #aaa;
  33.             width: 100%;
  34.             height: 290px;
  35.             padding: 5px;
  36.             overflow-y: auto;
  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.         }
  49.         .im .btn-area {
  50.             width: 100%;
  51.             text-align: right;
  52.             margin-top: 10px;
  53.         }
  55.         .msg-box-friend {
  56.             padding: 10px;
  57.             width: 75%;
  58.             margin: 5px auto 0 5px;
  59.             background-color: lightblue;
  60.             border: 1px solid #ccc;
  61.             border-radius: 5px;
  62.             /* overflow-x: wordwrap; */
  63.             white-space:normal;
  64.         }
  66.         .msg-box-me {
  67.             padding: 10px;
  68.             width: 75%;
  69.             margin: 5px 5px 0 auto;
  70.             background-color: wheat;
  71.             border: 1px solid #ccc;
  72.             border-radius: 5px;
  73.             /* overflow-x: wordwrap; */
  74.             white-space:normal;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="im">
  80.         <div class="history">
  82.         </div>
  83.         <!-- contenteditable="true", 这个div就可编辑了 -->
  84.         <div class="inputing" contenteditable="true">
  86.         </div>
  87.         <div class="btn-area">
  88.             <span class="layui-btn layui-btn-success" onclick="send()">发送</span>
  89.         </div>
  90.     </div>
  91. </body>
  92. <script>
  93.     layui.use(['layer'], function() {
  94.         layer = layui.layer;
  95.     });
  97.     // 假设服务端ip为127.0.0.1
  98.     ws = new WebSocket("ws://127.0.0.1:2000");
  99.     /* 当客户端连通服务器端的时候 */
  100.     ws.onopen = function() {
  101.         // 当客户端连通服务端时, 把当前客户端的用户标识(客户/客服)发给服务端
  102.         var data = {};
  103.         // js对象的属性可以自定义. type: login, 标识用户行为为声明登录；type: msg, 标识用户行为为发送消息。
  104.         data.type = 'login';
  105.         // 约定admin表示登录的用户是客户
  106.         data.group = 'member';
  107.         // 发送JSON格式的数据
  108.         ws.send(JSON.stringify(data));
  109.     };
  110.     ws.onmessage = function(e) {
  111.         // alert("收到服务端的消息：" + e.data);
  112.         var receive = JSON.parse(e.data);
  113.         var str = "<div class='msg-box-friend'>"+receive.from_id+"说: "+receive.msg+"</div>";
  114.         $(str).appendTo('.history');
  115.     };
  117.     function send() {
  118.         // 消息框
  119.         var str = "<div class='msg-box-me'>我说: "+$('.inputing').html()+"</div>";
  120.         var data = {};
  121.         // 标识此次发送的数据是发送消息
  122.         data.type='msg';
  123.         // 标识是从客服端发的
  124.         data.group = 'admin'
  125.         // 标识私聊的对象id，0标识群发. DEL_客户连接时由系统随机分配客服小姐姐, 不需要手动指定了
  126.         // data.sendId = 0;
  127.         // 要发送的消息
  128.         data.msg = $('.inputing').html();
  129.         // 在消息历史中显示发送的消息
  130.         $(str).appendTo('.history');
  131.         // 发送JSON格式的数据
  132.         ws.send(JSON.stringify(data));
  133.         $('.inputing').html('');
  134.     }
  135. </script>
  136. </html>
    1. 客服 客户端
  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>
  12.         * {
  14.             padding: 0;
  15.             margin: 0;
  16.             box-sizing: border-box;
  17.         }
  18.         body {
  19.             padding: 10px;
  20.             width: 100vw;
  21.             height: 100vh;
  22.             background-color: #f0f0f0;
  23.             display: grid;
  24.             gap: 10px;
  25.             grid-template-columns: 240px auto;
  26.             grid-template-rows: 3fr 2fr;
  27.             grid-template-areas: 
  28.                 "customer-list message-list"
  29.                 "customer-list message-send";
  30.         }
  31.         .customer-list {
  32.             grid-area: customer-list;
  33.             background-color: white;
  34.             border: 1px solid #ccc;
  35.         }
  36.         .message-list {
  37.             grid-area: message-list;
  38.             background-color: white;
  39.             overflow-y: auto;
  40.         }
  41.         .message-send {
  42.             display: grid;
  43.             grid-auto-rows: auto 40px;
  44.             grid-area: message-send;
  45.             background-color: white;
  46.             padding: 10px;
  47.         }
  48.         .message-send > .message-input-area {
  49.             padding: 5px;
  50.             background-color: #fafafa;
  51.             border: 1px solid #ccc;
  52.             margin-bottom: 10px;
  53.             border-radius: 5px;
  54.             outline: none;
  55.             overflow-y: auto;
  56.         }
  57.         .message-send > .message-input-area:hover {
  58.             box-shadow: 0px 0px 1px #333;
  59.         }
  60.         .message-send > .btn-area {
  61.             width: 100%;
  62.             text-align: right;
  63.         }
  64.         .msg-box-friend {
  65.             padding: 10px;
  66.             width: 75%;
  67.             margin: 5px auto 0 5px;
  68.             background-color: lightblue;
  69.             border: 1px solid #ccc;
  70.             border-radius: 5px;
  71.             /* overflow-x: wordwrap; */
  72.             white-space:normal;
  73.         }
  75.         .msg-box-me {
  76.             padding: 10px;
  77.             width: 75%;
  78.             margin: 5px 5px 0 auto;
  79.             background-color: wheat;
  80.             border: 1px solid #ccc;
  81.             border-radius: 5px;
  82.             /* overflow-x: wordwrap; */
  83.             white-space:normal;
  84.         }
  85.         .customer-item {
  86.             border: 1px solid #e0e0e0;
  87.             border-radius: 5px;
  88.             margin: 5px;
  89.             padding: 5px 10px;
  90.         }
  91.         .active {
  92.             background-color: skyblue;
  93.         }
  94.     </style>
  95. </head>
  96. <body>
  97.     <!-- 客户列表 -->
  98.     <div class="customer-list">
  100.     </div>
  101.     <!-- 消息记录 -->
  102.     <div class="message-list">
  104.     </div>
  105.     <!-- 发送消息 -->
  106.     <div class="message-send">
  107.         <div class="message-input-area" contenteditable="true">
  109.         </div>
  110.         <div class="btn-area">
  111.             <span class="layui-btn layui-btn-success" onclick="send()">发送</span>
  112.         </div>
  113.     </div>
  114. </body>
  115. <script>
  116.     layui.use(['layer'], function() {
  117.         layer = layui.layer;
  118.         $ = layui.jquery;
  119.     });
  121.     // 假设服务端ip为127.0.0.1
  122.     ws = new WebSocket("ws://127.0.0.1:2000");
  123.     /* 当客户端连通服务器端的时候 */
  124.     ws.onopen = function() {
  125.         // 当客户端连通服务端时, 把当前客户端的用户标识(客户/客服)发给服务端
  126.         var data = {};
  127.         // js对象的属性可以自定义. type: login, 标识用户行为为声明登录；type: msg, 标识用户行为为发送消息。
  128.         data.type = 'login';
  129.         // 约定admin代表登录的用户是客服
  130.         data.group = 'admin';
  131.         // 发送JSON格式的数据
  132.         ws.send(JSON.stringify(data));
  133.     };
  134.     ws.onmessage = function(e) {
  135.         var data = JSON.parse(e.data);
  136.         // alert("收到服务端的消息：" + e.data);
  137.         var str = "<div class='msg-box-friend'>"+data.from_id+"说: "+data.msg+"</div>";
  138.         $(str).appendTo('.message-list');
  140.         // 系统发来的消息, 表示有新客户接入, 并分配到当前客服小姐姐
  141.         if(data.from_id == 'system' && data.type == 'login') {
  142.             var customer = '<div class="customer-item" data-id="'+data.custom_id+'" onclick="talkTo(this)">客户'+data.custom_id+'</div>';
  143.             $(customer).appendTo('.customer-list');
  144.         } else if(data.from_id == 'system' && data.type == 'logout') {
  145.             $('.customer-item[data-id="'+data.custom_id+'"]').remove();
  146.         }
  147.     };
  149.     function talkTo(ele) {
  150.         $(ele).siblings().removeClass('active');
  151.         $(ele).addClass('active');
  152.     }
  154.     function send() {
  155.         var str = "<div class='msg-box-me'>我说: "+$('.message-input-area').html()+"</div>";
  156.         var data = {};
  157.         // 标识此次发送的数据是发送消息
  158.         data.type='msg';
  159.         // 标识是从客服端发的
  160.         data.group = 'admin'
  161.         // 获取当前选中的客户
  162.         var customer_id = $('div[class*=active]').data('id');
  163.         if(isNaN(customer_id)) {
  164.             return layer.alert('请先选中一个客户, 再发送消息.');
  165.         }
  166.         data.sendId = customer_id;
  167.         // 要发送的消息
  168.         data.msg = $('.message-input-area').html();
  169.         $(str).appendTo('.message-list');
  170.         // 转成json字符串发送。
  171.         ws.send(JSON.stringify(data));
  172.         $('.message-input-area').html('');
  173.     }
  174. </script>
  175. </html>
  • 路由, 略.
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