Zusammenfassung der js-Methoden zum Bearbeiten von Binärdaten

Dieses Mal werde ich Ihnen eine Zusammenfassung der Methoden zur Verarbeitung von Binärdaten in JS geben. Was sind die Vorsichtsmaßnahmen für die Verarbeitung von Binärdaten in JS? Hier sind praktische Fälle.

Ich habe kürzlich mehrere Projekte durchgeführt, bei denen ich js verwendet habe, um Binärdaten zu manipulieren und über Sockets und den Hintergrund zu übertragen. Nutzen Sie den Blog, um es hier aufzuzeichnen

Erstellen Sie zunächst einen neuen Socket:

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

Definieren Sie dann die Funktion, die ausgeführt werden soll, nachdem der Socket geöffnet und verbunden wurde:

Websocket verfügt über ein Attribut „binaryType“, das auf „blob“ oder „arraybuffer“ gesetzt werden kann. Ich habe vergessen, es auf „blob“ zu setzen, als ich an dem Projekt arbeitete Um das Blob-Objekt beim Empfangen von Daten zu verwenden, holen Sie mich ab.

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

Folgendes wird in Bype umgewandelt und gesendet:

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

Der Sendevorgang sieht ungefähr so ​​aus: Erstellen Sie zunächst ein neues ArrayBuffer-Objekt. Weitere Informationen finden Sie unter https://msdn. com/zh-cn/library /br212474(v=vs.94).aspx，

Erstellen Sie dann ein neues DataView-Objekt und übergeben Sie den ArrayBuffer daran. Verwenden Sie dann die Methoden setUint und getUint von DataView, um Bits zu lesen und festzulegen. Weitere Informationen finden Sie unter api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

Das Folgende ist die Empfangsdatenverarbeitung:

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

Nachdem Sie es in einen String konvertiert haben, können Sie tun, was Sie wollen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Was sind die Tipps für die Vue-Komponentenentwicklung

@HostBinding() und @HostListener() in AngularJS Der Unterschied in der Verwendung

Das obige ist der detaillierte Inhalt vonZusammenfassung der js-Methoden zum Bearbeiten von Binärdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!