如何在 Koa2 中使用 WebSockets-JavaScript中文网-JavaScript教程资源分享门户

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 路由：

const KoaRouter = require('koa-router');
const io = require('socket.io');

const router = new KoaRouter();

router.get('/', ctx => {
    // 处理客户端请求
});

const sockets = {};

// WebSockets
io.on('connection', socket => {
    console.log('Socket Connected...');

    socket.on('register', data => {
      socket.username = data.username;
      sockets[socket.username] = socket;
    });
});

在上面的代码中，我们创建了一个 Koa2 路由，最上面的 / 路径处理客户端请求。在 routes/index.js 的底部，我们创建了一个 sockets 对象来存储正在连接的 WebSockets，同时我们也注册了 connection 事件处理函数。当客户端通过 WebSockets 连接到服务器时，connection 事件会被触发。

WebSockets

在 sockets.js 中，我们需要创建并导出一个用于集中处理 WebSockets 的函数。代码如下所示：

const io = require('socket.io');

module.exports = server => {
    const sockets = {};

    io(server).on('connection', socket => {
        console.log('Socket Connected...');

        socket.on('register', data => {
            socket.username = data.username;
            sockets[socket.username] = socket;
        });

        socket.on('message', data => {
            const recipient = sockets[data.recipient];
            recipient.emit('message', data);
        });
    });
};

在上面的代码中，我们首先引入了 socket.io 并将其附加到在 app.js 中创建的 Koa2 应用程序。然后我们创建了 sockets 对象来存储正在连接的 WebSockets。在 connection 事件处理函数中，我们注册了两个事件：register 和 message。

register 事件用于客户端的注册。在客户端注册时，我们将客户端的 ID 绑定到其所使用的 WebSocket 上，以便于后续的查询处理。

message 事件用于发送消息。当客户端向服务器发送 message 事件时，我们根据接收方的 ID 查找该接收方，然后将消息发送给该接收方。

示例代码

接下来，我们将代码示例集合到一起，并演示如何通过 WebSockets 与客户端通信：

const Koa = require('koa');
const server = require('http').createServer();
const io = require('./sockets')(server);
const router = require('./routes/index');
const app = new Koa();

app.use(router.routes());

server.listen(3000, () => {
    console.log('Server Started on Port 3000...');
});

// Koa2 路由
router.get('/', ctx => {
    ctx.type = 'html';
    ctx.body = `
        <!DOCTYPE html>
        <html>
            <head>
                <title>Chat!</title>
                <script src="/socket.io/socket.io.js"></script>
            </head>
            <body>
                <script>
                    const socket = io();

                    function register() {
                        const username = document.getElementById('username').value;
                        socket.emit('register', { username });
                    }

                    function send() {
                        const recipient = document.getElementById('recipient').value;
                        const message = document.getElementById('message').value;
                        socket.emit('message', { recipient, message });
                    }

                    socket.on('message', data => {
                        console.log(data);
                    });
                </script>
                <h1>Register</h1>
                <input id="username" />
                <button onclick="register()">Register</button>

                <h1>Chat</h1>
                <input id="recipient" />
                <input id="message" />
                <button onclick="send()">Send</button>
            </body>
        </html>
    `;
});

如上所述，我们在 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

如何在 Koa2 中使用 WebSockets