欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-25 09:09:37
...

学习总结

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

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

1.workerman中的websocket通讯ws_test.php

    

    2. 

  2. <?php
    3. 

  3. use Workerman\Worker;
    4. 

  4. require_once __DIR__ . '/../Workerman/Autoloader.php';
    5. 

    6. 

  6. /// 注意：这里与上个例子不同，使用的是websocket协议
    7. 

  7. $ws_worker = new Worker("websocket://0.0.0.0:2001");
    8. 

    9. 

  9. // 启动4个进程对外提供服务
    10. 

  10. $ws_worker->count = 4;
    11. 

    12. 

  12. //连接信息定义为全局变量
    13. 

  13. $m_list = []; //客户连接信息
    14. 

  14. $a_list = [];//客服人员连接信息
    15. 

    16. 

  16. // 当收到客户端发来的数据后返回hello $data给客户端
    17. 

  17. $ws_worker->onMessage = function($connection, $data)
    18. 

  18. {
    19. 

  19.     global $m_list;
    20. 

  20.     global $a_list;
    21. 

  21.     $data = json_decode($data,true);
    22. 

  22.     print_r($data);
    23. 

  23.     //登录
    24. 

  24.     if($data['type']==='login'){
    25. 

  25.         //无论是客户还是客服人员在登录的时候，都需要把连接注册在大数组中
    26. 

  26.         $connection->from_id = $connection->id;
    27. 

    28. 

  28.         //如果是客户登录，则把连接数据放在$m_list数组中
    29. 

  29.         if($data['group']==='member'){
    30. 

  30.             $m_list[$connection->id] = $connection;
    31. 

  31.             $data['from_id'] = $connection->from_id;
    32. 

  32.             if($a_list):
    33. 

  33.                 $index = array_rand($a_list);
    34. 

  34.                 $a_list[$index]->to_id = $m_list[$connection->id]->from_id;
    35. 

  35.                 $m_list[$connection->id]->to_id = $a_list[$index]->from_id;
    36. 

  36.                 $res['code'] = 0;
    37. 

  37.                 $res['msg'] = '连接成功';
    38. 

  38.                 $res['type'] = 'login';
    39. 

  39.                 $res['id'] = $m_list[$connection->id]->from_id;
    40. 

  40.                 $a_list[$index]->send(json_encode($res));
    41. 

  41.                 $res['id'] = $a_list[$index]->from_id;
    42. 

  42.                 $m_list[$connection->id]->send(json_encode($res));
    43. 

  43.             else:
    44. 

  44.                 $connection->send(json_encode(['code'=>1,'msg'=>'没有客服在线，请稍候']));
    45. 

  45.             endif;
    46. 

  46.         }          
    47. 

    48. 

  48.         //如果是客服登录，就把客服登录链接放在$a_list数组中
    49. 

  49.         if($data['group']==='admin'){
    50. 

  50.             $a_list[$connection->id] = $connection;
    51. 

  51.         }
    52. 

  52.     }
    53. 

    54. 

  54.     //发送信息
    55. 

  55.     if($data['type']==='msg')
    56. 

  56.     {
    57. 

  57.         $res =['code'=>0,'msg'=>$data['msg'],'type'=>'msg','id'=>$connection->id];
    58. 

  58.         if($data['group']==='member'){
    59. 

  59.             $a_list[$data['to_id']]->send(json_encode($res));
    60. 

  60.         }
    61. 

  61.         if($data['group']==='admin'){
    62. 

  62.             $m_list[$data['to_id']]->send(json_encode($res));
    63. 

  63.         }
    64. 

  64.     }
    65. 

    66. 

    67. 

  67.     //$connection->send(json_encode($data));
    68. 

  68. };
    69. 

    70. 

  70. // 运行worker
    71. 

  71. Worker::runAll();
    72. 

    73. 

  73. ?>
    74.

2.客户端index.blade.php

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    8. 

  8.     <script src="/static/plugins/layui/layui.js"></script>
    9. 

  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    10. 

  10.     <title>百度商桥IM通讯</title>
    11. 

  11.     <style>
    12. 

  12.         .msg{
    13. 

  13.             margin:10px 10px;
    14. 

  14.             height: 95vh;
    15. 

  15.         }
    16. 

  16.         .msg>.list{
    17. 

  17.             padding: 10px;
    18. 

  18.             border: 1px solid #E6E6E6;
    19. 

  19.             border-radius: 5px;
    20. 

  20.             height: 70%;
    21. 

  21.             margin-bottom: 10px;
    22. 

  22.         }
    23. 

  23.         .msg>.item>{
    24. 

  24.             height: 30%;
    25. 

  25.         }
    26. 

  26.     </style>
    27. 

  27. </head>
    28. 

  28. <body>
    29. 

  29.     <div class="msg">
    30. 

  30.         <div class="list">
    31. 

  31.         </div>
    32. 

  32.         <div class="item">
    33. 

  33.             <textarea class="layui-textarea" name="msg"></textarea>
    34. 

  34.         </div>
    35. 

  35.     </div>
    36. 

  36. </body>
    37. 

  37. </html>
    38. 

  38. <script>
    39. 

    40. 

  40. layui.use(['layer'],function(){
    41. 

  41.     layer = layui.layer;
    42. 

  42.     $ = layui.jquery;
    43. 

    44. 

  44.     // 假设服务端ip为127.0.0.1
    45. 

  45.     ws = new WebSocket("ws://127.0.0.1:2001");
    46. 

  46.     data = {};
    47. 

  47.     data.type = 'login';//当前是登录操作
    48. 

  48.     data.group='member';//角色是客户
    49. 

  49.     ws.onopen = function() {
    50. 

  50.                 ws.send(JSON.stringify(data));
    51. 

  51.             };
    52. 

    53. 

  53.     ws.onmessage = function(e) {
    54. 

  54.             res = JSON.parse(e.data);
    55. 

  55.             console.log(res);
    56. 

  56.             if(res.code>0)
    57. 

  57.             {
    58. 

  58.                 alert(res.msg);
    59. 

  59.             }
    60. 

  60.             else
    61. 

  61.             {
    62. 

  62.                 if(res.type=='login')
    63. 

  63.                 {
    64. 

  64.                     html = '<div class="item">客服'+res.id+'为您服务...</div>'; 
    65. 

  65.                 }
    66. 

  66.                 else
    67. 

  67.                 {
    68. 

  68.                     html = '<div class="item">客服'+res.id+': '+res.msg+'</div>'; 
    69. 

  69.                 }
    70. 

    71. 

  71.                 to_id = res.id;//记录是哪个客服为我服务
    72. 

  72.                 $('.list').append(html);
    73. 

  73.             }
    74. 

  74.             };
    75. 

  75. });
    76. 

    77. 

  77. // //客户向服务器的客服人员发送消息
    78. 

  78. function send()
    79. 

  79. {   
    80. 

  80.     data['type'] = 'msg';
    81. 

  81.     data['group'] = 'member';
    82. 

  82.     data['msg'] =$('textarea[name="msg"]').val();
    83. 

  83.     data['to_id'] =to_id;
    84. 

  84.     ws.send(JSON.stringify(data));
    85. 

  85.     html = '<div class="item">我：'+$('textarea[name="msg"]').val()+'</div>'; 
    86. 

  86.     $('.list').append(html);
    87. 

  87.     $('textarea[name="msg"]').val('');
    88. 

    89. 

  89. }
    90. 

  90. </script>
    91.

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

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

3.服务器端index.blade.php

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    8. 

  8.     <script src="/static/plugins/layui/layui.js"></script>
    9. 

  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    10. 

  10.     <title>客户服务</title>
    11. 

  11.     <style>
    12. 

  12.         .main{
    13. 

  13.             width: 600px;
    14. 

  14.             height: 450px;
    15. 

  15.             margin: 20px;
    16. 

  16.             box-sizing: border-box;
    17. 

  17.             border: 1px solid #e1e1e1;
    18. 

  18.             display: flex;
    19. 

  19.             flex-flow: row nowrap;
    20. 

  20.         }
    21. 

  21.         .main>.member{
    22. 

  22.             width: 30%;
    23. 

  23.             padding: 10px 10px;
    24. 

  24.             border-right: 1px solid #e1e1e1;
    25. 

  25.         }
    26. 

  26.         .main>.member>div{
    27. 

  27.             background-color: #fff;
    28. 

  28.         }
    29. 

  29.         .main>.member>div:hover{
    30. 

  30.             background-color: #009688;
    31. 

  31.             cursor: pointer;
    32. 

  32.         }
    33. 

  33.         .main>.admin{
    34. 

  34.             width: 70%;
    35. 

  35.             display: flex;
    36. 

  36.             flex-flow: column nowrap;
    37. 

  37.         }
    38. 

  38.         .main>.admin>.msg_list{
    39. 

  39.             padding: 10px 10px;
    40. 

  40.             height: 65%;
    41. 

  41.             border-bottom: 1px solid #e1e1e1;
    42. 

  42.         }
    43. 

  43.         .main>.admin>.msg_input{
    44. 

  44.             padding: 10px 10px;
    45. 

  45.             height: 35%;
    46. 

  46.             overflow: auto;
    47. 

  47.         }
    48. 

  48.         .main>.admin>.btn_send>button{
    49. 

  49.             margin-left: 84%;
    50. 

  50.             margin-bottom: 5px;
    51. 

    52. 

  52.         }
    53. 

  53.     </style>
    54. 

  54. </head>
    55. 

  55. <body>
    56. 

  56.     <div class="main">
    57. 

  57.         <div class="member">
    58. 

  58.         </div>
    59. 

  59.         <div class="admin">
    60. 

  60.             <div class="msg_list"></div>
    61. 

  61.             <div class="msg_input" contenteditable="true">
    62. 

  62.             </div>
    63. 

  63.             <div class="btn_send">
    64. 

  64.                 <button class="layui-btn layui-btn-normal" type="button" onclick="send()">发送</button>
    65. 

  65.             </div>
    66. 

  66.         </div>
    67. 

  67.     </div>
    68. 

  68. </body>
    69. 

  69. </html>
    70. 

  70. <script>
    71. 

    72. 

  72.     layui.use(['layer'],function(){
    73. 

  73.         layer = layui.layer;
    74. 

  74.         $ = layui.jquery;
    75. 

    76. 

  76.         // 假设服务端ip为127.0.0.1
    77. 

  77.         ws = new WebSocket("ws://127.0.0.1:2001");
    78. 

  78.         data = {};
    79. 

  79.         data.type = 'login';//当前是登录操作
    80. 

  80.         data.group='admin';//角色是客服
    81. 

  81.         ws.onopen = function() {
    82. 

  82.                     ws.send(JSON.stringify(data));
    83. 

  83.                 };
    84. 

    85. 

  85.         ws.onmessage = function(e) {
    86. 

  86.                 res = JSON.parse(e.data);
    87. 

  87.                 console.log(res);
    88. 

  88.                 if(res.code>0)
    89. 

  89.                 {
    90. 

  90.                     alert(res.msg);
    91. 

  91.                 }
    92. 

  92.                 else
    93. 

  93.                 {
    94. 

  94.                     to_id = res.id;
    95. 

  95.                     if(res.type == 'login'){
    96. 

  96.                         html = '<div  onclick="back('+res.id+')">客户'+res.id+'</div>';
    97. 

  97.                         $('.member').append(html); 
    98. 

  98.                     }
    99. 

  99.                     else{
    100. 

  100.                         html = '<div>客户'+res.id+':'+res.msg+'</div>';
    101. 

  101.                         $('.msg_list').append(html); 
    102. 

  102.                     }
    103. 

    104. 

  104.                 }
    105. 

  105.                 };
    106. 

    107. 

    108. 

  108.     });
    109. 

    110. 

  110.     function back(id)
    111. 

  111.     {
    112. 

  112.         to_id = id;
    113. 

    114. 

  114.     }
    115. 

    116. 

  116.     // //客服向客户发送消息
    117. 

  117.     function send()
    118. 

  118.     {   
    119. 

  119.         data['type'] = 'msg';
    120. 

  120.         data['group'] = 'admin';
    121. 

  121.         data['msg'] =$('.msg_input').text();
    122. 

  122.         data['to_id'] =to_id;
    123. 

  123.         ws.send(JSON.stringify(data));
    124. 

  124.         html = '<div>我：@客户'+to_id+'@'+$('.msg_input').text()+'</div>';
    125. 

  125.         $('.msg_list').append(html); 
    126. 

  126.         $('.msg_input').text('');
    127. 

  127.     }
    128. 

  128.     </script>
    129.

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

上一篇： html标签1（语义化标签，超链接，表单，表格，列表）

下一篇： CSS的Grid布局中的常用属性以及属性的常用值

推荐阅读