js implementiert Methoden zum Bearbeiten von Binärdaten

Jetzt werde ich Ihnen eine js-Methode zum Betrieb von Binärdaten vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Ich habe kürzlich mehrere Projekte durchgeführt, bei denen ich js verwendet habe, um Binärdaten zu manipulieren und sie über Sockets und den Hintergrund zu übertragen. Lassen Sie mich hier einen Eintrag mit einem Blog erstellen

Erstellen Sie zunächst einen neuen Socket:

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

Definieren Sie dann die Funktion, die nach dem Öffnen ausgeführt werden soll Der Socket und die Verbindung:

Websocket hat ein Binärtyp-Attribut, das auf „blob“ oder „arraybuffer“ gesetzt werden kann. Ich habe vergessen, es auf „arraybuffer“ zu setzen Wenn Sie an dem Projekt arbeiten, müssen Sie beim Empfang der folgenden Daten ein Blob-Objekt verwenden, um darauf zuzugreifen.

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

Das Folgende wird in bype konvertiert 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, das ausgefüllt werden muss den Pufferlängenparameter. Weitere Informationen finden Sie in der API ==> https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx,

Erstellen Sie dann einen neuen 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 Verarbeitung der Empfangsdaten:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung des Lademechanismus des Webpack-Quellcodes

Eine kurze Einführung in die Verwendung der React-Redux-Middleware

js+css, um einen Tippeffekt zu erzielen

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