js implements methods of operating binary data

Below I will share with you a js method for operating binary data, which has a good reference value. I hope it will be helpful to everyone.

I have recently done several projects, using js to operate binary data and transmit it through socket and background. Let me make a record here with a blog

First, create a new socket:

var socket=new WebSocket("ws://192.168.0.147");

Then define the function to be executed after opening the socket and connecting:

Websocket has an attribute binaryType, which can be set to "blob" or "arraybuffer". The default format is "blob". I forgot to set it to "arraybuffer" when I was working on the project. The result is when receiving data below You need to use a Blob object to access it.

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]        
}

The following is converted to bype and sent out:

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;
}

The sending process is roughly like this. First, create a new ArrayBuffer object, which needs to fill in the buffer length parameter. See the api for details==> https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx,

Then create a new DataView object and pass the ArrayBuffer in. Then use DataView's setUint and getUint methods to read and set bits. For details, refer to api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

The following is the processing of receiving data:

//接收消息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;
 　　});
 })
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of the loader mechanism of webpack source code

A brief introduction to the use of react redux middleware

js css to achieve typing effect

The above is the detailed content of js implements methods of operating binary data. For more information, please follow other related articles on the PHP Chinese website!