在现代化的网页开发中，实时通信已经成为非常重要的技术。而 Socket.io 是一个非常流行的实现实时通信的库。它支持多种数据类型，包括文本数据和二进制数据。本文将介绍如何在 Socket.io 中发送图片、文件等二进制数据的实时通信。
为什么需要发送二进制数据
在实时通信中，我们常常需要发送一些不是文本格式的数据，例如图片、音频、视频等。这些数据在传输过程中并不能直接作为文本来传递，因为它们通常很大，而且需要特定的格式进行处理。
为了实现这些数据的实时传输，我们需要使用二进制数据。二进制数据具有以下优点：
- 可以传输大量数据，节约传输时间和带宽；
- 可以直接以二进制格式表示原始数据，无需进行特殊处理；
- 可以以多种格式表示不同类型的数据，例如图像、音频、视频等。
如何发送二进制数据
在 Socket.io 中发送二进制数据非常简单。我们只需要在发送数据时指定数据格式，而在接收数据时对数据类型进行解析即可。以下是一个简单的例子：
// javascriptcn.com 代码示例
// 客户端代码
var socket = io();
// 发送图片
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
socket.emit('image', e.target.result);
}
reader.readAsArrayBuffer(file);
});
// 接收图片
socket.on('image', function(data) {
var arrayBuffer = new Uint8Array(data).buffer;
var blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
});
// 服务器端代码
var io = require('socket.io')(http);
io.on('connection', function(socket) {
socket.on('image', function(data) {
io.emit('image', data);
});
});在上面的例子中，我们通过 FileReader 对象将图片文件的二进制数据读入到内存中，并使用 emit 方法发送给服务器端。在接收数据时，我们使用 Uint8Array 对象将数据转换为一个包含字节的数组，然后将其转换为 Blob 对象，最后将 Blob 对象转换为 img 元素并添加到页面中。
在服务器端，我们使用 emit 方法将接收到的数据发送给所有连接的客户端。这里的代码非常简单，只需要将接收到的数据再次封装为一个事件，然后使用 io.emit 方法广播给所有连接的客户端即可。
总结
本文介绍了如何在 Socket.io 中发送图片、文件等二进制数据的实时通信。我们可以通过 FileReader 对象将二进制数据读入到内存中，并使用 emit 方法发送给服务器端；在接收数据时，我们可以使用 Uint8Array 对象将数据转换为一个包含字节的数组，然后将其转换为 Blob 对象，最后将 Blob 对象转换为各种格式的数据。
在实际使用中，我们可以将上面的代码扩展为支持各种格式的数据，例如音频、视频等，以满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bd1147d4982a6ebdac549