Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 商桥系统的基本通讯原理
Blogger Information
Blog 62
fans 7
comment 2
visits 58231
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
商桥系统的基本通讯原理
我是郭富城
Original
1153 people have browsed it

1. 客户端代码

1.1 控制器

  1. <?php
  3. namespace App\Http\Controllers;
  5. use Illuminate\Http\Request;
  7. // 仿百度商桥客户端
  8. class Bchat extends Controller
  9. {
  10.     //百度商桥首页
  11.     public function index() {
  12.         return view('bchat/index');
  13.     }
  14. }

1.2 客户端视图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿百度商桥</title>
  6.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  7.     <script src="/static/plugins/layui/layui.js"></script>
  8. </head>
  9. <body>
  10.     <div>
  11.         这是测试内容啊老弟
  12.     </div>
  13. </body>
  14. </html>
  15. <script>
  16.     layui.use(['layer'], function() {
  17.     var layer = layui.layer;
  18.     $=layui.jquery;
  19.     init_bchat();
  20.     });
  21.     // 百度商桥
  22.     function init_bchat() {
  23.         layer.open({
  24.         type: 2,
  25.         title: '百度商桥欢迎你',
  26.         // shadeClose: true,
  27.         shade: 0.2,
  28.         area: ['80%', '80%'],
  29.         content: '/bchat/index', //iframe的url
  30.         btn: ['发送'],
  31.         yes: function(index, layero) {
  32.             var body = layer.getChildFrame('body', index);
  33.             var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
  34.             iframeWin.send();
  35.         }
  36.         }); 
  37.     }
  38. </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>客户端的聊天窗口</title>
  6.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  7.     <script src="/static/plugins/layui/layui.js"></script>
  8.     <link rel="stylesheet" href="/static/css/bchat.css">
  9. </head>
  10. <body>
  11.     <!-- 消息内容展示 -->
  12.     <div class="msg_show">
  14.     </div>
  15.     <hr class="layui-bg-black">
  16.     <!-- 消息发送区 -->
  17.     <div class="msg_send" contenteditable="true">请输入要发送的内容</div>
  18. </body>
  19. </html>
  20. <script>
  21.     layui.use(['layer'], function() {
  22.     var layer = layui.layer;
  23.     $=layui.jquery;
  24.     });
  25.     // 假设服务端ip为127.0.0.1
  26.     ws = new WebSocket("ws://127.0.0.1:2000");
  27.     ws.onopen = function() {
  28.         var data={};
  29.         data.type= 'login';
  30.         data.group = 'member';
  31.         ws.send(JSON.stringify(data));
  32.         // alert("连接成功");
  33.         // ws.send('tom');
  34.         // alert("给服务端发送一个字符串：tom");
  35.     };
  36.     ws.onmessage = function(e) {
  37.         var data=JSON.parse(e.data);
  38.         if (data.kefu_id > 0) {
  39.             var html='<div class="msg_item">\
  40.                         <div class="nickname">客服'+ data.kefu_id +'说：</div>\
  41.                         <div class="contents">'+ data.msg +'</div>\
  42.                     </div>';
  43.             $('.msg_show').append(html);
  44.         } else {
  45.             var html='<div class="msg_item msg_customer">\
  46.                         <div class="nickname">我说：</div>\
  47.                         <div class="contents">'+ data.msg +'</div>\
  48.                     </div>';
  49.             $('.msg_show').append(html);
  50.         }
  51.     };
  52.     // <!-- 发送消息 -->
  53.     function send() {
  54.         var data={};
  55.         data.group = 'member';
  56.         data.type='msg';//发送类型是message
  57.         // data.touid=1;//发给哪个客服
  58.         data.msg=$('.msg_send').html();
  59.         ws.send(JSON.stringify(data));
  60.         $('.msg_send').html('');
  61.     }
  62. </script>

1.3 效果图

2. 客服端代码

2.1 客服端控制器

  1. <?php
  3. namespace App\Http\Controllers\admins;
  5. use App\Http\Controllers\Controller;
  6. use Illuminate\Http\Request;
  8. //后台客服
  9. class Kefu extends Controller
  10. {
  11.     //
  12.     public function index() {
  13.         return view('admins/kefu/index');
  14.     }
  15. }

2.2 客服端视图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>后台客服</title>
  6.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  7.     <script src="/static/plugins/layui/layui.js"></script>
  8.     <link rel="stylesheet" href="/static/css/bchat.css">
  9. </head>
  10. <body>
  11.     <div class="kefu">
  12.         <div class="kefu_title">客户接待中心</div>
  13.         <div class="kefu_detail">
  14.             <!-- 左侧客户列表区 -->
  15.             <div class="member_list">
  17.             </div>
  18.             <!-- 右侧客户对话区 -->
  19.             <div class="message_list">
  20.                 <!-- 当前的聊天内容 -->
  21.                 <div class="message_content">
  23.                 </div>
  24.                 <!-- 消息发送区域 -->
  25.                 <div class="message_send" contenteditable="true">
  27.                 </div>
  28.                 <div class="btn_send"><button class="layui-btn" onclick="sendmsg()">发送</button></div>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>
  34. <script>
  35.     var user_list=[];//新用户列表
  36.     layui.use(['layer'], function() {
  37.     var layer = layui.layer;
  38.     $=layui.jquery;
  39.     });
  40.     // 假设服务端ip为127.0.0.1
  41.     ws = new WebSocket("ws://127.0.0.1:2000");
  42.     ws.onopen = function() {
  43.         var data={};
  44.         data.type= 'login';
  45.         data.group = 'admin';
  46.         ws.send(JSON.stringify(data));
  47.         // alert("连接成功");
  48.         // ws.send('tom');
  49.         // alert("给服务端发送一个字符串：tom");
  50.     };
  51.     ws.onmessage = function(e) {
  52.         // console.log(e.data);
  53.         var data = JSON.parse(e.data);
  54.         //新客户来了
  55.         if (data.type==='login') {
  56.             if ($.inArray(data.customer_id,user_list)===-1) {
  57.                 user_list.push(data.customer_id);
  58.             }
  59.             build_kefu_user_list();
  60.             return;
  61.         }
  62.         // 客户连接断开
  63.         if (data.type==='logout') {
  64.             var index = $.inArray(data.connection_id,user_list);
  65.             if (index > -1) {
  66.                 user_list.splice(index,1);
  67.             }
  68.             build_kefu_user_list();
  69.             return;
  70.         }
  72.         var msg_member_list = $('#member_'+ data.customer_id);
  73.         if (msg_member_list.length===0) {
  74.             var html_container = '<div id="member_' + data.customer_id +'"></div>';
  75.             $('.message_content').append(html_container);
  76.         }
  78.         var html='<div class="msg_item">\
  79.                         <div class="nickname">'+ data.customer_id +'说：</div>\
  80.                         <div class="contents">'+ data.msg +'</div>\
  81.                     </div>';
  82.                     $('#member_'+ data.customer_id).append(html);
  83.                     $('#member_'+ data.customer_id).show().siblings('div').hide();
  84.     };
  85.     //构建客服端的客户列表
  86.     function build_kefu_user_list() {
  87.         var html='';
  88.         $.each(user_list,function(i,v){
  89.             html+=('<div class="member_item" onclick="checkme(this)" member_id="'+v+'">客户:'+ v +'</div>');
  90.         });
  91.         $('.member_list').html(html);
  92.     }
  93.     // 和某个客户聊天
  94.     function checkme(obj) {
  95.         $(obj).addClass('active').siblings('div').removeClass('active');
  96.         var member_id=$(obj).attr('member_id');
  97.         $('#member_'+ member_id).show().siblings('div').hide();
  98.     }
  99.     // <!-- 发送消息 -->
  100.     function sendmsg() {
  101.         // 获取当前聊天的客户
  102.         var touid =parseInt($('.member_list div[class*="active"]').attr('member_id'));
  103.         if (isNaN(touid)) {
  104.             return layer.alert('请先选择客户',{icon:2});
  105.         }
  106.         var data={};
  107.         data.group = 'admin';
  108.         data.type='msg';//发送类型是message
  109.         data.touid=touid;//发给哪个客户
  110.         data.msg=$('.message_send').html();
  111.         ws.send(JSON.stringify(data));
  112.         $('.message_send').html('');
  117.         var html='<div class="msg_item msg_kefu">\
  118.                         <div class="nickname">我说：</div>\
  119.                         <div class="contents">'+ data.msg +'</div>\
  120.                     </div>';
  121.         $('.message_content').append(html);
  122.     }
  123. </script>

2.3 效果图

3. websocket

参考WebSocket即时通讯原理实战https://www.php.cn/blog/detail/22780.html
下载PHP socket即时通讯框架。
https://www.workerman.net/download/workermanzip

  1. <?php
  2. use Workerman\Worker;
  3. require_once __DIR__ . '/workerman/Autoloader.php';
  5. // 注意：这里与上个例子不同，使用的是websocket协议
  6. $ws_worker = new Worker("websocket://0.0.0.0:2000");
  8. // 启动4个进程对外提供服务
  9. $ws_worker->count = 4;
  11. // 当收到客户端发来的数据后返回hello $data给客户端
  12. $ws_worker->onMessage = function($connection, $data)
  13. {
  14.     // 向客户端发送hello $data
  15.     // $connection->send($data);
  16.     // 给所有人发消息
  17.     // global $ws_worker;
  18.     // foreach($ws_worker->connections as $conn)
  19.     // {
  20.     //     // $conn->send("user[{$connection->uid}] said: $data");
  21.     //     $conn->send($data);
  22.     // }
  23.     // 服务器端收到客户端的信息后返回数据给客户端
  24.     var_dump($connection->id);
  25.     // return;
  26.     global $ws_worker;
  27.     $data = json_decode($data,true);
  28.     // print_r($data);
  29.     // 客户端有人登录进来了
  30.     if ($data['type']==='login'){
  31.         // 赋值
  32.         $connection->group = $data['group'];
  33.         //客户登录的时候
  34.         if ($data['group']==='member') {
  35.             //随机分配一个客服姐姐给他
  36.             $admin_list=[];
  37.             foreach($ws_worker->connections as $conn) {
  38.                 if ($conn->group==='admin') {
  39.                     $admin_list[]=$conn->id;
  40.                 }
  41.             }
  42.             // 分配一个随机客服
  43.             $myadmin_index = array_rand($admin_list,1);//键名
  44.             $connection->touid=$admin_list[$myadmin_index];
  45.             // 通知客服有新用户进来
  46.             foreach($ws_worker->connections as $conn)
  47.             {
  48.                 if ($conn->id === $connection->touid) {
  49.                     $data['customer_id'] = $connection->id;
  50.                     $conn->send(json_encode($data));
  51.                 }
  52.             }
  53.         }
  54.     }
  55.     // 有新的消息过来了
  56.     if ($data['type']==='msg'){
  57.         // 赋值
  58.         // 客服(管理)登录进来，发消息给用户
  59.         if ($connection->group === 'admin'){
  60.             $touid = $data['touid'];
  61.             $msg = $data['msg'];
  62.             foreach($ws_worker->connections as $conn)
  63.             {
  64.                 //向对应的用户发送消息
  65.                 if($touid === $conn->id) {
  66.                     $msgData = [];
  67.                     $msgData['type'] = 'msg';
  68.                     $msgData['kefu_id'] = $connection->id;
  69.                     $msgData['msg'] = $msg;
  70.                     $conn->send(json_encode($msgData));
  71.                     // 把数据储存到数据库
  73.                     $data = ['from_id'=>$connection->id,'to_uid'=>$touid,'msg'=>$msg];
  74.                     $url = 'http://laravel.edu/kefumsg/save_msg';
  75.                     curl_post($url,$data);
  76.                     // var_dump($res);
  77.                 }
  78.                 // $conn->send("user[{$connection->uid}] said: $data");
  79.             }
  80.         }
  81.         // 客户端登录进来
  82.         if ($connection->group === 'member'){
  83.             // $touid=$data['touid'];
  84.             foreach($ws_worker->connections as $conn)
  85.             {
  86.                 //向对应的用户发送消息
  87.                 if($connection->touid === $conn->id) {
  88.                     $data['customer_id'] = $connection->id;
  89.                     $conn->send(json_encode($data));
  90.                     // 储存数据
  91.                     $data = ['from_id'=>$connection->id,'to_uid'=>$connection->touid,'msg'=>$data['msg']];
  92.                     $url = 'http://laravel.edu/kefumsg/save_msg';
  93.                     curl_post($url,$data);
  94.                 }
  95.                 // $conn->send("user[{$connection->uid}] said: $data");
  96.             }
  97.         }
  98.     }
  100.     // 用户链接断开的时候
  101.     $ws_worker->onClose = function($connection)
  102.     {
  103.         // 通知客服，有人掉线了
  104.         global $ws_worker;
  105.         foreach($ws_worker->connections as $conn) {
  106.             if ($conn->group==='admin') {
  107.                 $data=[];
  108.                 $data['type']='logout';
  109.                 $data['connection_id']=$connection->id;
  110.                 $conn->send(json_encode($data));
  111.             }
  112.         }
  113.     };
  114. };
  116. // 定义一个http请求函数
  117. // $url 是请求的链接
  118. // $postdata 是传输的数据，数组格式
  119. function curl_post( $url, $postdata ) {
  121.    $header = array(
  122.        'Accept: application/json',
  123.     );
  125.     //初始化
  126.     $curl = curl_init();
  127.     //设置抓取的url
  128.     curl_setopt($curl, CURLOPT_URL, $url);
  129.     //设置头文件的信息作为数据流输出
  130.     curl_setopt($curl, CURLOPT_HEADER, 0);
  131.     //设置获取的信息以文件流的形式返回，而不是直接输出。
  132.     curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  133.     // 超时设置
  134.     curl_setopt($curl, CURLOPT_TIMEOUT, 10);
  136.     // 超时设置，以毫秒为单位
  137.     // curl_setopt($curl, CURLOPT_TIMEOUT_MS, 500);
  139.     // 设置请求头
  140.     curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
  142.     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE );
  143.     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE );
  145.     //设置post方式提交
  146.     curl_setopt($curl, CURLOPT_POST, 1);
  147.     curl_setopt($curl, CURLOPT_POSTFIELDS, $postdata);
  148.     //执行命令
  149.     $data = curl_exec($curl);
  151.     // 显示错误信息
  152.     if (curl_error($curl)) {
  153.         print "Error: " . curl_error($curl);
  154.     } else {
  155.         // 打印返回的内容
  156.         curl_close($curl);
  157.         return $data;
  158.     }
  159. }
  160. // 运行worker
  161. Worker::runAll();

4. 效果演示

5. 总结

随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

Correcting teacher：GuanhuiGuanhui

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
0 comments
Author's latest blog post