Comment manipuler directement des données binaires en js-Tutoriel H5-php.cn

Comment manipuler directement des données binaires en js

php中世界最好的语言

Libérer： 2018-03-27 16:59:44

original

1760 Les gens l'ont consulté

Cette fois, je vais vous montrer comment exploiter directement des données binaires avec js. Quelles sont les précautions pour que js exploite directement des données binaires. Ce qui suit est un cas pratique, jetons un coup d'œil.

Créez d'abord un nouveau socket :

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

Copier après la connexion

Puis définissez la fonction à exécuter après ouverture du socket et connexion :

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. , je dois 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]        
}

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 consulter api ==> 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).aspxCe qui suit est le traitement de la réception des données :

Après l'avoir convertie 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 !

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

Copier après la connexion

Lecture recommandée :

L'application Web implémente l'actualisation de la force arrière

Comment utiliser le générateur automatique dans ionic2

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!