在前端开发中，经常需要在不刷新页面的情况下实时更新数据或者消息。为了实现这个功能，我们可以使用 Socket.io 库。Socket.io 是一个基于事件驱动的 JavaScript 库，它可以在客户端和服务器之间建立双向的通信。与 Ajax 和 XMLHttpRequest 相比，Socket.io 更加灵活和高效。
那么，如何通过 Socket.io 在 Express.js 中发送图片呢？下面我们来详细了解一下。
1. 安装 Socket.io
在使用 Socket.io 之前，我们需要先将其安装到项目中。可以使用 npm 命令在项目根目录中安装：
npm install socket.io
2. 创建 Socket.io 服务器
在 Express.js 中使用 Socket.io，需要创建 Socket.io 服务器。在项目的 app.js 文件中，引入 Socket.io 模块，并将其与 Express.js 应用程序绑定：
const express = require('express');
const app = express();
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer(app);
const io = socketIo(server);3. 通过 Socket.io 发送图片
在客户端发送图片时，我们需要将图片转换为 Blob 对象或者 ArrayBuffer 对象。然后，可以使用 emit() 方法向服务器发送这个对象。服务器可以通过 on() 方法接收这个对象，并转发给其他客户端。
下面是服务器端代码：
io.on('connection', (socket) => {
console.log('New client connected');
socket.on('image', (data) => {
console.log('image received');
// 当服务器接收到一张图片时，转发给其他客户端
socket.broadcast.emit('image', data);
});
});在客户端代码中，需要首先将图片转换为 Blob 对象或者 ArrayBuffer 对象。然后，使用 emit() 方法将图片数据发送到服务器：
-- -------------------- ---- -------
-- -------
----- ---- - --------------------------------
------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
-------------------------------
------------- - ------- -- -
----- ----------- - --------------------
-------------------- -------------
--
---当服务器接收到图片时，可以使用 FileReader 对象将 ArrayBuffer 对象转换为 Blob 对象，然后将其显示在客户端：
// 客户端接收图片
socket.on('image', (data) => {
const blob = new Blob([data]);
const image = document.createElement('img');
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);
});4. 示例代码
完整的示例代码如下：
-- -------------------- ---- -------
-- ----
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- -------- - ---------------------
----- ------ - -----------------------
----- -- - -----------------
------------------- -------- -- -
---------------- ------ ------------
------------------ ------ -- -
------------------ -----------
-- ---------------------
------------------------------ ------
---
---
------------------- -- -- -
---------------------- -- ---------
---
-- ---
----- ------ - ------------------------------------
-- -------
----- ---- - --------------------------------
------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
-------------------------------
------------- - ------- -- -
----- ----------- - --------------------
-------------------- -------------
--
---
-- -------
------------------ ------ -- -
----- ---- - --- -------------
----- ----- - ------------------------------
--------- - --------------------------
---------------------------------
---5. 总结
通过本文，我们了解了在 Express.js 中使用 Socket.io 发送图片的方法。在实际项目中，我们可以根据需要进行相应的改进，例如添加图片大小、图片格式等验证功能。Socket.io 可以在应用程序中实现实时的、双向的通信，为前端开发带来了更多可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648f467048841e9894d94534