本文介绍在 JavaScript 中通过 WebSocket 传输二进制数据的方法。重点讲解 WebSocket 的 binaryType 属性设置，以及利用 ArrayBuffer 和 DataView 进行位级数据读写。结合具体代码示例，演示如何构建登录帧、处理 Blob 对象及解析接收到的二进制流，为后端通信提供基础支持。
WebSocket 二进制数据传输概述
近期在多个项目中，我使用 JavaScript 处理二进制数据，并通过 Socket 与后台服务进行通信。在此通过博客记录相关实现细节。
首先，需要创建一个 Socket 连接。
var socket=new WebSocket("ws://192.168.0.147");Socket 连接与二进制类型设置
随后，定义 Socket 打开并成功连接后需要执行的回调函数。
WebSocket 对象包含一个 binaryType 属性，可将其值设置为“blob”或“arraybuffer”，默认值为“blob”。在项目开发初期，我未将该属性显式设置为“arraybuffer”，导致在接收数据时必须使用 Blob 对象进行接收处理。
socket.onopen=function(){
//发送登录帧，4-20位为手机号
var loginArr=[0X02,0X02,0X00,0X1E,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X0D,0X0A]
}构建与发送二进制数据
接下来是将数据转换为字节序列并发送。
var loginBuffer=new ArrayBuffer(30);
var loginDataview=new DataView(loginBuffer);
//localstorageuserinfo为缓存在本地的用户手机号
var telArr=localstorageuserinfo.TelPhone;
var loginTime=tempTrans();
for(var i=0;i<loginArr.length;){
loginDataview.setInt8(i,loginArr[i]);
if(i>3&&i<(telArr.length+4)){
loginDataview.setInt8(i,telArr.charCodeAt(i-4));
}
if(i>19&&i<loginArr.length-2){
loginDataview.setInt8(i,loginTime[i-20]);
}
i++;
}
//登录包
socket.send(loginDataview.buffer);
//格式化时间同时按照年俩位月日时分秒1位由高到底排序
function tempTrans(time){
if(!time){
time=new Date();
}
var u32Dataview=new DataView(new Uint16Array([time.getFullYear()]).buffer);
var uint8=[];
uint8.push(new DataView(new Uint8Array([0X00]).buffer).getUint8(0))
for(var i=u32Dataview.byteLength-1;i>=0;i--){
uint8.push(u32Dataview.getUint8(i))
}
uint8.push(new DataView(new Uint8Array([time.getMonth()+1]).buffer).getUint8(0));
uint8.push(new DataView(new Uint8Array([time.getDate()]).buffer).getUint8(0));
uint8.push(new DataView(new Uint8Array([time.getHours()]).buffer).getUint8(0));
uint8.push(new DataView(new Uint8Array([time.getMinutes()]).buffer).getUint8(0));
uint8.push(new DataView(new Uint8Array([time.getSeconds()]).buffer).getUint8(0));
return uint8;
}发送流程大致如下：首先实例化一个 ArrayBuffer 对象，该对象需要传入缓冲区长度参数。关于该对象的详细 API 说明，可参考：https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx。
接着，新建一个 DataView 对象，并将上述 ArrayBuffer 传入其中。利用 DataView 的 setInt8 和 getInt8 等方法，可以按位读取或设置数据。具体 API 参考：https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx。
接收数据处理与解析
以下是接收数据后的处理逻辑。
//接收消息onmessage
socket.onmessage=function(data){
var blob_=new Blob([data.data]);
parseBlob(blob_);
}
//使用fileReader操作blob对象
var reader = {
readAs: function(type,blob,cb){
var r = new FileReader();
r.onloadend = function(){
if(typeof(cb) === 'function') {
cb.call(r,r.result);
}
}
try{
r['readAs'+type](blob);
}catch(e){}
}
}
function parseBlob(blob){
reader.readAs('ArrayBuffer',blob.slice(0,blob.size),function(arr){
var dataview_=new DataView(arr);
//协议中第二位是判断数据来源的
var socketConType=dataview_.getUint8(1);
//转成字符串读取数据
var modulelength=(dataview_.buffer.byteLength-46)/33;
var modulestate={};
reader.readAs('Text',blob.slice(i*33+37,i*33+37+32),function(result){
modulestate[dataview_.getUint8(i*33+36)]=result;
});
})
}将二进制数据转换为字符串后，即可进行后续的各种操作。
技术总结与替代方案
以上是我在项目实践中总结的 JavaScript 二进制数据操作方法。按位读取头部数据的过程相当繁琐。Google 开源的 protobuf 协议允许在定义数据格式后，自动处理所有读取操作，无需手动拼接，体验更为顺畅。不过，由于我不熟悉后端技术，只能跟随后端开发人员的方案进行适配。
以上就是 JavaScript 操作二进制数据方法的完整分享内容，希望能对读者有所帮助。欢迎大家参考，并支持本站。