Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel--IM即时通讯系统--页面美化
Blogger Information
Blog 64
fans 6
comment 2
visits 82992
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
1294 people have browsed it

学习总结

1.在workerman框架中判断某个连接是否掉线，需要添加onclose()方法。

2.在服务端如果客户登录，则新建一个消息列表给该客户，存放此客户和客服的聊天记录，并且模拟点击一下。

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.     // echo $connection->getRemoteIp(); 获取当前连接的ip
  24.     //登录
  25.     if($data['type']==='login'){
  26.         //无论是客户还是客服人员在登录的时候，都需要把连接注册在大数组中
  27.         $connection->from_id = $connection->id;
  29.         //如果是客户登录，则把连接数据放在$m_list数组中
  30.         if($data['group']==='member'){
  31.             $m_list[$connection->id] = $connection;
  32.             $data['from_id'] = $connection->from_id;
  33.             if($a_list):
  34.                 $index = array_rand($a_list);
  35.                 $a_list[$index]->to_id = $m_list[$connection->id]->from_id;
  36.                 $m_list[$connection->id]->to_id = $a_list[$index]->from_id;
  37.                 $res['code'] = 0;
  38.                 $res['msg'] = '连接成功';
  39.                 $res['type'] = 'login';
  40.                 $res['id'] = $m_list[$connection->id]->from_id;
  41.                 $a_list[$index]->send(json_encode($res));
  42.                 $res['id'] = $a_list[$index]->from_id;
  43.                 $m_list[$connection->id]->send(json_encode($res));
  44.             else:
  45.                 $connection->send(json_encode(['code'=>1,'msg'=>'没有客服在线，请稍候']));
  46.             endif;
  47.         }          
  49.         //如果是客服登录，就把客服登录链接放在$a_list数组中
  50.         if($data['group']==='admin'){
  51.             $a_list[$connection->id] = $connection;
  52.         }
  53.     }
  55.     //发送信息
  56.     if($data['type']==='msg')
  57.     {
  58.         $res =['code'=>0,'msg'=>$data['msg'],'type'=>'msg','id'=>$connection->id];
  59.         if($data['group']==='member'){
  60.             $a_list[$data['to_id']]->send(json_encode($res));
  61.         }
  62.         if($data['group']==='admin'){
  63.             $m_list[$data['to_id']]->send(json_encode($res));
  64.         }
  65.     }
  68.     //$connection->send(json_encode($data));
  69. };
  71. $ws_worker->onClose = function($connection)
  72. {
  73.     global $m_list;
  74.     global $a_list;
  75.     $index = $connection->id;
  77.     //客户掉线
  78.     if(array_key_exists($index,$m_list)){
  79.         // echo '客户'.$index.'掉线了！';
  80.         if(isset($m_list[$index]->to_id))
  81.         {
  82.             $to_id = $m_list[$index]->to_id; //to_id是在和哪个客服通信
  83.             $res = [];
  84.             $res['code'] = 0;
  85.             $res['msg'] = '客户掉线';
  86.             $res['type'] = 'logout';
  87.             $res['id'] = $index;
  88.             $a_list[$to_id]->send(json_encode($res));//通知客服人员该客户掉线了
  89.         }
  90.         unset($m_list[$index]);//从客户大数组中删除该客户
  91.         $m_list = array_filter($m_list);//清除大数组中的空值
  92.         // print_r($m_list);
  93.     }
  95.     //客服掉线
  96.     if(array_key_exists($index,$a_list)){//判断数组中是否存在$index这个key
  97.         echo '客服'.$index.'掉线了！';
  98.         unset($a_list[$index]);//删除键名为$index这个key的键和值，位置保存
  99.         $a_list = array_filter($a_list); //把数组值为空的去掉
  100.         print_r($a_list);
  101.     }
  103. };
  105. // 运行worker
  106. Worker::runAll();
  108. ?>

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>客户服务</title>
  11.     <style>
  12.         .main{
  13.             width: 600px;
  14.             height: 450px;
  15.             margin: 20px;
  16.             box-sizing: border-box;
  17.             border: 1px solid #c2c2c2;
  18.             display: flex;
  19.             flex-flow: row nowrap;
  20.         }
  21.         .main>.member{
  22.             width: 30%;
  23.             padding: 10px 10px;
  24.             border-right: 1px solid #c2c2c2;
  25.         }
  26.         /* 客户列表 */
  27.         .main>.member>.m_item{
  28.             height: 20px;
  29.             padding: 5px 5px;
  30.             margin-bottom: 5px;
  31.             background-color: #f1f1f1;
  32.             border-radius: 5px;
  33.             border: 1px solid #cdcdcd;
  34.             text-align: center;
  36.         }
  37.         /* 客户列表被点击 */
  38.         .main>.member>.m_item.active{
  39.             background-color: #3FADFF;
  40.             color: white;
  41.         }
  42.         .main>.member>div:hover{
  43.             background-color: #3FADFF;
  44.             cursor: pointer;
  45.         }
  46.         .main>.admin{
  47.             width: 70%;
  48.             display: flex;
  49.             flex-flow: column nowrap;
  50.         }
  51.         /* 客服消息列表 */
  52.         .main>.admin>.msg_list{
  53.             padding: 10px 10px;
  54.             height: 65%;
  55.             border-bottom: 1px solid #c2c2c2;
  56.         }
  57.         /* 客户发来的消息 */
  58.         .main>.admin>.msg_list .msg_item{
  59.             text-align: left;
  60.             background-color: #f1f1f1;
  61.             border-radius: 5px;
  62.             height: 25px;
  63.             margin: 5px 5px;
  64.             padding: 5px 5px;
  66.         }
  67.         /* 客服自己的消息 */
  68.         .main>.admin>.msg_list .msg_item.me{
  69.             text-align: right;
  70.             background-color: lightgreen;
  71.         }
  72.         /* 客服消息输入框 */
  73.         .main>.admin>.msg_input{
  74.             padding: 10px 10px;
  75.             height: 35%;
  76.             overflow: auto;
  77.         }
  78.         /* 客服消息发送按钮 */
  79.         .main>.admin>.btn_send>button{
  80.             margin-left: 84%;
  81.             margin-bottom: 5px;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87.     <div class="main">
  88.         <div class="member">
  89.             {{-- 客户列表 --}}
  90.             {{-- <div class="m_item active" m_id="2" onclick="back(2)">客户2</div>
  91.             <div class="m_item" m_id="3" onclick="back(3)">客户3</div> --}}
  92.         </div>
  93.         <div class="admin">
  94.             <div class="msg_list">
  95.                 {{-- 消息列表 --}}
  96.                 {{-- <div msg_list_id='2'>
  97.                     <div class="msg_item me">我说：您好</div>
  98.                     <div class="msg_item">客户2说：华为手机多少钱？</div>
  99.                     <div class="msg_item me">我说：您好</div>
  100.                     <div class="msg_item">客户2说：华为手机多少钱？</div>
  101.                 </div>
  102.                 <div msg_list_id='3'>
  103.                     <div class="msg_item me">我说：您好</div>
  104.                     <div class="msg_item">客户3说：华为手机多少钱？</div>
  105.                     <div class="msg_item me">我说：您好</div>
  106.                     <div class="msg_item">客户3说：华为手机多少钱？</div>
  107.                 </div> --}}
  108.             </div>
  109.             <div class="msg_input" contenteditable="true">
  110.                 {{-- 消息输入框 --}}
  111.             </div>
  112.             <div class="btn_send">
  113.                 <button class="layui-btn layui-btn-normal" type="button" onclick="send()">发送</button>
  114.             </div>
  115.         </div>
  116.     </div>
  117. </body>
  118. </html>
  119. <script>
  121.     layui.use(['layer'],function(){
  122.         layer = layui.layer;
  123.         $ = layui.jquery;
  125.         // 假设服务端ip为127.0.0.1
  126.         ws = new WebSocket("ws://127.0.0.1:2001");
  127.         data = {};
  128.         data.type = 'login';//当前是登录操作
  129.         data.group='admin';//角色是客服
  130.         ws.onopen = function() {
  131.                     ws.send(JSON.stringify(data));
  132.                 };
  134.         ws.onmessage = function(e) {
  135.                 res = JSON.parse(e.data);
  136.                 console.log(res);
  137.                 if(res.code>0)
  138.                 {
  139.                     alert(res.msg);
  140.                 }
  141.                 else
  142.                 {
  143.                     to_id = res.id;
  144.                     switch (res.type)
  145.                     {
  146.                         case 'login':
  147.                             //在客户列表中添加对应的客户
  148.                             html = '<div class="m_item" m_id='+res.id+' onclick="back('+res.id+')">客户'+res.id+'</div>';
  149.                             $('.member').append(html); 
  150.                              //客户登录时添加这个客户的消息列表div
  151.                             $('.msg_list').append('<div msg_list_id="'+res.id+'"></div>');
  152.                             //点击事件
  153.                             back(res.id);
  154.                         break;
  155.                             //客户发来消息
  156.                         case 'msg':
  157.                             html = '<div class="msg_item">'+res.msg+'</div>';
  158.                             //哪个客户发来的的消息，添加到对应的消息列表div中
  159.                             $('div[msg_list_id="'+res.id+'"]').append(html);
  160.                         break;
  161.                         case 'logout':
  162.                             //在客户列表中删除对应的客户
  163.                             $('.m_item[m_id="'+res.id+'"]').remove();
  164.                         break;
  165.                         default:
  166.                             alert(res.msg);
  167.                     }                   
  168.                 }
  169.                 };
  172.     });
  174.     function back(id)
  175.     {
  176.         to_id = id;
  177.         //给当前点击的客户添加active样式，其它的客户取消active样式
  178.         $('.m_item[m_id="'+id+'"]').addClass('active').siblings().removeClass('active');
  179.         //点击哪个客户，显示和哪个客户的聊天信息
  180.         $('div[msg_list_id="'+id+'"]').show().siblings().hide();//显示点击客户的聊天记录
  181.     }
  183.     // //客服向客户发送消息
  184.     function send()
  185.     {   
  186.         data['type'] = 'msg';
  187.         data['group'] = 'admin';
  188.         data['msg'] =$('.msg_input').text();
  189.         data['to_id'] =to_id;
  190.         ws.send(JSON.stringify(data));
  191.         html = '<div class="msg_item me">'+$('.msg_input').text()+'</div>';
  192.         //是发给哪个客户的消息，添加到对应的消息列表div中
  193.         $('div[msg_list_id="'+to_id+'"]').append(html); 
  194.         $('.msg_input').text('');
  195.     }
  196.     </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>百度商桥IM通讯</title>
  11.     <style>
  12.         .msg{
  13.             margin:10px 10px;
  14.             height: 95vh;
  15.         }
  16.         .msg>.list{
  17.             padding: 10px;
  18.             border: 1px solid #c2c2c2;
  19.             border-radius: 5px;
  20.             height: 70%;
  21.             margin-bottom: 10px;
  22.         }
  24.         /* 客服发来的消息 */
  25.         .msg>.list>.item{
  26.             text-align: left;
  27.             background-color: #f1f1f1;
  28.             border-radius: 5px;
  29.             height: 25px;
  30.             margin: 5px 5px;
  31.             padding: 5px 5px;
  32.         }
  33.         /* 客户自己发送的消息 */
  34.         .msg>.list>.item.me{
  35.             text-align: right;
  36.             background-color: lightgreen;
  37.         }
  38.         /* 消息输入框 */
  39.         .msg>.msg_input>{
  40.             height: 30%;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="msg">
  46.         <div class="list">
  47.             {{-- <div class="item me">您好，华为手机多少钱？</div>
  48.             <div class="item">1988元</div> --}}
  49.         </div>
  50.         <div class="msg_input">
  51.             <textarea class="layui-textarea" name="msg"></textarea>
  52.         </div>
  53.     </div>
  54. </body>
  55. </html>
  56. <script>
  58. layui.use(['layer'],function(){
  59.     layer = layui.layer;
  60.     $ = layui.jquery;
  62.     // 假设服务端ip为127.0.0.1
  63.     ws = new WebSocket("ws://127.0.0.1:2001");
  64.     data = {};
  65.     data.type = 'login';//当前是登录操作
  66.     data.group='member';//角色是客户
  67.     ws.onopen = function() {
  68.                 ws.send(JSON.stringify(data));
  69.             };
  71.     ws.onmessage = function(e) {
  72.             res = JSON.parse(e.data);
  73.             console.log(res);
  74.             if(res.code>0)
  75.             {
  76.                 alert(res.msg);
  77.             }
  78.             else
  79.             {
  80.                 switch (res.type)
  81.                     {
  82.                         case 'login':
  83.                             html = '<div class="item">您好，客服'+res.id+'为您服务...</div>'; 
  84.                         break;
  85.                         case 'msg':
  86.                             html = '<div class="item">客服'+res.id+': '+res.msg+'</div>'; 
  87.                         break;
  88.                         default:
  89.                     }
  91.                 to_id = res.id;//记录是哪个客服为我服务
  92.                 $('.list').append(html);
  93.             }
  94.             };
  95. });
  97. // //客户向服务器的客服人员发送消息
  98. function send()
  99. {   
  100.     data['type'] = 'msg';
  101.     data['group'] = 'member';
  102.     data['msg'] =$('textarea[name="msg"]').val();
  103.     data['to_id'] =to_id;
  104.     ws.send(JSON.stringify(data));
  105.     html = '<div class="item me">'+$('textarea[name="msg"]').val()+'</div>'; 
  106.     $('.list').append(html);
  107.     $('textarea[name="msg"]').val('');
  109. }
  110. </script>

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