Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿百度商桥项目-使用workerman进行websocket通信/模拟商桥群发消息
Blogger Information
Blog 57
fans 3
comment 0
visits 60507
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进行websocket通信/模拟商桥群发消息
岂几岂几
Original
1789 people have browsed it

使用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>
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