Koa2 实现 WebSocket 聊天室-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是 HTML5 中新增的协议。是一个双向的通信协议，通过一次 HTTP 握手后，客户端与服务器端之间就形成了一条快速通道，可以实现实时通信。在前端开发中，我们常用 WebSocket 来实现聊天室、在线游戏等实时性强的应用。

在本篇文章中，我们将介绍如何利用 Koa2 框架来实现 WebSocket 聊天室。Koa2 是一个 Next-generation 的 Node.js Web 框架，它采用了 async/await 的方式来处理异步请求，极大地简化了异步编程的复杂度。

基本概念

在介绍如何实现 WebSocket 聊天室之前，先了解一些基本概念。

WebSocket

WebSocket 是一个在单个 TCP 连接上进行全双工通信的协议。在 WebSocket API 中，浏览器和服务器只需要进行一个握手的过程，就可以在之后的请求-响应周期中发送数据。

Koa2

Koa2 是一个新一代的 Node.js Web 框架。它提供了更加优雅的 API 设计方式、异步流程处理以及中间件机制。

Socket.IO

Socket.IO 是一个实现实时应用的 JavaScript 库。它提供了完整的双向通信机制，支持 WebSocket、Ajax 等多种通信方式的兼容性，并且还提供了心跳检测和断线重连等功能。

实现细节

Koa2 框架

在使用 Koa2 框架实现 WebSocket 聊天室时，我们需要用到 koa-websocket 插件。koa-websocket 是一个 WebSocket 中间件，它使得在 Koa 中使用 WebSocket 变得非常简单。

首先，在项目中安装 koa-websocket 和 ws 模块：

npm install koa-websocket ws --save

然后引入这两个模块，并创建一个 Koa2 应用：

const Koa = require('koa');
const WebSocket = require('ws');
const wsMiddleware = require('koa-websocket');

const app = new Koa();
const wsApp = wsMiddleware(app);

连接过程

在客户端连接 WebSocket 时，需要向服务端发起一个握手请求。握手请求通常使用 HTTP 协议，此时客户端将 Upgrade 字段设置为 WebSocket，表示将让服务器下一次请求升级为 WebSocket 协议。服务端将检测这个字段并作出响应，告诉客户端是否可以升级协议。

在 koa-websocket 中，可以通过下面的方式来处理 WebSocket 连接：

// javascriptcn.com 代码示例
wsApp.ws.use(async (ctx, next) => {
    const { headers } = ctx.req;
    // 判断是否为 WebSocket 连接请求
    if (headers.upgrade === 'websocket') {
        // ...
    } else {
        // 如果没有升级协议的请求，直接返回 404
        ctx.status = 404;
    }
});

可见，在请求头中检查 upgrade 字段即可判定请求是否为 WebSocket 连接请求。

发送消息

如果连接成功，服务端与客户端之间将会以消息为单位进行通信。在 koa-websocket 中，可以通过下面的方式来处理 WebSocket 消息：

// javascriptcn.com 代码示例
wsApp.ws.use(async (ctx, next) => {
    const ws = await ctx.websocket;
    // 监听消息事件
    ws.on('message', (message) => {
        // 发送消息
        ws.send(message);
    });

    // ...
});

上面的代码通过监听 WebSocket 的 message 事件来处理接收到的消息，并调用 ws.send() 方法来发送消息。

广播消息

在聊天室中，需要将用户输入的消息进行广播，即将消息发送给除发送者以外的所有用户。为此，我们需要在服务器端维护所有已连接的 WebSocket 对象。可以将所有 WebSocket 对象存储在数组中，每当用户连接或断开时，将其加入或从数组中移除。

// javascriptcn.com 代码示例
wsApp.ws.use(async (ctx, next) => {
    const ws = await ctx.websocket;
    // 加入 WebSocket 客户端数组
    clients.push(ws);

    // 监听消息事件
    ws.on('message', (message) => {
        // 广播消息
        clients.forEach((client) => {
            if (client !== ws) {
                client.send(message);
            }
        });
    });

    // 监听断开连接事件
    ws.on('close', () => {
        // 移除 WebSocket 客户端数组
        const index = clients.indexOf(ws);
        clients.splice(index, 1);
    });
});

上面的代码将所有连接进来的 WebSocket 对象存储在一个数组中，每当收到用户发送的消息时，通过 clients.forEach() 进行广播。

示例代码

下面是完整的示例代码，用于实现一个 WebSocket 聊天室：

// javascriptcn.com 代码示例
const Koa = require('koa');
const WebSocket = require('ws');
const wsMiddleware = require('koa-websocket');

const app = new Koa();
const wsApp = wsMiddleware(app);
const clients = [];

wsApp.ws.use(async (ctx, next) => {
    const { headers } = ctx.req;
    // 判断是否为 WebSocket 连接请求
    if (headers.upgrade === 'websocket') {
        const ws = await ctx.websocket;
        // 加入 WebSocket 客户端数组
        clients.push(ws);

        // 监听消息事件
        ws.on('message', (message) => {
            // 广播消息
            clients.forEach((client) => {
                if (client !== ws) {
                    client.send(message);
                }
            });
        });

        // 监听断开连接事件
        ws.on('close', () => {
            // 移除 WebSocket 客户端数组
            const index = clients.indexOf(ws);
            clients.splice(index, 1);
        });
    } else {
        // 如果没有升级协议的请求，直接返回 404
        ctx.status = 404;
    }
});

app.listen(3000, () => {
    console.log('WebSocket 聊天室已启动，访问地址: http://localhost:3000');
});

总结

本文详细介绍了如何利用 Koa2 框架来实现 WebSocket 聊天室，并且结合示例代码阐述了实现细节。对于前端开发者来说，积累实时通讯方面的经验是非常重要的，希望本文能给大家带来帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544407f7d4982a6ebe239fa