這次帶給大家js操作二進位資料方法總結，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 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
下面是接收資料處理：
//接收消息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;
});
})
}轉成字串之後就可以為所欲為為了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
AngularJS中@HostBinding()和@HostListener()的使用區別
以上是js操作二進位資料方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
