下面我就为大家分享一篇js操作二进制数据方法，具有很好的参考价值，希望对的大家有所帮助。
最近做了几个项目，用js操作二进制数据，通过socket与后台进行传输。在此用博客做个记录
首先是新建一个socket：
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 ArrayBuffer30);
var loginDataview=new DataViewloginBuffer);
//localstorageuserinfo为缓存在本地的用户手机号
var telArr=localstorageuserinfo.TelPhone;
var loginTime=tempTrans);
forvar i=0;i<loginArr.length;){
loginDataview.setInt8i,loginArr[i]);
ifi>3&&i<telArr.length+4)){
loginDataview.setInt8i,telArr.charCodeAti-4));
}
ifi>19&&i<loginArr.length-2){
loginDataview.setInt8i,loginTime[i-20]);
}
i++;
}
//登录包
socket.sendloginDataview.buffer);
//格式化时间同时按照年俩位月日时分秒1位由高到底排序
function tempTranstime){
if!time){
time=new Date);
}
var u32Dataview=new DataViewnew Uint16Array[time.getFullYear)]).buffer);
var uint8=[];
uint8.pushnew DataViewnew Uint8Array[0X00]).buffer).getUint80))
forvar i=u32Dataview.byteLength-1;i>=0;i--){
uint8.pushu32Dataview.getUint8i))
}
uint8.pushnew DataViewnew Uint8Array[time.getMonth)+1]).buffer).getUint80));
uint8.pushnew DataViewnew Uint8Array[time.getDate)]).buffer).getUint80));
uint8.pushnew DataViewnew Uint8Array[time.getHours)]).buffer).getUint80));
uint8.pushnew DataViewnew Uint8Array[time.getMinutes)]).buffer).getUint80));
uint8.pushnew DataViewnew Uint8Array[time.getSeconds)]).buffer).getUint80));
return uint8;
}
发送的流程大概就是这样，先new ArrayBuffer对象，该对象需要填入缓冲区长度参数，具体查看api==> https://msdn.microsoft.com/zh-cn/library/br212474v=vs.94).aspx，
然后新建DataView对象，将ArrayBuffer传进去。然后用DataView的setUint和getUint方法按位进行读取设置，具体参考api==> https://msdn.microsoft.com/zh-cn/library/br212463v=vs.94).aspx
下面是接收数据处理：
//接收消息onmessage
socket.onmessage=functiondata){
var blob_=new Blob[data.data]);
parseBlobblob_);
}
//使用fileReader操作blob对象
var reader = {
readAs: functiontype,blob,cb){
var r = new FileReader);
r.onloadend = function){
iftypeofcb) === 'function') {
cb.callr,r.result);
}
}
try{
r['readAs'+type]blob);
}catche){}
}
}
function parseBlobblob){
reader.readAs'ArrayBuffer',blob.slice0,blob.size),functionarr){
var dataview_=new DataViewarr);
//协议中第二位是判断数据来源的
var socketConType=dataview_.getUint81);
//转成字符串读取数据
var modulelength=dataview_.buffer.byteLength-46)/33;
var modulestate={};
reader.readAs'Text',blob.slicei*33+37,i*33+37+32),functionresult){
modulestate[dataview_.getUint8i*33+36)]=result;
});
})
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
webpack源码之loader机制详解
简单介绍react redux的中间件的使用
js+css实现打字效果
以上就是js实现操作二进制数据方法的详细内容，更多请关注风君子博客其它相关文章！