简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >workerman客服聊天系统

workerman客服聊天系统

大A
大A原创
2020年06月27日 22:54:472415浏览

介绍

随机分配客服,一个客服可同时与多人聊天.

源码

workerman.php

  1. <?php
  3. use Workerman\worker;
  5. require_once __DIR__ . '/Autoloader.php';
  7. $ws_worker = new Worker("websocket://0.0.0.0:2000");
  9. $ws_worker->count = 4;
  12. $ws_worker->onMessage = function ($connection, $data) {
  13.     global $ws_worker;
  14.     $adminlist = [];
  15.     $msg = json_decode($data);
  17.     switch ($msg->type) {
  18.         case 'login':
  19.             if ($msg->group === 'user') {
  20.                 $connection->group = 'user';
  21.                 foreach ($ws_worker->connections as  $value) {
  22.                     if ($value->group === 'admin')
  23.                         $adminlist[] = $value->id;
  24.                 }
  25.                 if (!$adminlist) {
  26.                     $edata = new stdClass();
  27.                     $edata->fid = $connection->id;
  28.                     $edata->msg = '没有客服在线';
  29.                     $edata->name = '系统提示';
  30.                     $connection->send(json_encode($edata));
  31.                     return;
  32.                 }
  33.                 $connection->toid = $ws_worker->connections[$adminlist[array_rand($adminlist, 1)]];
  34.             }
  35.             if ($msg->group === 'admin_user') {
  36.                 $connection->group = 'admin';
  37.             }
  38.             break;
  46.         case 'msg':
  47.             if ($msg->group === 'user') {
  48.                 $fdata = new stdClass();
  49.                 $fdata->fid = $connection->id;
  50.                 $fdata->msg = $msg->msg;
  51.                 $fdata->name = '客户' . $connection->id;
  53.           if (in_array ($connection->toid->id ,(array_column ((array) $ws_worker->connections,'id')))){
  55.             $connection->toid->send(json_encode($fdata));
  56.           }else{
  57.             $edata = new stdClass();
  58.             $edata->fid = $connection->id;
  59.             $edata->msg = '已与客服断开连接,请刷新后重试';
  60.             $edata->name = '系统提示';
  61.             $connection->send(json_encode($edata));
  62.             return;
  63.           }
  66.             }
  67.             if ($msg->group === 'admin_user') {
  68.                 if ($msg->toid != null) {
  69.                     $fdata = new stdClass();
  70.                     $fdata->fid = $connection->id;
  71.                     $fdata->msg = $msg->msg;
  72.                     $fdata->name = '客服' . $connection->id;
  73.                     $ws_worker->connections[$msg->toid]->send(json_encode($fdata));
  74.                 }
  75.             }
  76.             break;
  77.         default:
  78.             # code...
  79.             break;
  80.     }
  83.     // $connection->send('hello ' . $data);
  85. };
  87. // 运行worker
  88. Worker::runAll();

kehu.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .item {
  9.             margin: 10px;
  10.             margin-bottom: 10px;
  11.             padding-left: 5px;
  12.             padding-right: 5px;
  14.         }
  15.     </style>
  17.     <title>Document</title>
  18. </head>
  20. <body>
  21.     <div id="msg" style="width:100%;border: 1px solid;overflow-y:scroll;">
  22.     </div>
  23.     <div id="content" contenteditable="true" style="width:100%;margin-top: 2px;border: 1px solid;overflow-y:scroll;"></div>
  25. </body>
  26. <script>
  27.     window.onload = function() {
  28.         document.getElementById('msg').style.height = '65vh';
  29.         document.getElementById('content').style.height = '30vh';
  30.     }
  32.     function send() {
  33.         var text = document.getElementById('content').innerText;
  34.         data=new Object();
  35.         data.group='user';
  36.         data.type='msg';
  37.         data.msg=text;
  39.         ws.send(JSON.stringify(data));
  40.         document.getElementById('content').innerText = '';
  41.         add_msg(text);
  42.         var scrollTarget = document.getElementById("msg");
  43.         scrollTarget.scrollTop = scrollTarget.scrollHeight;
  44.     }
  47.     ws = new WebSocket("ws://php.edu:2000");
  48.     ws.onopen = function() {
  49.         console.log("连接成功");
  50.         data=new Object();
  51.         data.group='user';
  52.         data.type='login';
  53.         ws.send(JSON.stringify(data));
  54.     };
  55.     ws.onmessage = function(e) {
  56.         fdata = JSON.parse(e.data);
  57.         add_msg(fdata.msg, fdata.name);
  58.         var scrollTarget = document.getElementById("msg");
  59.         scrollTarget.scrollTop = scrollTarget.scrollHeight;
  60.     };
  63.     function add_msg(text, id) {
  64.         var item = document.createElement('item');
  65.         if (id == null) {
  66.             id = '我说';
  67.             style = 'style="display:flex;flex-direction: column;align-items: flex-end;"'
  68.         } else {
  69.             style = '';
  70.         }
  71.         r = '<div class="item" ' + style + '><div>' + id + '<span style="color: #f55;">' + '  ' + new Date().toLocaleTimeString('cn', {
  72.             hour12: false
  73.         }) + '</span></div> <div style="padding-left: 10px;">' + text + '</div></div>'
  74.         item.innerHTML = r;
  75.         document.getElementById('msg').append(item);
  76.     }
  77. </script>
  79. </html>

kefu.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .item {
  9.             margin: 10px;
  10.             margin-bottom: 10px;
  11.             padding-left: 5px;
  12.             padding-right: 5px;
  14.         }
  16.         .navid {
  17.             position: absolute;
  18.             height: 70.3vh;
  19.             width: 10vw;
  20.             border: 1px solid;
  21.             overflow-y: scroll;
  22.             left: 8.7vw;
  23.         }
  25.         .up {
  26.             position: absolute;
  27.             height: 50vh;
  28.             width: 80vw;
  29.             border: 1px solid;
  30.             overflow-y: scroll;
  31.             right: 1vw;
  32.         }
  34.         .hide {
  35.             display: none;
  36.         }
  38.         .down {
  39.             position: absolute;
  40.             top: 51vh;
  41.             width: 80vw;
  42.             height: 20vh;
  43.             margin-top: 2px;
  44.             border: 1px solid;
  45.             overflow-y: scroll;
  46.             right: 1vw;
  47.         }
  49.         .btn {
  50.             position: absolute;
  51.             top: 72vh;
  52.             right: 1vw;
  53.             width: 100px;
  54.             height: 30px;
  55.             margin-top: 0.3vh;
  56.         }
  58.         .kehuitem {
  59.             width: 98%;
  60.             height: 5vh;
  61.             border-bottom: 1px solid;
  62.             line-height: 5vh;
  63.             text-align: center;
  66.         }
  68.         .kehuitem:hover {
  69.             background-color: cornflowerblue;
  70.             cursor: default;
  71.         }
  73.     </style>
  75.     <title>Document</title>
  76. </head>
  78. <body>
  79.     <div class="navid" id="idlist">
  80.         {{-- <div class="kehuitem">客户5686</div> --}}
  81.     </div>
  83.     <div class="up" id="msg">
  84.     </div>
  86.     <div class="down" id="content" contenteditable="true"></div>
  87.     <input class="btn" type="button" value="发送" onclick="send()">
  89. </body>
  90. <script>
  91.     var toid;
  93.     function send() {
  94.         var text = document.getElementById('content').innerText;
  95.         data = new Object();
  96.         data.group = 'admin_user';
  97.         data.type = 'msg';
  98.         data.msg = text;
  100.         all_list = document.getElementsByClassName('up');
  101.         for (const key in all_list) {
  102.             if (all_list.hasOwnProperty(key)) {
  103.                 const element = all_list[key];
  105.                 if (element.style.display == 'block') {
  106.                     toid = element.getAttribute('toid');
  107.                     console.log(data.toid);
  109.                     break;
  110.                 }
  111.             }
  112.         }
  114.         if (toid == undefined) {
  115.             data.toid = null;
  116.         } else {
  117.             data.toid = toid;
  118.         }
  120.         ws.send(JSON.stringify(data));
  121.         document.getElementById('content').innerText = '';
  122.         add_msg(text);
  123.         var scrollTarget = document.getElementById("msg");
  124.         scrollTarget.scrollTop = scrollTarget.scrollHeight;
  125.     }
  128.     function add_msg(text, id) {
  129.         var item = document.createElement('div');
  130.         if (id == null) {
  131.             id = '我说';
  132.             style = 'style="display:flex;flex-direction: column;align-items: flex-end;"'
  133.         } else {
  134.             style = '';
  135.         }
  136.         r = '<div class="item" ' + style + '><div>' + id + '<span style="color: #f55;">' + '  ' + new Date()
  137.             .toLocaleTimeString('cn', {
  138.                 hour12: false
  139.             }) + '</span></div> <div style="padding-left: 10px;">' + text + '</div></div>'
  140.         item.innerHTML = r;
  142.         document.getElementById('msg').append(item);
  143.     }
  145.     ws = new WebSocket("ws://php.edu:2000");
  146.     ws.onopen = function () {
  147.         console.log("连接成功");
  148.         data = new Object();
  149.         data.group = 'admin_user';
  150.         data.type = 'login';
  152.         ws.send(JSON.stringify(data));
  153.     };
  154.     ws.onmessage = function (e) {
  155.         fdata = JSON.parse(e.data);
  156.         show_msg(fdata.name, fdata.fid, fdata.msg);
  157.         add_msg(fdata.msg, fdata.name);
  158.         var scrollTarget = document.getElementById("msg");
  159.         scrollTarget.scrollTop = scrollTarget.scrollHeight;
  160.     };
  162.     //收到消息后处理
  163.     function show_msg(s_title, s_id, s_msg) {
  164.         exist = false;
  165.         all_list = document.getElementsByClassName('kehuitem');
  166.         for (const key in all_list) {
  167.             if (all_list.hasOwnProperty(key)) {
  168.                 const element = all_list[key];
  169.                 if (element.getAttribute('toid') == s_id) {
  170.                     exist = true;
  171.                     break;
  172.                 }
  173.             }
  174.         }
  175.         if (exist) {
  176.             all_chat_box = document.getElementsByClassName('up');
  177.             for (const key in all_chat_box) {
  178.                 if (all_chat_box.hasOwnProperty(key)) {
  179.                     const element = all_chat_box[key];
  180.                     element.setAttribute('id', 'null');
  181.                     if (element.getAttribute('toid') == s_id) {
  182.                         element.setAttribute('id', 'msg');
  183.                     }
  184.                 }
  185.             }
  186.             all_list = document.getElementsByClassName('kehuitem');
  187.             for (const key in all_list) {
  188.                 if (all_list.hasOwnProperty(key)) {
  189.                     const element = all_list[key];
  190.                     if (element.getAttribute('toid') == s_id) {
  191.                         element.style.backgroundColor = 'cornflowerblue';
  192.                         element.setAttribute('new', 'on');
  193.                     } 
  194.                 }
  195.             }
  197.         } else {
  199.             add_user(s_title, s_id, s_msg);
  201.             all_list = document.getElementsByClassName('kehuitem');
  202.             for (const key in all_list) {
  203.                 if (all_list.hasOwnProperty(key)) {
  204.                     const element = all_list[key];
  205.                     if (element.getAttribute('toid') == s_id) {
  206.                         element.style.backgroundColor = 'cornflowerblue';
  207.                     } 
  208.                 }
  209.             }
  212.         }
  214.     }
  216.     //添加聊天标签
  217.     function add_user(title, to_id, msg) {
  218.         //在消息列表添加一个用户框
  219.         userlist = document.createElement('div');
  220.         userlist.setAttribute('class', 'kehuitem');
  221.         userlist.setAttribute('toid', to_id);
  222.         userlist.setAttribute('new', 'on');
  223.         userlist.innerText = title;
  224.         document.getElementById('idlist').append(userlist);
  226.         //添加一个聊天框
  227.         all_chat_box = document.getElementsByClassName('up');
  228.         for (const key in all_chat_box) {
  229.             if (all_chat_box.hasOwnProperty(key)) {
  230.                 const element = all_chat_box[key];
  231.                 element.setAttribute('id', 'null');
  232.                 element.style.display = 'none';
  233.             }
  234.         }
  235.         chat_box = document.createElement('div');
  236.         chat_box.setAttribute('class', 'up');
  237.         chat_box.setAttribute('toid', to_id);
  238.         chat_box.setAttribute('id', 'msg');
  239.         chat_box.style.display = 'block';
  240.         document.getElementsByTagName('body')[0].append(chat_box);
  242.         //用户列表被点击
  243.         userlist.addEventListener('click', function () {
  244.             all_list = document.getElementsByClassName('kehuitem');
  245.             for (const key in all_list) {
  246.                 if (all_list.hasOwnProperty(key)) {
  247.                     const element = all_list[key];
  248.                    if (element.getAttribute('new')=='off'){
  249.                     element.style.backgroundColor = '';
  250.                    }
  252.                 }
  253.             }
  254.             this.style.backgroundColor = 'cornflowerblue';
  255.             this.setAttribute('new','off');
  256.             to_id = this.getAttribute('toid');
  257.             console.log(to_id);
  259.             all_chat_box = document.getElementsByClassName('up');
  260.             for (const key in all_chat_box) {
  261.                 if (all_chat_box.hasOwnProperty(key)) {
  262.                     const element = all_chat_box[key];
  263.                     element.setAttribute('id', 'null');
  264.                     if (element.getAttribute('toid') == to_id) {
  265.                         element.style.display = 'block';
  266.                         element.setAttribute('id', 'msg');
  267.                     } else {
  268.                         element.style.display = 'none';
  269.                     }
  271.                 }
  272.             }
  273.         });
  274.     }
  276. </script>
  278. </html>

演示效果

上一条：项目在主轴上的增长因子和收缩因子的设置和简写&尺寸的设置和优先级下一条：flex项目属性及PC端、移动端布局方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
安2020-09-22 11:26:311楼
大佬，能给个源码吗？想学习一下

相关文章

查看更多