Koajs 集成 Websocket 的详细步骤，并与客户端建立链接与通信

乐闻

2024年07月17日 12:19· 阅读 110

前言

在现代的Web开发中，实时通信是一个重要的功能。WebSocket提供了一种在客户端和服务器之间进行全双工通信的方式。本文将指导你如何在Koa.js框架中集成WebSocket，并展示客户端如何连接到WebSocket服务器。

一、Koa服务端

1. 设置Koa.js项目

首先，你需要一个基本的Koa.js项目。然后安装Koa及其相关依赖：

```
bash
npm install koa
```

创建一个基本的Koa服务器：

javascript
// index.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

2. 集成WebSocket

我们将使用 ws库来实现WebSocket功能。首先，需要安装这个库：

bash
npm install ws

然后，你可以添加WebSocket的支持：

javascript
// index.js
const Koa = require('koa');
const WebSocket = require('ws');
const http = require('http');

const app = new Koa();
const server = http.createServer(app.callback());
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

app.use(async ctx => {
  ctx.body = 'Hello World';
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

在这个示例中，我们创建了一个WebSocket服务器，它监听与普通HTTP服务器相同的端口。每当有客户端连接时，它会监听消息，并发送一个初始消息“something”。

二、Web客户端

1. 创建WebSocket客户端

现在，让我们创建一个简单的HTML页面来连接WebSocket服务器：

html
<!-- client.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Test</title>
</head>
<body>
    <script>
        const ws = new WebSocket('ws://localhost:3000');

        ws.onopen = function(event) {
            console.log('Connection open ...');
            ws.send('Hello Server!');
        };

        ws.onmessage = function(event) {
            console.log('Received message: ' + event.data);
            ws.close();
        };

        ws.onclose = function(event) {
            console.log('Connection closed.');
        };
    </script>
</body>
</html>

这个HTML页面尝试连接到WebSocket服务器，并在连接开启后发送一条消息。然后，它会监听服务器发来的消息，并在接收后关闭连接。

进阶方式

WebSocket与Koa中间件集成

在Koa.js应用中，中间件是非常核心的概念，它允许你执行异步操作，管理状态，处理请求等。我们可以将WebSocket的连接和通信放在Koa的中间件中，以实现更好的集成和代码组织。

1. 创建自定义中间件处理WebSocket

我们可以创建一个中间件，专门用来处理WebSocket的初始化和消息处理逻辑。这样可以保持 index.js的清晰和专注于HTTP服务：

javascript
// ws-handler.js
module.exports = (wss) => {
  wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
      console.log('received: %s', message);
      ws.send('Echo from server: ' + message);
    });

    ws.on('close', () => {
      console.log('Client disconnected');
    });

    ws.send('Welcome to WebSocket server!');
  });
};

然后在主文件中引用这个中间件：

javascript
// index.js
const Koa = require('koa');
const WebSocket = require('ws');
const http = require('http');
const setupWSHandler = require('./ws-handler');

const app = new Koa();
const server = http.createServer(app.callback());
const wss = new WebSocket.Server({ server });

setupWSHandler(wss);

app.use(async ctx => {
  ctx.body = 'Hello World via HTTP!';
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

2. 引入WebSocket身份验证

在实际应用中，可能需要对连接WebSocket的客户端进行身份验证。我们可以通过Koa的中间件来实现这一功能，比如检查cookies或者Authorization headers：

javascript
// auth-middleware.js
function authMiddleware(ctx, next) {
  // 示例：检查某种认证信息
  const auth = ctx.headers['authorization'];
  if (auth === 'secret-token') {
    return next();
  } else {
    ctx.status = 401;
    ctx.body = 'Unauthorized';
  }
}

module.exports = authMiddleware;

在WebSocket连接请求中使用这个中间件：

javascript
// ws-auth-handler.js
const authMiddleware = require('./auth-middleware');

module.exports = (wss) => {
  wss.on('connection', function connection(ws, req) {
    // 用dummy Koa context来模拟中间件调用
    const ctx = { headers: req.headers };
    authMiddleware(ctx, () => {
      ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        ws.send('Echo from a secured server: ' + message);
      });

      ws.send('Welcome to a secured WebSocket server!');
    });
  });
};

3. 客户端如何处理身份验证

客户端需要在连接WebSocket时发送认证信息，例如通过查询参数或者在连接的header中：

html
<script>
    const ws = new WebSocket('ws://localhost:3000', {
      headers: { 'Authorization': 'secret-token' }
    });

    ws.onopen = function(event) {
        console.log('Secured connection open ...');
        ws.send('Hello Secured Server!');
    };

    ws.onmessage = function(event) {
        console.log('Received message: ' + event.data);
    };

    ws.onclose = function(event) {
        console.log('Secured connection closed.');
    };
</script>

结论

WebSocket使得实现实时通讯变得简单，适用于需要快速响应的应用场景，比如在线游戏、聊天应用等。通过这些高级技巧，你可以在Koa.js应用中更有效地实现WebSocket通信，并加入诸如身份验证之类的重要安全功能。这将极大地增强你的应用的安全性和功能性。

标签：

Koa WebSocket