Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel--IM即时通讯--客服与客户一对一通讯
Blogger Information
Blog 64
fans 6
comment 2
visits 82819
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
laravel--IM即时通讯--客服与客户一对一通讯
王娇
Original
2229 people have browsed it

学习总结

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>

Correcting teacher：天蓬老师天蓬老师

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