search

博客列表 >laravel--IM即时通讯系统--页面美化

laravel--IM即时通讯系统--页面美化

王娇
王娇原创
2020年06月30日 15:27:191293浏览

学习总结

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>

上一条：6月28号作业之仿php中文网首页入门精品课程模块下一条：win10宽带连接不上的解决方法【147下载站】
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多