search

博客列表 >仿百度商桥项目-使用workerman进行websocket通信/模拟商桥群发消息

仿百度商桥项目-使用workerman进行websocket通信/模拟商桥群发消息

岂几岂几
岂几岂几原创
2021年03月22日 23:33:111793浏览

使用workerman进行websocket通信/模拟商桥群发消息

学习心得

  • 提供 websocket 通信服务的服务器, 像一个跟所有人保持通信的传声筒, 它可以接收来自客户端的消息, 也能主动给客户端发送消息. 而 http 通信, 服务器只能跟发送请求的客户端交互, 不能主动发送消息给客户端.

1. 使用workerman进行websocket通信

1.1. workerman的下载和简单开发实例说明

  1. 访问workerman官网,点击“下载”栏目，在“workerman内核（Linux Windows通用）”框中点击“下载ZIP压缩文件”开始下载workerman文件包，并解压缩（假设解压缩到Workerman目录中）：
  2. 参考workerman说明文档中“简单开发实例”的实例二，创建wk_test.php文件，并拷贝实例二ws_test.php文件中的代码到创建的文件中：
  3. 在wk_test.php文件所在目录，用git batch启动workerman服务端：
  4. 打开chrome浏览器，按F12打开调试控制台，在Console一栏输入客户端给服务端发送消息的代码：

1.2. 实例中的细节说明

  • websocket 链接跟 http 链接的区别: http 链接在客户端向服务器发送请求, 服务器返回响应后, 链接就会断开; websocket 链接在链接成功后, 可以持续通信, 链接会一直保持.

  • workerman 应用在服务器中的位置跟 Apache , Nginx 相同. 即, web 服务器.

  • 使用 workerman 创建使用 websocket 通信的应用服务器的一般步骤:

    1. 创建一个 Worder 应用对象, 传入参数指定应用负责处理 websocket 通信. $ws_worker = new Worker("websocket://0.0.0.0:2000"); ; 其中的 0.0.0.0:2000 表示接受任意IP客户端发送到服务器 2000 端口的链接请求.
    2. 启动提供 websocket 通信的系统进程数. $ws_worker->count = 4; ;
    3. 指定收到客户端发送来数据后的处理数据的方法脚本: $ws_worker->onMessage = function($connection, $data) {...} ; 其中参数 $connection 是发送数据的客户端与服务器的 websocket 链接; $data 是客户端发送过来的数据.
    4. 指定当客户端断开链接时的处理脚本. $ws_worker->onClose = function($connection) {...} ; 其中参数 $connection 是即将关闭的 websocket 链接.
    5. 启动 Worker 应用.
    6. 服务端使用 websocket 链接的 send(消息字符串) 向该链接的客户端发送消息数据. $connection->send('hello!');
    7. Worder 对象的 connections 属性是当前与服务器保持通讯的 websocket 链接数组.

  • 客户端与提供 websocket 通信的服务器交互的一般步骤:

    1. 创建一个跟服务器进行 websocket 通信的链接: ws = new WebSocket("ws://127.0.0.1:2000"); . 其中 127.0.0.1 是客户端要与之创建 websocket 链接的服务器地址, 2000 是服务器监听链接和数据收发的端口号.
    2. 指定当连接创建成功时的回调处理方法, 一般链接创建成功后, 就发送唯一标识当前客户端信息的数据, 如保存在 cookie 中的 用户id 等. ws.onopen = function() {// 一般发送客户端的唯一标识给服务器存储 }
    3. 指定收到服务器返回的消息时的处理方法脚本. ws.onmessage = function(e) {// 收到服务器的消息了, 处理消息数据吧}
    4. 客户端同样使用 websocket 连接的 send(消息字符串) 方法向服务器发送数据.

2. 模拟商桥群发消息

  • 实现思路: 服务器类内置一个connections属性数组， connections 属性保存有所有成功跟客户端创建链接的连接对象. 当某个客户端给服务器发送消息时, 服务器遍历 connections 中链接对象, 给连接对象的客户端发送消息, 即可实现群发.

代码

  • 1- 服务端
  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. // 当接收到客户端发来的消息时的处理方法
  12. $ws_worker->onMessage = function($connection, $data)
  13. {
  14.     // 发送消息的连接id
  15.     $message['from_id'] = $connection->id;
  16.     // 消息内容
  17.     $message['msg'] = $data
  18.     // 转成json字符串
  19.     $jsonStr = json_encode($message);
  20.     // 遍历当前所有的链接对象, 给连接对象对应的客户端发送数据
  21.     foreach($ws_worker->connection as $conn) {
  22.         $connection->send($jsonStr);
  23.     }
  24. }
  26. // 运行worker
  27. Worker::runAll();
  • 2- 客户端
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>"百度商桥"客户端</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  16.         body {
  17.             background-color: #fafafa;
  18.         }
  20.         .im {
  21.             width: 400px;
  22.             height: 520px;
  23.             background-color: wheat;
  24.             margin: 40px auto;
  25.             padding: 10px;
  26.         }
  28.         .im .history {
  29.             background-color: white;
  30.             border: 1px solid #aaa;
  31.             width: 100%;
  32.             height: 290px;
  33.             padding: 5px;
  34.             overflow-y: auto;
  35.         }
  37.         .im .inputing {
  38.             background-color: white;
  39.             border: 1px solid #aaa;
  40.             width: 100%;
  41.             height: 150px;
  42.             margin-top: 10px;
  43.             padding: 5px;
  44.             outline: none;
  45.         }
  47.         .im .btn-area {
  48.             width: 100%;
  49.             text-align: right;
  50.             margin-top: 10px;
  51.         }
  53.         .msg-box-friend {
  54.             padding: 10px;
  55.             width: 75%;
  56.             margin: 5px auto 0 5px;
  57.             background-color: lightblue;
  58.             border: 1px solid #ccc;
  59.             border-radius: 5px;
  60.             /* overflow-x: wordwrap; */
  61.             white-space:normal;
  62.         }
  64.         .msg-box-me {
  65.             padding: 10px;
  66.             width: 75%;
  67.             margin: 5px 5px 0 auto;
  68.             background-color: wheat;
  69.             border: 1px solid #ccc;
  70.             border-radius: 5px;
  71.             /* overflow-x: wordwrap; */
  72.             white-space:normal;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.     <div class="im">
  78.         <div class="history">
  80.         </div>
  81.         <!-- contenteditable="true", 这个div就可编辑了 -->
  82.         <div class="inputing" contenteditable="true">
  84.         </div>
  85.         <div class="btn-area">
  86.             <span class="layui-btn layui-btn-success" onclick="send()">发送</span>
  87.         </div>
  88.     </div>
  89. </body>
  90. <script>
  91.     layui.use(['layer'], function() {
  92.         layer = layui.layer;
  93.     });
  95.     // 假设服务端ip为127.0.0.1
  96.     ws = new WebSocket("ws://127.0.0.1:2000");
  97.     /* 当客户端连通服务器端的时候 */
  98.     ws.onopen = function() {
  99.         // ...
  100.     };
  101.     ws.onmessage = function(e) {
  102.         // alert("收到服务端的消息：" + e.data);
  103.         var receive = JSON.parse(e.data);
  104.         var str = "<div class='msg-box-friend'>"+receive.from_id+"说: "+receive.msg+"</div>";
  105.         $(str).appendTo('.history');
  106.     };
  108.     function send() {
  109.         // 消息框
  110.         var str = "<div class='msg-box-me'>我说: "+$('.inputing').html()+"</div>";
  111.         var data = {};
  112.         // 标识此次发送的数据是发送消息
  113.         data.type='msg';
  114.         // 标识是从客服端发的
  115.         data.group = 'admin'
  116.         // 标识私聊的对象id，0标识群发. DEL_客户连接时由系统随机分配客服小姐姐, 不需要手动指定了
  117.         // data.sendId = 0;
  118.         // 要发送的消息
  119.         data.msg = $('.inputing').html();
  120.         // 在消息历史中显示发送的消息
  121.         $(str).appendTo('.history');
  122.         // 发送JSON格式的数据
  123.         ws.send(JSON.stringify(data));
  124.         $('.inputing').html('');
  125.     }
  126. </script>
  127. </html>
上一条：仿百度商桥项目-实现商桥客户和客服点对点通信下一条：商桥系统的基本通讯原理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多