search

博客列表 >laravel--IM即时通讯--客服与客户一对一通讯

laravel--IM即时通讯--客服与客户一对一通讯

王娇
王娇原创
2020年06月28日 18:31:422230浏览

学习总结

1.启动websocket通讯需要在命令行输入php ws_test.php start启动通讯

2.ws_test.php中每个连接都分配一个id,通过连接发送的字符串标识判断是客户端还是服务端发送的请求。

1.workerman中的websocket通讯ws_test.php

  2. <?php
  3. use Workerman\Worker;
  4. require_once __DIR__ . '/../Workerman/Autoloader.php';
  6. /// 注意：这里与上个例子不同，使用的是websocket协议
  7. $ws_worker = new Worker("websocket://0.0.0.0:2001");
  9. // 启动4个进程对外提供服务
  10. $ws_worker->count = 4;
  12. //连接信息定义为全局变量
  13. $m_list = []; //客户连接信息
  14. $a_list = [];//客服人员连接信息
  16. // 当收到客户端发来的数据后返回hello $data给客户端
  17. $ws_worker->onMessage = function($connection, $data)
  18. {
  19.     global $m_list;
  20.     global $a_list;
  21.     $data = json_decode($data,true);
  22.     print_r($data);
  23.     //登录
  24.     if($data['type']==='login'){
  25.         //无论是客户还是客服人员在登录的时候，都需要把连接注册在大数组中
  26.         $connection->from_id = $connection->id;
  28.         //如果是客户登录，则把连接数据放在$m_list数组中
  29.         if($data['group']==='member'){
  30.             $m_list[$connection->id] = $connection;
  31.             $data['from_id'] = $connection->from_id;
  32.             if($a_list):
  33.                 $index = array_rand($a_list);
  34.                 $a_list[$index]->to_id = $m_list[$connection->id]->from_id;
  35.                 $m_list[$connection->id]->to_id = $a_list[$index]->from_id;
  36.                 $res['code'] = 0;
  37.                 $res['msg'] = '连接成功';
  38.                 $res['type'] = 'login';
  39.                 $res['id'] = $m_list[$connection->id]->from_id;
  40.                 $a_list[$index]->send(json_encode($res));
  41.                 $res['id'] = $a_list[$index]->from_id;
  42.                 $m_list[$connection->id]->send(json_encode($res));
  43.             else:
  44.                 $connection->send(json_encode(['code'=>1,'msg'=>'没有客服在线，请稍候']));
  45.             endif;
  46.         }          
  48.         //如果是客服登录，就把客服登录链接放在$a_list数组中
  49.         if($data['group']==='admin'){
  50.             $a_list[$connection->id] = $connection;
  51.         }
  52.     }
  54.     //发送信息
  55.     if($data['type']==='msg')
  56.     {
  57.         $res =['code'=>0,'msg'=>$data['msg'],'type'=>'msg','id'=>$connection->id];
  58.         if($data['group']==='member'){
  59.             $a_list[$data['to_id']]->send(json_encode($res));
  60.         }
  61.         if($data['group']==='admin'){
  62.             $m_list[$data['to_id']]->send(json_encode($res));
  63.         }
  64.     }
  67.     //$connection->send(json_encode($data));
  68. };
  70. // 运行worker
  71. Worker::runAll();
  73. ?>

2.客户端index.blade.php

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  8.     <script src="/static/plugins/layui/layui.js"></script>
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>百度商桥IM通讯</title>
  11.     <style>
  12.         .msg{
  13.             margin:10px 10px;
  14.             height: 95vh;
  15.         }
  16.         .msg>.list{
  17.             padding: 10px;
  18.             border: 1px solid #E6E6E6;
  19.             border-radius: 5px;
  20.             height: 70%;
  21.             margin-bottom: 10px;
  22.         }
  23.         .msg>.item>{
  24.             height: 30%;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="msg">
  30.         <div class="list">
  31.         </div>
  32.         <div class="item">
  33.             <textarea class="layui-textarea" name="msg"></textarea>
  34.         </div>
  35.     </div>
  36. </body>
  37. </html>
  38. <script>
  40. layui.use(['layer'],function(){
  41.     layer = layui.layer;
  42.     $ = layui.jquery;
  44.     // 假设服务端ip为127.0.0.1
  45.     ws = new WebSocket("ws://127.0.0.1:2001");
  46.     data = {};
  47.     data.type = 'login';//当前是登录操作
  48.     data.group='member';//角色是客户
  49.     ws.onopen = function() {
  50.                 ws.send(JSON.stringify(data));
  51.             };
  53.     ws.onmessage = function(e) {
  54.             res = JSON.parse(e.data);
  55.             console.log(res);
  56.             if(res.code>0)
  57.             {
  58.                 alert(res.msg);
  59.             }
  60.             else
  61.             {
  62.                 if(res.type=='login')
  63.                 {
  64.                     html = '<div class="item">客服'+res.id+'为您服务...</div>'; 
  65.                 }
  66.                 else
  67.                 {
  68.                     html = '<div class="item">客服'+res.id+': '+res.msg+'</div>'; 
  69.                 }
  71.                 to_id = res.id;//记录是哪个客服为我服务
  72.                 $('.list').append(html);
  73.             }
  74.             };
  75. });
  77. // //客户向服务器的客服人员发送消息
  78. function send()
  79. {   
  80.     data['type'] = 'msg';
  81.     data['group'] = 'member';
  82.     data['msg'] =$('textarea[name="msg"]').val();
  83.     data['to_id'] =to_id;
  84.     ws.send(JSON.stringify(data));
  85.     html = '<div class="item">我：'+$('textarea[name="msg"]').val()+'</div>'; 
  86.     $('.list').append(html);
  87.     $('textarea[name="msg"]').val('');
  89. }
  90. </script>

3.服务器端index.blade.php

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  8.     <script src="/static/plugins/layui/layui.js"></script>
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>客户服务</title>
  11.     <style>
  12.         .main{
  13.             width: 600px;
  14.             height: 450px;
  15.             margin: 20px;
  16.             box-sizing: border-box;
  17.             border: 1px solid #e1e1e1;
  18.             display: flex;
  19.             flex-flow: row nowrap;
  20.         }
  21.         .main>.member{
  22.             width: 30%;
  23.             padding: 10px 10px;
  24.             border-right: 1px solid #e1e1e1;
  25.         }
  26.         .main>.member>div{
  27.             background-color: #fff;
  28.         }
  29.         .main>.member>div:hover{
  30.             background-color: #009688;
  31.             cursor: pointer;
  32.         }
  33.         .main>.admin{
  34.             width: 70%;
  35.             display: flex;
  36.             flex-flow: column nowrap;
  37.         }
  38.         .main>.admin>.msg_list{
  39.             padding: 10px 10px;
  40.             height: 65%;
  41.             border-bottom: 1px solid #e1e1e1;
  42.         }
  43.         .main>.admin>.msg_input{
  44.             padding: 10px 10px;
  45.             height: 35%;
  46.             overflow: auto;
  47.         }
  48.         .main>.admin>.btn_send>button{
  49.             margin-left: 84%;
  50.             margin-bottom: 5px;
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="main">
  57.         <div class="member">
  58.         </div>
  59.         <div class="admin">
  60.             <div class="msg_list"></div>
  61.             <div class="msg_input" contenteditable="true">
  62.             </div>
  63.             <div class="btn_send">
  64.                 <button class="layui-btn layui-btn-normal" type="button" onclick="send()">发送</button>
  65.             </div>
  66.         </div>
  67.     </div>
  68. </body>
  69. </html>
  70. <script>
  72.     layui.use(['layer'],function(){
  73.         layer = layui.layer;
  74.         $ = layui.jquery;
  76.         // 假设服务端ip为127.0.0.1
  77.         ws = new WebSocket("ws://127.0.0.1:2001");
  78.         data = {};
  79.         data.type = 'login';//当前是登录操作
  80.         data.group='admin';//角色是客服
  81.         ws.onopen = function() {
  82.                     ws.send(JSON.stringify(data));
  83.                 };
  85.         ws.onmessage = function(e) {
  86.                 res = JSON.parse(e.data);
  87.                 console.log(res);
  88.                 if(res.code>0)
  89.                 {
  90.                     alert(res.msg);
  91.                 }
  92.                 else
  93.                 {
  94.                     to_id = res.id;
  95.                     if(res.type == 'login'){
  96.                         html = '<div  onclick="back('+res.id+')">客户'+res.id+'</div>';
  97.                         $('.member').append(html); 
  98.                     }
  99.                     else{
  100.                         html = '<div>客户'+res.id+':'+res.msg+'</div>';
  101.                         $('.msg_list').append(html); 
  102.                     }
  104.                 }
  105.                 };
  108.     });
  110.     function back(id)
  111.     {
  112.         to_id = id;
  114.     }
  116.     // //客服向客户发送消息
  117.     function send()
  118.     {   
  119.         data['type'] = 'msg';
  120.         data['group'] = 'admin';
  121.         data['msg'] =$('.msg_input').text();
  122.         data['to_id'] =to_id;
  123.         ws.send(JSON.stringify(data));
  124.         html = '<div>我：@客户'+to_id+'@'+$('.msg_input').text()+'</div>';
  125.         $('.msg_list').append(html); 
  126.         $('.msg_input').text('');
  127.     }
  128.     </script>

上一条：FlexBox 弹性盒下一条：用flex弹性盒子仿一个淘宝手机端练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多