How to directly manipulate binary data in js-H5 Tutorial-php.cn

This time I will show you how js can directly operate binary data. What are theprecautionsfor js to directly operate binary data. The following is a practical case, let's take a look.

First create a new socket:

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

Copy after login

Then define the function to be executed after opening the socket and connecting:

websocket has A property binaryType, which can be set to "blob" or "arraybuffer". The default format is "blob". I forgot to set it to "arraybuffer" when I was working on the project. As a result, when receiving data below, I need to use the Blob object to receive it. .

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

Copy after login

The following is converted to bype and sent out:

var loginBuffer=new ArrayBuffer(30); var loginDataview=new DataView(loginBuffer); //localstorageuserinfo为缓存在本地的用户手机号 var telArr=localstorageuserinfo.TelPhone; var loginTime=tempTrans(); for(var i=0;i3&&i<(telArr.length+4)){ loginDataview.setInt8(i,telArr.charCodeAt(i-4)); } if(i>19&&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; }

Copy after login

The sending process is roughly like this. First, create a new ArrayBuffer object, which needs to fill in the buffer length parameter. See the api in detail==>https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx,

Then create a new DataView object , pass the ArrayBuffer in. Then use DataView's setUint and getUint methods to read and set bits. For details, refer to api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

The following is the processing of receiving data:

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

Copy after login

After converting it into a string, you can do whatever you want.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!