WebSocket 用戶端訊息的解析
#前面我們示範了當客戶端連線服務端，會觸發連線事件，事件中我們要求傳回目前客戶端的fd。當客戶端傳送訊息給服務端，服務端會根據我們的規則將訊息傳送給指定fd 的客戶端：
app/listener/WsConnect.php
<?php
declare (strict_types = 1);
namespace app\listener;
class WsConnect
{
/**
* 事件监听处理
*
* @return mixed
* 受用 WebSocket 客户端连接入口
*/
public function handle($event)
{
//实例化 Websocket 类
$ws = app('\think\swoole\Websocket');
//
$ws -> emit('sendfd',$ws -> getSender());
}
}app/listener/ WsTest.php
<?php
declare (strict_types = 1);
namespace app\listener;
use \think\swoole\Websocket;
class WsTest
{
/**
* 事件监听处理
*
* @return mixed
*/
public function handle($event,Websocket $ws)
{
$ws -> to(intval($event['to'])) -> emit('testcallback',$event['message']);
}
}客戶端執行上述兩個事件後，控制台列印出以下資訊：
返回訊息前面有一些數字，40、 42都代表什麼意義呢？
因為我們使用的擴充功能是基於 SocketIO 協定的，這些數字可以理解為協定的代號。
開啟/vendor/topthink/think-swoole/src/websocket/socketio/Packet.php ，有以下內容：
上面是Socket 類型，下面是引擎，前後兩個代號上下拼湊得到：
40：”MESSAGE CONNECT” 42：”MESSAGE EVENT”
結合這些程式碼，能知道SocketIO 中訊息的大致運作情況。
透過控制台列印出來的訊息，我們發現這些訊息無法直接拿到使用，需要進行截取處理：
test.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
消息：<input type="text" id="message">
接收者：<input type="text" id="to">
<button onclick="send()">发送</button>
<script>
var ws = new WebSocket("ws://127.0.0.1:9501/");
ws.onopen = function(){
console.log('连接成功');
}
//数据返回的解析
function mycallback(data){
var start = data.indexOf('[') // 第一次出现的位置
var start1 = data.indexOf('{')
if(start < 0){
start = start1;
}
if(start >= 0 && start1 >= 0){
start = Math.min(start,start1);
}
if(start >= 0){
console.log(data);
var json = data.substr(start); //截取
var json = JSON.parse(json);
console.log(json);
}
}
ws.onmessage = function(data){
// console.log(data.data);
mycallback(data.data);
}
ws.onclose = function(){
console.log('连接断开');
}
function send()
{
var message = document.getElementById('message').value;
var to = document.getElementById('to').value;
console.log("准备给" + to + "发送数据：" + message);
ws.send(JSON.stringify(['test',{
to:to,
message:message
}])); //发送的数据必须是 ['test',数据] 这种格式
}
</script>
</body>
</html>解析後的資料：
使用SocketIO 處理訊息業務
SocketIO 的相關知識可以查看文檔，並專注於客戶端方面知識：
https:/ /www.w3cschool.cn/socket/socket-k49j2eia.html
iotest.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
消息：<input type="text" id="message">
接收者：<input type="text" id="to">
<button onclick="send()">发送</button>
<script src="./socketio.js"></script>
<script>
//http 协议
var socket = io("http://127.0.0.1:9501", {transports: ['websocket']});
socket.on('connect', function(){
console.log('connect success');
});
socket.on('close',function(){
console.log('connect close')
});
//send_fd 为自定义的场景值，和后端对应
socket.on("sendfd", function (data) {
console.log(data)
});
//testcallback 为自定义的场景值，和后端对应
socket.on("testcallback", function (data) {
console.log(data)
});
function send() {
var message = document.getElementById('message').value;
var to = document.getElementById('to').value;
socket.emit('test', {
//属性可自行添加
to:to,
message:message
})
}
</script>
</body>
</html>var socket = io("http://127.0.0.1:9501", {transports: ['websocket']}); 中第二個參數指明要升級的協定。
app/listener/WsConnect.php
<?php
declare (strict_types = 1);
namespace app\listener;
class WsConnect
{
/**
* 事件监听处理
*
* @return mixed
* 受用 WebSocket 客户端连接入口
*/
public function handle($event)
{
//实例化 Websocket 类
$ws = app('\think\swoole\Websocket');
//
$ws -> emit('sendfd',$ws -> getSender());
}
}app/listener/WsTest.php
<?php
declare (strict_types = 1);
namespace app\listener;
use \think\swoole\Websocket;
class WsTest
{
/**
* 事件监听处理
*
* @return mixed
*/
public function handle($event,Websocket $ws)
{
// $ws -> to(intval($event['to'])) -> emit('testcallback',$event['message']);
$ws -> to(intval($event['to'])) -> emit('testcallback',[
'form' => [
'id' => 10,
'fd' => $ws -> getSender(),
'nickname' => '张三'
],
'to' => [
'id' => 11,
'fd' => intval($event['to']),
'nickname' => '李四'
],
'massage' => [
'id' => 888,
'create_time' => '2020-03-13',
'content' => $event['message']
]
]);
}
}開啟兩個客戶端，fd 分別是5、6：
WsConnect.php 中，有$ws -> emit('sendfd',$ws -> getSender()); 發送fd 訊息對應的場景值是“sendfd” ，在iotest.html 中，有socket.on("sendfd", function (data) {console.log(data)}); 這段程式碼，其中也有場景值“sendfd”，這行程式碼可以直接取得對應場景值的信息，所以控制台上會印出fd 值。
用fd 5 向fd 6 發送訊息：
兩個客戶端都會受到訊息：
可見訊息已經被解析，因為WsTest.php 中發送訊息指定場景值testcallback，iotest.html 中透過socket.on("testcallback", function (data){console.log(data)}); 可直接取得解析過的結果。
這就看出了 SocketIO 在客戶端訊息接收方面的便捷之處了。
用戶UID 和客戶端fd 的綁定
前面的例子中，都是透過指定fd 來向客戶端發送訊息，在實際場景中，我們不可能透過fd 確定發送對象，因為fd 不是固定不變的，因此需要將用戶的UID 與客戶端的fd 進行綁定，進而可以透過選擇用戶，來確定fd 完成訊息的發送。
只需要將前端頁面的HTTP 連線增加UID 參數即可：
test.html
var ws = new WebSocket("ws://127.0.0.1:9501/?uid=1");iotest.html
var socket = io("http://127.0.0.1:9501?uid=1", {transports: ['websocket']});後端可以在連線事件中進行綁定：
app/listener/WsConnect.php
<?php
declare (strict_types = 1);
namespace app\listener;
class WsConnect
{
/**
* 事件监听处理
*
* @return mixed
* 受用 WebSocket 客户端连接入口
*/
public function handle($event)
{
// $event 为请求对象
//实例化 Websocket 类
$ws = app('\think\swoole\Websocket');
//获取 uid
$uid = $event -> get('uid');
//获取 fd
$fd = $ws -> getSender();
//获取到 uid 和 fd 后，可以存数据库，内存或者 redis
$ws -> emit('sendfd',[
'uid' => $uid,
'fd' => $fd
]);
}
}有了UID 與fd ，可以在每次連線成功後，更新資料庫，連線中斷後再清空用戶對因的fd。假如伺服器重啟，那麼二者的對應關係也就沒用了，所以不必存入資料庫，存入 Redis 最好，透過 Redis 的 Hash 來映射二者關係也是不錯的選擇。
以上是Think-Swoole之WebSocket客戶端訊息解析與使用SocketIO處理用戶UID與fd關聯的詳細內容。更多資訊請關注PHP中文網其他相關文章！
ThinkPHP內置測試框架的關鍵功能是什麼？Mar 18, 2025 pm 05:01 PM本文討論了ThinkPHP的內置測試框架，突出了其關鍵功能（例如單元和集成測試），以及它如何通過早期的錯誤檢測和改進的代碼質量來增強應用程序可靠性。
在無服務器體系結構中使用ThinkPHP的關鍵注意事項是什麼？Mar 18, 2025 pm 04:54 PM本文討論了在無服務器體系結構中使用ThinkPHP的關鍵注意事項，專注於性能優化，無狀態設計和安全性。它突出了諸如成本效率和可擴展性之類的收益，但也應對挑戰
如何在ThinkPHP微服務中實現服務發現和負載平衡？Mar 18, 2025 pm 04:51 PM本文討論了在ThinkPHP微服務中實施服務發現和負載平衡，重點是設置，最佳實踐，集成方法和推薦工具。[159個字符]
ThinkPHP依賴性注入容器的高級功能是什麼？Mar 18, 2025 pm 04:50 PMThinkPHP的IOC容器提供了高級功能，例如懶惰加載，上下文綁定和方法注入PHP App中有效依賴性管理的方法。Character計數：159
使用ThinkPHP來構建SaaS應用程序的主要好處是什麼？Mar 18, 2025 pm 04:46 PMThinkPHP具有輕巧的設計，MVC架構和可擴展性。它通過各種功能提高可擴展性，加快開發並提高安全性。
如何使用ThinkPHP和RabbitMQ構建分佈式任務隊列系統？Mar 18, 2025 pm 04:45 PM本文概述了使用ThinkPhp和RabbitMQ構建分佈式任務隊列系統，重點是安裝，配置，任務管理和可擴展性。關鍵問題包括確保高可用性，避免常見的陷阱，例如不當
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
記事本++7.3.1
好用且免費的程式碼編輯器
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
