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

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

程序员文章站 2022-05-16 21:45:27
...

学习总结

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

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

1.workerman中的websocket通讯ws_test.php

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

2.客户端index.blade.php

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

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

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

3.服务器端index.blade.php

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

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