最近使用了protobuf進行數(shù)據(jù)交互，發(fā)送在node.js接收前端的二進制數(shù)據(jù)出現(xiàn)了數(shù)據(jù)錯誤等問題。后來發(fā)現(xiàn)思路上面的問題，在req.on('data',()=>{})事件中的處理不適當(dāng)才引發(fā)數(shù)據(jù)錯亂。借此發(fā)
我先直接貼正確接收二進制數(shù)據(jù)代碼
const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin", "*"); res.statusCode=200; } if(req.method==='POST'){ // 存儲數(shù)組空間 let msg=[]; // 接收到數(shù)據(jù)消息 req.on('data',(chunk)=>{ if(chunk){ msg.push(chunk); } }) // 接收完畢 req.on('end',()=>{ // 對buffer數(shù)組陣列列表進行buffer合并返回一個Buffer let buf=Buffer.concat(msg); conosole.log(buf)//提取Buffer正確 }) } });server.listen(3000,'127.0.0.1');在nodejs中接收buffer數(shù)據(jù)需要以數(shù)組陣列的方式存儲然后通過buffer.concat對數(shù)組陣列合并創(chuàng)建新的arraybuffer。這樣就正確的接收二進制數(shù)據(jù)了。
示例二：
以后端傳送threejs中的點陣數(shù)組為例:
后端:
let buffer = Buffer.alloc((points.length + 4) * 4)//points.length + 4:預(yù)留前四個數(shù)字為其他信息(比如兩個數(shù)字為一組,或者三個數(shù)字為一組) //預(yù)留位置buffer.writeFloatLE(1, 0)buffer.writeFloatLE(2, 4)buffer.writeFloatLE(3, 8)buffer.writeFloatLE(4, 12)//buffer前四個數(shù)為信息//point數(shù)據(jù)從第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個開始(前四個數(shù)為其他信息) 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);以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
