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를 열면 다음 내용이 있습니다.
상단은 소켓 유형, 하단은 엔진, 두 개의 코드 이름은 다음과 같이 결합되어 다음을 얻습니다.
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 소켓 = 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']
]
]);
}
}로그인 후 복사
두 개의 클라이언트를 열면 fds는 각각 5와 6입니다.
WsConnect.php에는 $ws ->가 있습니다. ;emit('sendfd',$ws -> getSender()); fd 메시지 전송에 해당하는 시나리오 값은 "sendfd"입니다. console .log(data)}); 이 코드에는 장면 값 "sendfd"도 포함되어 있습니다. 이 코드 줄은 장면 값에 해당하는 정보를 직접 얻을 수 있으므로 fd 값이 콘솔에 인쇄됩니다.
fd 5를 사용하여 fd 6에 정보를 보냅니다.
두 클라이언트 모두 다음 정보를 받게 됩니다.
WsTest.php에서 보낸 메시지가 장면 값 testcallback, iotest.html에서는 소켓.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의 해시를 통해.
위 내용은 Think-Swoole의 WebSocket 클라이언트 메시지 구문 분석 및 SocketIO를 사용하여 사용자 UID 및 fd 연결 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
