Résumé des méthodes js pour exploiter les données binaires

Cette fois je vais vous apporter un résumé des méthodes d'exploitation des données binaires en JS Quelles sont les précautions pour l'exploitation des données binaires en JS Voici des cas pratiques, jetons un coup d'œil.

J'ai récemment réalisé plusieurs projets, utilisant js pour manipuler des données binaires et les transmettre via des sockets et en arrière-plan. Utilisez le blog pour l'enregistrer ici

Créez d'abord une nouvelle socket :

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

Définissez ensuite la fonction à exécuter une fois le socket ouvert et connecté :

Websocket a un attribut binaireType, qui peut être défini sur "blob" ou "arraybuffer". Le format par défaut est "blob". J'ai oublié de le définir sur "arraybuffer" lorsque je travaillais sur le projet. pour utiliser l'objet Blob lors de la réception des données ci-dessous.

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

Ce qui suit est converti en bype et envoyé :

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

Le processus d'envoi ressemble à ceci. Tout d'abord, créez un nouvel objet ArrayBuffer, qui doit remplir le paramètre de longueur du tampon. Pour plus de détails, consultez https://msdn.microsoft.com. /zh-cn/library /br212474(v=vs.94).aspx，

Créez ensuite un nouvel objet DataView et transmettez-y l'ArrayBuffer. Utilisez ensuite les méthodes setUint et getUint de DataView pour lire et définir les bits. Pour plus de détails, reportez-vous à api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

Voici le traitement des données de réception :

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

Après l'avoir converti en chaîne, vous pouvez faire ce que vous voulez.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quels sont les conseils pour le développement de composants Vue

@HostBinding() et @HostListener() dans AngularJS La différence d'utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!