首頁 > web前端 > js教程 > js實作操作二進位資料方法

js實作操作二進位資料方法

亚连
發布: 2018-06-01 16:27:51
原創
2107 人瀏覽過

下面我就為大家分享一篇js操作二進位資料方法,具有很好的參考價值,希望對的大家有幫助。

最近做了幾個項目,用js操作二進位數據,透過socket與後台進行傳輸。在此用博客做個記錄

首先是新建一個socket:

var socket=new WebSocket("ws://192.168.0.147");
登入後複製

接著定義socket打開,連接之後執行的函數:

websocket有個屬性binaryType,可將其設為“blob”或“arraybuffer”,預設格式為“blob”,做專案的時候忘記設定為“arraybuffer”了,結果在下面接收資料的時候就需要用Blob對象來接。

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]        
}
登入後複製

下面是轉成bype發送出去:

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;
}
登入後複製

發送的流程大概就是這樣,先new ArrayBuffer對象,該對象需要填入緩衝區長度參數,具體查看api==> https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx,

然後新建DataView對象,將ArrayBuffer傳進去。然後用DataView的setUint和getUint方法按位進行讀取設置,具體參考api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

下面是接收資料處理:

//接收消息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;
   });
 })
}
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

webpack源碼之loader機制詳解

#簡單介紹react redux的中間件的使用

#js css實作打字效果

以上是js實作操作二進位資料方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板