详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据


Posted in Javascript onNovember 11, 2018

最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题。后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱。借此发

我先直接贴正确接收二进制数据代码

const server = http.createServer((req, res) => {
    if(req.method==='OPTIONS'){
      res.setHeader("Access-Control-Allow-Origin", "*");
      res.statusCode=200;
    }
    if(req.method==='POST'){
     // 存储数组空间
     let msg=[];
     // 接收到数据消息
     req.on('data',(chunk)=>{
      if(chunk){
       msg.push(chunk);
      }
     })
     // 接收完毕
     req.on('end',()=>{
      // 对buffer数组阵列列表进行buffer合并返回一个Buffer
      let buf=Buffer.concat(msg);
      conosole.log(buf)//提取Buffer正确
     })         
}  
});
server.listen(3000,'127.0.0.1');

在nodejs中接收buffer数据需要以数组阵列的方式存储然后通过buffer.concat对数组阵列合并创建新的arraybuffer。这样就正确的接收二进制数据了。

示例二:

以后端传送threejs中的点阵数组为例:

后端:

let buffer = Buffer.alloc((points.length + 4) * 4)

//points.length + 4:预留前四个数字为其他信息(比如两个数字为一组,或者三个数字为一组)
 
//预留位置
buffer.writeFloatLE(1, 0)
buffer.writeFloatLE(2, 4)
buffer.writeFloatLE(3, 8)
buffer.writeFloatLE(4, 12)

//buffer前四个数为信息
//point数据从第16位开始写入
for (let i = 0, len = points.length; i < len; i++) {
buffer.writeFloatLE(points[i], i * 4 + 16)
}
res.send(buffer)

前端:

let pointXhr = new XMLHttpRequest()
pointXhr.onreadystatechange = function () {
var DONE = pointXhr.DONE || 4;

if (pointXhr.readyState === DONE) {


let buffer = pointXhr.response


let bufferArray = new Float32Array(buffer);


for (var i = 0; i < buffer.length; ++i) {



bufferArray[i] = buffer[i];


}


let pointsArray = bufferArray.slice(4)


let points = []


//pointsArray 点阵从第5个开始(前四个数为其他信息)


for (let i = 0, l = pointsArray.length / 3; i < l; i++) {



points.push({




x: pointsArray[i * 3],




y: pointsArray[i * 3 + 1],




z: pointsArray[i * 3 + 2]



})


}


callback(points)

}
}
pointXhr.open("POST",url,true);
pointXhr.responseType = 'arraybuffer';
pointXhr.send(null);

前端接收图片buffer

let imageXhr = new XMLHttpRequest()
imageXhr.onreadystatechange = function () {
var DONE = imageXhr.DONE || 4;

if (imageXhr.readyState === DONE) {


if (imageXhr.response) {



let bufferArray = imageXhr.response



let uint8Array = new Uint8Array(bufferArray);



for (var i = 0; i < bufferArray.length; ++i) {



uint8Array[i] = bufferArray[i];


}


callback(uint8Array)


}

}
}
imageXhr.open("POST",url,true);
imageXhr.responseType = 'arraybuffer';
imageXhr.send(null);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
python和C语言混合编程实例
2014/06/04 Python
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
2014年情人节活动方案
2014/02/16 职场文书
运动会广播稿150字
2014/02/19 职场文书
德语专业求职信
2014/03/12 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android