phpsocket_sendto技巧_极速指南WebSocket 的二进制数据发送技巧

文章目录 [+]

const socket = new WebSocket('ws://example.com');socket.addEventListener('open', () => { const arrayBuffer = new ArrayBuffer(4); const dataView = new DataView(arrayBuffer); dataView.setInt32(0, 42); socket.send(arrayBuffer);});socket.addEventListener('message', (event) => { const convertedData = new Uint8Array(event.data); console.log(convertedData);});利用Blob工具发送

此方法通过封装成Blob工具来传输数据，同时许可指定类型。

const socket = new WebSocket('ws://example.com');socket.addEventListener('open', () => { const binaryBlob = new Blob(['Binary content'], { type: 'application/octet-stream' }); socket.send(binaryBlob);});仅发送ArrayBuffer的一部分

利用ArrayBufferView可以选择性地发送数据的一部分。

phpsocket_sendto技巧_极速指南WebSocket 的二进制数据发送技巧

const socket = new WebSocket('ws://example.com');socket.addEventListener('open', () => { const buffer = new ArrayBuffer(4); const view = new DataView(buffer); view.setInt32(0, 42); socket.send(view.slice(0, 2)); // 仅发送前两个字节});三、案例剖析：实时二进制数据的WebSocket通信

接下来透过一个实际的例子，探索WebSocket如何传输ArrayBuffer数据。
案例中包含创建一个大略单纯的WebSocket做事器和客户端，做事器将会吸收来自客户真个二进制数据。

phpsocket_sendto技巧_极速指南WebSocket 的二进制数据发送技巧

（图片来自网络侵删）

建立一个WebSocket做事器

利用 Node.js 环境的ws库可快速实行此操作。

npm install ws

然后建立server.js：

你可以通过创建一个大略的Web页面来充当客户端，并连接至你的做事器。

<!DOCTYPE html><html><head><title>WebSocket Binary Test</title></head><body><script> const socket = new WebSocket('ws://localhost:3000'); socket.addEventListener('open', () => { console.log('Connection established'); sendBinaryData(); }); socket.addEventListener('close', () => { console.log('Disconnected'); }); function sendBinaryData() { const arrayBuffer = new ArrayBuffer(4); const view = new DataView(arrayBuffer); view.setInt32(0, 42); socket.send(arrayBuffer); }</script></body></html>

如果你嫌用 html 建一个客户端过于麻烦，可以利用 Apifox 临时创建一个。

先是建立新的 HTTP 项目，接着把 WebSocket 端点添加到项目中。

接下来，连入做事，比如 ws://localhost:3000，然后就可以发送信息。

运行案例

开启做事端：

node server.js

在Web浏览器中打开客户端页面，或是透过在线工具如Apifox来连接WebSocket做事。

通过这些步骤，即可在客户端和做事器之间建立实时通讯链路，通报并吸收二进制数据。

四、最佳实践小贴士确保客户端和做事器端利用兼容的数据格式。
为节省宽带，考虑压缩数据。
利用传输加密来保护数据安全。
五、结论

本文展现了WebSocket如何有效地利用二进制数据进行通信。
我们通过观点阐明，实际案例和最佳实践来全方位地先容了该技能，帮助你充分利用WebSocket的强大能力。

参考链接MDN Web Docs - WebSocketMDN Web Docs - ArrayBuffer

学习更多：