집 > 기사 > 웹 프론트엔드 > js가 바이너리 데이터를 작동하는 방법

js가 바이너리 데이터를 작동하는 방법

小云云원래의: 2018-03-05 09:27:391722검색

저는 최근 js를 사용하여 바이너리 데이터를 조작하고 소켓과 백그라운드를 통해 전송하는 여러 프로젝트를 수행했습니다. 이 기사는 주로 js에서 바이너리 데이터를 조작하는 방법을 공유합니다. 도움이 되기를 바랍니다.

먼저 새 소켓을 만듭니다.

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

그런 다음 소켓을 열고 연결한 후 실행할 함수를 정의합니다.

websocket에는 "blob" 또는 "arraybuffer"로 설정할 수 있는 BinaryType 속성이 있습니다. 프로젝트 작업 시 "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;
}

전송 프로세스는 대략 다음과 같습니다. 먼저 버퍼 길이 매개변수를 채워야 하는 새 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) === '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;
 　　});
 })
}

문자열로 변환한 후 원하는 작업을 수행할 수 있습니다.

js가 바이너리 데이터를 작동하는 방법

관련 기사