WebSockets 是一种基于 TCP 的协议，旨在提供双向通信渠道。WebSockets 允许服务器向客户端发送消息，同时客户端也可以向服务器发送消息，实现了真正意义上的实时通信。
在 Koa2 中使用 WebSockets 可以让你构建高度交互式的 Web 应用程序。本文将详细介绍如何在 Koa2 中使用 WebSockets 并附带示例代码。
准备工作
在进入实际编码之前，我们需要先为应用程序配置 Socket.IO 依赖：
npm install socket.io socket.io-client
Socket.IO 是一个库，可以让你在浏览器和 Node.js 服务器之间建立实时交互。它会自动选择最佳通信方法（WebSockets, AJAX 长轮询等）以保证高效的连接。
创建 Koa2 应用程序
首先，我们需要安装 Koa 与 koa-router 库，可以通过以下命令安装：
npm install koa koa-router
在本案例中，我们一共需要创建 3 个文件：
app.js：创建 Koa2 应用程序并注册 koa-router 的中间件。routes/index.js：创建 Koa2 路由并将其暴露到外部。sockets.js：创建 WebSockets。
app.js
创建 app.js 文件，我们需要引入以下内容：
const Koa = require('koa');
const router = require('./routes/index');
const app = new Koa();
app.use(router.routes());
app.listen(3000, () => {
console.log('Server Started on Port 3000...');
});上面的代码中，我们创建了一个基础的 Koa2 应用程序，然后通过引入 router 变量的路由配置来设置中间件，并将应用程序绑定到 3000 端口。
routes/index.js
我们需要创建一个 Koa2 路由来处理与客户端的连接。在 routes/index.js 文件中，我们需要引入 Socket.IO 和 Koa2 路由：
-- -------------------- ---- -------
----- --------- - ----------------------
----- -- - ---------------------
----- ------ - --- ------------
--------------- --- -- -
-- -------
---
----- ------- - ---
-- ----------
------------------- ------ -- -
------------------- ---------------
--------------------- ---- -- -
--------------- - --------------
------------------------ - -------
---
---在上面的代码中，我们创建了一个 Koa2 路由，最上面的 / 路径处理客户端请求。在 routes/index.js 的底部，我们创建了一个 sockets 对象来存储正在连接的 WebSockets，同时我们也注册了 connection 事件处理函数。当客户端通过 WebSockets 连接到服务器时，connection 事件会被触发。
WebSockets
在 sockets.js 中，我们需要创建并导出一个用于集中处理 WebSockets 的函数。代码如下所示：
-- -------------------- ---- -------
----- -- - ---------------------
-------------- - ------ -- -
----- ------- - ---
--------------------------- ------ -- -
------------------- ---------------
--------------------- ---- -- -
--------------- - --------------
------------------------ - -------
---
-------------------- ---- -- -
----- --------- - ------------------------
------------------------- ------
---
---
--在上面的代码中，我们首先引入了 socket.io 并将其附加到在 app.js 中创建的 Koa2 应用程序。然后我们创建了 sockets 对象来存储正在连接的 WebSockets。在 connection 事件处理函数中，我们注册了两个事件：register 和 message。
register 事件用于客户端的注册。在客户端注册时，我们将客户端的 ID 绑定到其所使用的 WebSocket 上，以便于后续的查询处理。
message 事件用于发送消息。当客户端向服务器发送 message 事件时，我们根据接收方的 ID 查找该接收方，然后将消息发送给该接收方。
示例代码
接下来，我们将代码示例集合到一起，并演示如何通过 WebSockets 与客户端通信：
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - -------------------------------
----- -- - -----------------------------
----- ------ - --------------------------
----- --- - --- ------
-------------------------
------------------- -- -- -
------------------- ------- -- ---- ----------
---
-- ---- --
--------------- --- -- -
-------- - -------
-------- - -
--------- -----
------
------
--------------------
------- ---------------------------------------
-------
------
--------
----- ------ - -----
-------- ---------- -
----- -------- - ------------------------------------------
----------------------- - -------- ---
-
-------- ------ -
----- --------- - -------------------------------------------
----- ------- - -----------------------------------------
---------------------- - ---------- ------- ---
-
-------------------- ---- -- -
------------------
---
---------
-----------------
------ ------------- --
------- --------------------------------------
-------------
------ -------------- --
------ ------------ --
------- ------------------------------
-------
-------
--
---如上所述，我们在 routes/index.js 和 sockets.js 中编写了路由和 WebSockets 处理程序代码。现在我们只需要通过创建 Koa2 路由和 HTML 模板来实现 WebSockets。
我们在 / 路径下创建一个 HTML 表单，允许用户输入它们的用户名、收件人和消息。当用户在页面中点击“Register”按钮时，我们会将其消息实例注册到服务器上。当用户在页面中点击“Send”按钮时，我们会将从用户输入框中获取的消息发送给服务器。
总结
经过这个简单而有趣的 WebSockets 案例，我们了解了如何在 Koa2 中使用 Socket.IO 和 WebSockets。我们在服务器上创建了一个注册系统，来处理跟踪用于 WebSockets 的客户端。我们还演示了如何通过 WebSocket
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e800aadd4f0e0ff76c010