详解如何在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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
基于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
第五节 克隆 [5]
2006/10/09 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
js正则相关知识点专题
2018/05/10 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
英国计算机商店:Technextday
2019/12/28 全球购物
中英文自我评价语句
2013/12/20 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
心理健康日活动总结
2014/05/08 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL