简体中文（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

博客列表 >商桥系统的基本通讯原理

商桥系统的基本通讯原理

我是郭富城
我是郭富城原创
2020年07月04日 00:05:181152浏览

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协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

上一条：仿百度商桥项目-使用workerman进行websocket通信/模拟商桥群发消息下一条：web页集合弹性盒子,精灵图,flex布局,grid布局实现移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多