js操作二进制数据方法


Posted in Javascript onMarch 03, 2018

最近做了几个项目,用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) === '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;
 
});
 })
}

转成字符串之后就可以为所欲为了。

以上就是我做项目时用到的操作二进制数据的方法,按位读取头都要炸了······google开源的protobuf能够设置完数据格式之后,所有读取操作都不用自己拼接了,非常舒服。不过不懂后台技术,我只能跟在后台大佬后面吃馍渣 TnT

这篇js操作二进制数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
js 异步处理进度条
Apr 01 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery的文档处理程序详解
May 10 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
You might like
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
3种php生成唯一id的方法
2015/11/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python基于http下载视频或音频
2018/06/20 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
生产管理的三大手法
2013/11/11 职场文书
工程招投标邀请书
2014/01/30 职场文书
初三学生个人自我评定
2014/04/06 职场文书
求职自我推荐信
2014/06/25 职场文书
同意报考证明
2015/06/17 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技