在现代网络程序中，文件传输是一项非常重要的任务。当需要在客户端和服务器之间传递大量的数据时，传统的 HTTP 协议可能会受到限制，因为它通常是基于请求/响应模型的，每个请求只能在收到响应后才能完成。此时，Socket.io 就成为了一种比较好的选择。Socket.io 是一个基于事件的实时网络库，它可以使 Web 应用程序能够进行双向通信，包括实时数据传输，聊天应用程序等等。
在本篇文章中，我们将探讨如何使用 Socket.io 完成简单的文件传输，包括以下几个环节：
- 创建一个基础的文件传输应用程序
- 将传输的文件切片以便于传输
- 实现完整的文件传输过程
创建一个基础的文件传输应用程序
首先，我们需要创建一个简单的 Node.js 服务端应用程序，以将客户端上传的文件保存在本地磁盘上。可以使用 Express 框架来快速创建和启动我们的服务端。
-- -------------------- ---- -------
-- --------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
----- -- - --------------
----- ---- - ----------------
----- ---- - ---------------- -- -----
------------------------------------------- ------------
------------ ----- ---- -- -
--------------------------------- ----------------------
---
------------------- -------- -- -
-------------- ---- ------------
-- ---- -- ------ ---- ------
------------------- ------ -- -
----- - ----- ---- - - -----
-- -------- - ------ ---- ---- ---- ---------
----- ---------- - ------------------------
-- ------ - ------ -- ---- ----
----- ------ - ----------------------------------------------
-- ---- -- ------ ---- ------
--- ------ - --
------------------ ------- -- -
------ -- -------------
--------------------
-- ---- -- ------ --------
----- -------- - ------------------ - ----- - -----
----------------------- ----------
---
---------------- -- -- -
-------------
----------------- ------------- --- ---- ---------
---
---
---
----------------- -- -- -
------------------- -- ------- -- ---- -----------
---
以上是服务端的核心代码。我们可以将它放到 index.js 文件中，并在终端中使用 node index.js 命令运行。
同时，我们还需要创建一个 public 文件夹来存放客户端代码和静态文件。接下来，我们将在 public 目录下创建一个名为 index.html 的文件，并加入以下内容：
-- -------------------- ---- -------
---- ----------------- ---
--------- -----
------
------
----------- -------- ---- -----------------
-------
------
---- -----------------
----- ----------
------ ----------- ----------------
------- ------------- -------------------------------
-------
--------- ----------------- --------- ---------------------
------
------- -----------------------------------------------------------------------------------
--------
----- ------ - -----
----- ---- - --------------------------------
----- --------- - --------------------------------------
----- --------- - --------------------------------------
----- ----------- - ----------------------------------------
------------------------------- --- -- -
-------------------
----- ---- - -------------------
-- ------- -
------ ------------- ------ - ---- -- ----------
-
----- ---- - ----------
----- ---- - ----------
--------------------- - ----- ---- ---
----- ---------- - -- - -----
----- ------ - --- -------------
--- -------- - --
------------- - --- -- -
-------------------- -----------------
-- --------- - ---------- - ---------- -
-------- -- -----------
----- ---- - -------------------- -------- - ------------
-------------------------------
- ---- -
-------------------
-
--
-------------------------------
---
--------------------- ---------- -- -
----------------- - ---------
---
---------
-------
-------
上述代码使用了 HTML5 中的新特性 File API 和 FormData API 来帮助我们选择和上传文件。同时，它还使用了 Socket.io 的客户端库来处理数据传输事件和进度通知。
现在，我们可以启动服务端，在浏览器中打开 http://localhost:5000，进行文件上传。可以看到上传进度条会实时更新，直到上传完成。
将传输的文件切片以便于传输
上述代码能够完成文件上传，但它并没有考虑上传大文件的情况。在这种情况下，传统的一次性将整个文件上传可能会引起资源浪费、上传失败等问题。为了解决这个问题，可以将文件拆分成多个小块，并逐块上传。
下面的代码演示了如何将文件拆分成每个块大小为 16 KB 的小块。
-- -------------------- ---- -------
-- --------
----- ---------- - -- - -----
----- -------- - ----- ------ -- -
----- ------ - ---
--- ------ - --
----- ------- - ---------- -
----- ------ - ------ - -----------
----- ----- - ----- --------------- ------- --------
-------------------
------ - -------
-
------ --- -------------
--
----- --------- - ----- ------ ------ ---- -- -
------ --- ----------------- -- -
----- ------ - --- -------------
----- ---- - ----------------- -----
-------------------------------
------------- - -- -- ----------- ---------------------------
---
--
----- ---------- - -----------------------------
----- ------ - ----------------------------------------------
----- -------- - ----- ---------------
----------------- ----- ----------------
----------------- ---- ----- --------------------
上述代码中我们定义了 CHUNK_SIZE 常量来表示每个块的大小。我们还定义了 readFile 函数来将文件切割成多个小块文件，并返回组装好的 Blob 对象。readChunk 函数使用 FileReader 对象来读取一个块并返回 Uint8Array 数组对象。
通过上述代码，我们能够将整个文件切割成多个大小一样的小块。在实现上传的过程中就可以一个小块一个小块地上传，解决一次上传整个大文件的问题，也能防止过大的内存占用和网络拥塞。
实现完整的文件传输过程
现在，我们已经准备好切割文件、上传文件块并保存为完整文件的基本操作了。下面，我们通过代码片段来演示如何将这些操作集成到整个文件传输过程中：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
------------------- ----- ------ -- -
----- - ----- ---- - - -----
----- ---------- - ------------------------
----- ------ - ----------------------------------------------
----- ---------- - -- - -----
--- ------ - --
------------------ ----- ------- --------- -- -
----- ------ - ------ - -------------
----- ---- - --- --------------
--------------------
------ - -------
----- -------- - ------------------ - ----- - -----
----------------------- ----------
-- ------- -- ----- -
---------------- -- -- -
----------------- ------------- --- ---- ---------
----------------------- - --------- ---------- ---
---
-
---
---
---
在上述代码中，我们定义了 Socket.io 的“upload”事件来处理文件上传请求，将文件保存在 uploads 目录下，并提供给客户端实时的上传进度。在客户端每一次向服务端传输完一个二进制数据块时，服务端会收到一个名为“chunk”的事件，并将已上传的数据块添加到文件流中。
最终，当文件的所有数据块都完成上传后，服务端会异步地使用 stream.end() 方法将文件流结束并写入保存的文件名，此时文件上传完成，并且客户端得到了来自服务器确认文件保存的信号。
总结
Socket.io 已成为现代前端开发中不可或缺的工具，它可以让开发人员快速实现双向通信，包括实时数据传输、聊天室、文件传输等等。在本文中，我们讨论了如何使用 Socket.io 完成简单的文件传输，包括创建 Node.js 服务端、使用 Express 框架、文件切割、文件传输进度通知以及文件传输的整个过程。通过这份教程，我们希望读者能够掌握如何使用 Socket.io 在前端中快速完成文件传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64770465968c7c53b0397c71