微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 商桥系统的基本通讯原理
博主信息
博文 62
粉丝 7
评论 2
访问量 74110
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
商桥系统的基本通讯原理
我是郭富城
原创
1861人浏览过

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

批改老师：GuanhuiGuanhui

批改状态：合格

老师批语：命名尽量不要使用拼音！注意命名规范！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录