简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > workerman客服聊天系统
Blogger Information
Blog 17
fans 1
comment 0
visits 20049
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
workerman客服聊天系统
大A
Original
2416 people have browsed it

介绍

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

源码

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>

演示效果

Correcting teacher：天蓬老师天蓬老师

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
1 comments
安 2020-09-22 11:26:31
大佬，能给个源码吗？想学习一下
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！