详解如何在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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
微信JS接口大全
Aug 25 Javascript
ajax异步请求详解
Jan 06 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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
php常用图片处理类
2016/03/16 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python类的专用方法实例分析
2015/01/09 Python
说一说Python logging
2016/04/15 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
django 模型字段设置默认值代码
2020/07/15 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python实现一个优先级队列的方法
2020/07/31 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
第二课堂活动总结
2014/05/07 职场文书
如何写求职信
2014/05/24 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
详解JS数组方法
2021/11/20 Javascript
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android