Express 和 WebSocket 侦听同一端口

JS

使用 Express 和 WebSocket 侦听同一端口

在开发网络应用程序时，常常需要使用不同的协议和技术来处理不同的需求。Express 是一个常用的 Node.JS Web 框架，用于处理 HTTP 请求和构建 Web 服务器。WebSocket 是一种实时通信协议，它允许客户端和服务器之间建立持久连接，以便进行双向通信。本文将介绍如何使用 Express 和 WebSocket 侦听同一端口，以便在一个应用程序中同时处理 HTTP 请求和 WebSocket 连接。

## Express 和 WebSocket 的基本概念

在开始之前，让我们先了解一下 Express 和 WebSocket 的基本概念。

Express 是一个简洁、灵活的 Node.JS Web 框架，它提供了一组简单的方法来处理 HTTP 请求和构建 Web 服务器。使用 Express，我们可以定义路由、处理请求、发送响应等。

WebSocket 是一种实时通信协议，它允许客户端和服务器之间建立持久的双向连接。与传统的 HTTP 请求不同，WebSocket 连接是长期保持的，可以在任何时间点进行双向通信。这使得 WebSocket 成为实时应用程序、即时聊天和多人游戏等场景的理想选择。

## 在 Express 中使用 WebSocket

要在 Express 中使用 WebSocket，我们需要使用一个 WebSocket 服务器库，如 ws 或 socket.io。在本例中，我们将使用 ws 库来创建 WebSocket 服务器。

首先，我们需要安装 ws 库：

bash
npm install ws

然后，在 Express 应用程序中，我们可以创建一个 WebSocket 服务器实例，并将其与 Express 服务器实例绑定到同一端口：

Javascript
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
// 处理 HTTP 请求
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});
// 处理 WebSocket 连接
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Received:', message);
  });
  ws.send('Hello, WebSocket!');
});
const port = 3000;
server.listen(port, () => {
  console.log(<code>Server is listening on port ${port}</code>);
});

在上面的代码中，我们创建了一个 Express 应用程序实例 app，一个 HTTP 服务器实例 server，以及一个 WebSocket 服务器实例 wss。我们通过调用 http.createServer(app) 将 app 和 server 绑定在一起，然后将 server 传递给 wss 的构造函数，以便它们共享同一个端口。

通过调用 app.get，我们定义了一个处理根路径的路由，用于处理 HTTP 请求。当客户端发送 HTTP GET 请求到根路径时，服务器将返回 "Hello, Express!"。

通过监听 wss 的 'connection' 事件，我们定义了一个处理 WebSocket 连接的函数。当客户端与服务器建立 WebSocket 连接时，这个函数将被调用。在这个函数中，我们可以处理接收到的消息，并向客户端发送消息。

最后，我们通过调用 server.listen，将服务器绑定到指定的端口上。在这个例子中，服务器将在端口 3000 上侦听。

## 实际应用场景

将 Express 和 WebSocket 结合在一起的实际应用场景有很多。例如，我们可以使用 Express 处理 Web 页面的渲染和 HTTP 请求，同时使用 WebSocket 实现实时通知功能。

假设我们正在开发一个在线聊天应用程序。当用户发送聊天消息时，我们希望消息能够实时地显示在其他在线用户的屏幕上。这时，我们可以使用 Express 处理用户登录和页面渲染，使用 WebSocket 处理实时的聊天消息传输。

下面是一个简单的示例代码，演示了如何在 Express 和 WebSocket 中实现实时聊天功能：

Javascript
// Express 部分
const express = require('express');
const app = express();
// 渲染聊天页面
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/chat.html');
});
// 启动 Express 服务器
const port = 3000;
app.listen(port, () => {
  console.log(<code>Express server is listening on port ${port}</code>);
});
// WebSocket 部分
const WebSocket = require('ws');
const wss = new WebSocket.Server({ noServer: true });
// 监听 HTTP 请求，升级为 WebSocket 连接
const server = app.listen(port, () => {
  console.log(<code>WebSocket server is listening on port ${port}</code>);
});
server.on('upgrade', (req, socket, head) => {
  wss.handleUpgrade(req, socket, head, (ws) => {
    wss.emit('connection', ws, req);
  });
});
// 处理 WebSocket 连接
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 处理收到的聊天消息
    // 广播消息给所有在线用户
  });
  ws.on('close', () => {
    // 处理用户离线
    // 广播用户离线消息给其他在线用户
  });
});

在这个示例中，我们使用 Express 渲染聊天页面，并处理用户登录和页面渲染。通过调用 app.get，我们定义了一个处理根路径的路由，用于返回聊天页面。

在 WebSocket 部分，我们创建了一个 WebSocket 服务器实例 wss，并通过调用 server.on('upgrade', ...) 将它绑定到 Express 服务器。这样，当客户端发送升级请求时，Express 将把请求传递给 wss.handleUpgrade，从而升级为 WebSocket 连接。

通过监听 wss 的 'connection' 事件，我们定义了一个处理 WebSocket 连接的函数。在这个函数中，我们可以处理接收到的聊天消息，并广播给其他在线用户。同时，当用户离线时，我们也可以处理相应的事件，并广播用户离线消息给其他在线用户。

在本文中，我们介绍了如何使用 Express 和 WebSocket 侦听同一端口。我们首先了解了 Express 和 WebSocket 的基本概念，然后演示了如何在 Express 中使用 WebSocket，并给出了一个实际应用场景的示例代码。通过将 Express 和 WebSocket 结合使用，我们可以更好地处理 HTTP 请求和实时通信需求，从而构建更强大的网络应用程序。