swoole与浏览器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变成二进制了。
三、其他情况
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、二进制传输的大小最大能传多少?
网友评论0