js implémente des méthodes d'exploitation des données binaires

Maintenant, je vais partager avec vous une méthode js pour exploiter les données binaires. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

J'ai récemment réalisé plusieurs projets, utilisant js pour manipuler des données binaires et les transmettre via des sockets et l'arrière-plan. Permettez-moi de faire un enregistrement ici avec un blog

Tout d'abord, créez un nouveau socket :

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

Puis définissez 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". " lorsque je travaillais sur le projet. Le résultat est que les données sont reçues ci-dessous lorsque vous devez utiliser l'objet Blob pour les recevoir.

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 est à peu près comme ceci. Tout d'abord, le nouvel objet ArrayBuffer doit être. rempli le paramètre de longueur de zone tampon, veuillez vérifier api==> pour plus de détails. ArrayBuffer est transmis. 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

Ce qui suit est le traitement de la réception des données :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

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

Articles connexes :

Explication détaillée du mécanisme de chargement du code source du webpack

Une brève introduction à l'utilisation du middleware React Redux

js+css pour obtenir un effet de frappe

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!