swoole与浏览器js进行二进制websocket数据传输

swoole与浏览器js进行二进制websocket数据传输

<a href='/tag/swoole.html'>swoole</a>与浏览器js进行二进制websocket数据传输

我们可能看过websocket的很多连接示例,大部分都是明文发送方式,其实websocket支持更高效的二进制binary传输方式,今天我们来看看如何在浏览器端使用websocket与swoole的websocket服务端进行二进制数据通讯。

一、浏览器端js传输二进制websocket数据

首先是js浏览器端,如果要使用二进制进行websocket数据传输,那么就要将websocket的binaryType设为arraybuffer,并且如果传输字符串,还要将字符串转成二进制arraybuffer进行传输,完整的html端代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <script type="text/javascript">

        // ArrayBuffer转为字符串,参数为ArrayBuffer对象
function ab2str(buf) {
   return String.fromCharCode.apply(null, new Uint8Array(buf));
}

// 字符串转为ArrayBuffer对象,参数为字符串
function str2ab(str) {
    var buf = new ArrayBuffer(str.length); // 每个字符占用1个字节
    var bufView = new Uint8Array(buf);
    for (var i=0, strLen=str.length; i<strLen; i++) {

         bufView[i] = str.charCodeAt(i);
    }
    return buf;
}

        var ws = new WebSocket('ws://web.debug.only.bfw.wiki:9502')
        ws.binaryType = 'arraybuffer';
        ws.onopen = function() {
            // 发送 Hello 消息
            ws.send(str2ab("hello"));
        }
        
        ws.onmessage = function (ev) {
        
            console.log(ab2str(ev.data));
    
        }
    </script>

    <style>
    </style>
</head>

<body>
    <div id="picker">
        颜色选择器
    </div>
</body>

</html>

二、swoole服务端解析发送二进制数据

接下来我们来写服务端的代码,我们采用swoole来传输二进制数据,swoole的默认的websocket数据传输是采用文本类型,如果要转成二进制,必须将push的第三个参数设为SWOOLE_WEBSOCKET_OPCODE_BINARY,服务端代码如下:

<?php

$server = new Swoole\Websocket\Server("0.0.0.0", 9502);

$server->on('open', function($server, $req) {
    echo "connection open: {$req->fd}\n";
});


$server->on('message', function($server, $frame) {

    //自动解析
    echo "received message: {$frame->data}\n";
    //以二进制流发送数据
    $server->push($frame->fd, "hello", SWOOLE_WEBSOCKET_OPCODE_BINARY);

});

$server->on('close', function($server, $fd) {
    echo "connection close: {$fd}\n";
});

$server->start();

运行后,我们在浏览器的network中勾选ws,就可以看到传输的data变成二进制了。

<a href='/tag/swoole.html'>swoole</a>与浏览器js进行二进制websocket数据传输

三、其他情况

1、传输英文php与浏览器端都能识别解析文本,那么传输中文会出现编码不一致问题,那么怎么解决呢?

将html代码修改一下,将后端都支持utf-8编码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <script type="text/javascript">


        var ws = new WebSocket('ws://web.debug.only.bfw.wiki:9502')
        ws.binaryType = 'arraybuffer';
        ws.onopen = function() {
           var uint8array = new TextEncoder("utf-8").encode("hello水电费");

            ws.send( uint8array);
        }
        
        ws.onmessage = function (ev) {
        var string = new TextDecoder().decode(ev.data);
            console.log(string);
    
        }
    </script>

    <style>
    </style>
</head>

<body>
    <div id="picker">
        颜色选择器
    </div>
</body>

</html>

2、如果对二进制数据进行错位加密解密,让人无法知道传输的真正内容?

3、二进制传输的大小最大能传多少?

{{collectdata}}

网友评论0