Summary of js methods for operating binary data

This time I will bring you a summary of the methods of operating binary data in js. What are the precautions for operating binary data in js? Here are practical cases, let’s take a look.

I have recently done several projects, using js to manipulate binary data and transmit it through sockets and the background. Use a blog to record this

First create a new socket:

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

Then define the function to be executed after the socket is opened and connected:

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. As a result, I need to use the Blob object when receiving data below. To pick.

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 bypass and sent:

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. The buffer length parameter needs to be filled in for this object. For details, see api==>

https://msdn.microsoft.com/zh-cn/library /br212474(v=vs.94).aspx，

Then create a new DataView object and pass the ArrayBuffer into it. 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;
   });
 })
}

After converting it to a string, you can do whatever you want.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What are the techniques for Vue component development

##@HostBinding() and @HostListener() in AngularJS The difference in usage

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