• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > js怎样直接操作二进制数据

js怎样直接操作二进制数据

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含javascript,二进制,数据等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来js怎样直接操作二进制数据,js直接操作二进制数据的注意事项有哪些,下面就是实战案例,一起来看一下。

首先是新建一个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;
   });
 })
}

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

相信看了本文案例你已经掌握了方法,更多精彩请关注微课江湖其它相关文章!

推荐阅读:

web端的应用实现后退强制刷新

ionic2中怎么使用自动生成器

以上就是js怎样直接操作二进制数据的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • Javascript 高级手势使用介绍
  • svg和css3实现环形渐变进度条的代码示例
  • 用exfe.js和canvas解决移动端 IOS 拍照上传图片翻转问题(附代码)
  • Canvas跨域的解决方案介绍
  • canvas实现图片涂鸦功能(附代码)
  • 用canvas实现简单的下雪效果(附代码)
  • HTML5中一些可以优化的细节介绍
  • HTML5 WebSQL四种基本操作的介绍
  • HTML5和原生app如何进行交互?

相关文章

  • 2018-12-03HTML5中的section标签是什么?HTML5中的section标签怎么居中?
  • 2018-12-03详细介绍基于HTML5 的WebGL技术构建3D场景的图文代码(一)
  • 2018-12-03 jquery 遍历parent()方法
  • 2018-12-03分享HTML5中10个经典的动画工具
  • 2018-12-03怎样制作单页网站?国外优秀案例给你灵感
  • 2018-12-03H5 canvas实现圆形动态加载进度实例
  • 2017-08-06html5 viewport使用方法示例详解
  • 2017-08-06利用HTML5 Canvas API绘制矩形的超级攻略
  • 2017-08-06网易微博Web App用HTML5开发的过程介绍
  • 2017-08-06HTML5拖放效果的实现代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 利用Jquery使用HTML5的FormData属性实现文件上传
    • h5 canvas实现粒子时钟的详细方法
    • 详解HTML5移动端音频与视频问题及解决方案
    • HTML5中meta属性的使用代码示例详解
    • 移动端H5页面实现生成图片的代码
    • 配置H5的滚动条样式
    • canvas的实例--时钟动画
    • html5 Canvas画图教程(5)—canvas里画曲线之arc方法
    • HTML5 组件Canvas实现电子钟的图文代码详情介绍
    • html5 WebWorkers防止浏览器假死的示例代码分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有