WebSocket 是一种实时通信的协议，通过它可以在客户端和服务器之间建立持久性的连接，实现双向通信。在 Web 应用程序中，我们可以使用 WebSocket 在客户端和服务器之间传输各种类型的数据，包括文件。本文将介绍如何使用 Socket.io 实现 WebSocket 文件传输。
什么是 Socket.io
Socket.io 是一个基于 Node.js 框架的实时应用程序库，通过它可以轻松地实现 WebSocket 通信。它支持多个传输协议，包括 WebSocket、Flash Socket、AJAX 长轮询等，可以保证在不同的浏览器和操作系统中都能正常工作。
Socket.io 不仅支持实时通信，还提供了诸如房间、命名空间、广播等高级特性，使得实时应用程序的开发变得更加容易和灵活。
准备工作
在使用 Socket.io 实现文件传输之前，我们需要安装相关的库和组件，包括 Node.js、Socket.io、Express 等。
我们可以使用 npm 包管理器进行安装。依次执行以下命令：
npm install express --save npm install socket.io --save
实现文件传输
接下来，我们将实现一个简单的文件传输应用程序，使用 Socket.io 进行 WebSocket 通信。该应用程序的功能如下：
- 服务端监听客户端的连接；
- 客户端选择要上传的文件，并将文件传输到服务端；
- 服务端接收文件，并将其保存到本地磁盘；
- 服务端将上传状态和上传后的文件名发送给客户端；
- 客户端接收到上传状态和文件名，并进行相应的处理。
服务端实现
服务端主要负责监听客户端的连接，接收并处理客户端上传的文件。
首先，我们需要在服务器端创建一个 Express 应用程序，并在该应用程序中启用 Socket.io。
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);然后，我们需要设置一个路由，当客户端请求访问该路由时，返回一个上传文件的页面。
app.get('/upload', (req, res) => {
res.send(`
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file"/>
<input type="submit" value="上传"/>
</form>
`);
});当客户端上传文件时，服务端需要接收文件、保存文件，并向客户端发送上传状态和文件名。为此，我们需要使用 Socket.io 进行 WebSocket 通信。当客户端连接到服务器时，服务端需要注册一个新的事件处理程序，用于处理客户端上传的文件。
-- -------------------- ---- -------
------------------- ------ -- -
------------------- ------------
-- ---- ------
------------------------ ---- -- -
----------------- -------- ------
----- ---- - ----------
----- -------- - ----------
----- -------- - ----------------------
-- ---- ----
----- ------ - -------------------------------
----------------- -- -- -
-----------------------
------------------- -- -- -
-------------
----------------- ------- ----------
-- ---- ------ -- ------
--------------------------------- -
-------- -----
--------- --------
---
---
---
---
---在事件处理程序中，我们获取客户端上传的文件，并将其保存到本地磁盘。使用 Socket.io，我们可以向客户端发送一个包含上传文件状态和文件名的消息。
客户端实现
客户端主要负责上传文件、接收服务端发送的消息，并进行相应的处理。
在客户端我们需要创建一个 HTML 页面，包含一个上传文件的表单。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- - -----------------
-------
------
------------- ---------
----- -----------------
------ ----------- -----------------
------- -------------------------
-------
---- ------------------
------- ---------------------------------------
--------
----- ------ - -----
----- ---- - ---------------------------------------
----- ----- - --------------------------------------
----- ------ - ----------------------------------
------------- - ----------- -
-------------------
----- ---- - ---------------
----- ------ - --- -------------
---------------- - ---------- -
----------------- -------- ------
-- ---- ---- ------ -----
-------------------------- -
----- -
----- ----------
----- -------------
-
---
--
-------------------------------
--
------------------------------- ---- -- -
----------------- ------ -------- ------
-- -------------- -
---------------- - -----------------------------------
- ---- -
---------------- - --------------
-
---
---------
-------
-------在页面加载完成后，客户端需要连接到服务器。
const socket = io();
当用户选择要上传的文件并单击“上传”按钮时，客户端需要读取文件内容，并使用 Socket.io 向服务器发送一个包含上传文件数据的消息。
-- -------------------- ---- -------
------------- - ----------- -
-------------------
----- ---- - ---------------
----- ------ - --- -------------
---------------- - ---------- -
----------------- -------- ------
-- ---- ---- ------ -----
-------------------------- -
----- -
----- ----------
----- -------------
-
---
--
-------------------------------
--当服务器发送一个包含上传结果的消息时，客户端需要进行相应的处理，例如在页面上显示上传状态和文件名。
socket.on('file-upload-result', data => {
console.log('file upload result', data);
if (data.success) {
result.innerHTML = `<p>上传成功，文件名：${data.filename}</p>`;
} else {
result.innerHTML = `<p>上传失败</p>`;
}
});总结
在本文中，我们介绍了如何使用 Socket.io 实现文件传输，并提供了相关的示例代码。通过这种方式，我们可以以一种简单、快速和灵活的方式，在客户端和服务器之间传输各种类型的数据。这对于实时应用程序的开发非常有帮助，例如在线文档、协同编辑、在线游戏等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d319695b1f8cacd4b76e9