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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Django自定义认证方式用法示例
2017/06/23 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
新员工入职感言
2014/02/01 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
清明扫墓感想
2015/08/11 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js