详解如何在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使用eval或者new Function进行语法检查
Oct 16 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
详解es6超好用的语法糖Decorator
Aug 01 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
二级域名转向类
2006/11/09 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
python发送伪造的arp请求
2014/01/09 Python
java直接调用python脚本的例子
2014/02/16 Python
python实现决策树分类算法
2017/12/21 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
一套C#面试题
2013/10/09 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
机电一体化大学生求职信
2013/11/08 职场文书
党课培训主持词
2014/04/01 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
体育口号大全
2014/06/18 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
MySQL主从切换的超详细步骤
2022/06/28 MySQL