最近做了几个项目，用js操作二进制数据，通过socket与后台进行传输。在此用博客做个记录
首先是新建一个socket：
1 var socket=new WebSocket("ws://192.168.0.147");接着定义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] ?????????????????????????????}下面是转成bype发送出去：
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;}发送的流程大概就是这样，先new ArrayBuffer对象，该对象需要填入缓冲区长度参数，具体查看api==> https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx，
然后新建DataView对象，将ArrayBuffer传进去。然后用DataView的setUint和getUint方法按位进行读取设置，具体参考api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx
下面是接收数据处理:
1 //接收消息onmessage 2 socket.onmessage=function(data){ 3 ????????var blob_=new Blob([data.data]); 4 ????????parseBlob(blob_); 5 ????} 6 //使用fileReader操作blob对象 7 var reader = { ?8 ????readAs: function(type,blob,cb){ 9 ????????var r = new FileReader();10 ????????r.onloadend = function(){11 ??????????????if(typeof(cb) === ‘function‘) {12 ????????????????cb.call(r,r.result);13 ??????????????}14 ????????}15 ????????try{16 ??????????????r[‘readAs‘+type](blob);17 ????????}catch(e){}18 ??????}19 }20 function parseBlob(blob){21 ???reader.readAs(‘ArrayBuffer‘,blob.slice(0,blob.size),function(arr){22 ??? var dataview_=new DataView(arr);23 ??? //协议中第二位是判断数据来源的24 ??? var socketConType=dataview_.getUint8(1);25 ??? //转成字符串读取数据26 ??? var modulelength=(dataview_.buffer.byteLength-46)/33;27 ??? var modulestate={};28 ? reader.readAs(‘Text‘,blob.slice(i*33+37,i*33+37+32),function(result){29 ?????? modulestate[dataview_.getUint8(i*33+36)]=result;30 ??? });31 ???})32 }转成字符串之后就可以为所欲为了。
以上就是我做项目时用到的操作二进制数据的方法，按位读取头都要炸了······google开源的protobuf能够设置完数据格式之后，所有读取操作都不用自己拼接了，非常舒服。不过不懂后台技术，我只能跟在后台大佬后面吃馍渣 TnT
第一次写博客，希望各位能多指导交流
js操作二进制数据
原文地址：https://www.cnblogs.com/xianghuali/p/8494720.html