Maison > interface Web > js tutoriel > js implémente des méthodes d'exploitation des données binaires

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

亚连
Libérer: 2018-06-01 16:27:51
original
2100 Les gens l'ont consulté

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");
Copier après la connexion

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]        
}
Copier après la connexion

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;
}
Copier après la connexion

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) === &#39;function&#39;) {
    cb.call(r,r.result);
    }
  }
  try{
    r[&#39;readAs&#39;+type](blob);
  }catch(e){}
  }
}
function parseBlob(blob){
 reader.readAs(&#39;ArrayBuffer&#39;,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(&#39;Text&#39;,blob.slice(i*33+37,i*33+37+32),function(result){
    modulestate[dataview_.getUint8(i*33+36)]=result;
   });
 })
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal