如何在Express.js中实现单点推送功能？

前端

2023-11-06 10:47:34

前言

在现代的Web应用中，实时推送功能越来越重要。它允许服务端将消息即时推送到客户端，而无需客户端不断地向服务端轮询。这对于构建聊天应用、即时通讯系统和游戏等应用非常有用。

Express.js简介

Express.js是一个流行的Node.js Web框架，它提供了许多有用的功能，可以帮助您快速构建Web应用。在本教程中，我们将使用Express.js来构建一个简单的单点推送应用。

WebSocket简介

WebSocket是一种双向的通信协议，它允许客户端和服务端建立一个持久的连接。这使得服务端可以随时向客户端推送消息，而无需客户端不断地向服务端轮询。

实现单点推送功能

1. 安装依赖

首先，我们需要安装Express.js和WebSocket相关依赖。您可以使用以下命令来安装它们：

npm install express ws

2. 创建Express.js应用

接下来，我们需要创建一个Express.js应用。您可以使用以下命令来创建它：

npx express-generator my-app

3. 编写服务端代码

在创建的Express.js应用中，我们需要编写服务端代码来处理HTTP POST请求和WebSocket连接。

首先，我们需要在server.js文件中引入Express.js和WebSocket相关的模块：

const express = require('express');
const WebSocket = require('ws');

然后，我们需要创建一个Express.js应用：

const app = express();

接下来，我们需要设置HTTP POST请求的处理函数：

app.post('/message', (req, res) => {
  // 获取消息的发送者、接收者和内容
  const sender = req.body.sender;
  const receiver = req.body.receiver;
  const message = req.body.message;

  // 将消息发送给消息接收者
  webSockets.get(receiver).send(JSON.stringify({ sender, message }));

  // 返回成功响应
  res.sendStatus(200);
});

接下来，我们需要设置WebSocket连接的处理函数：

const webSockets = new Map();

app.ws('/ws/:name', (ws, req) => {
  // 获取客户端的名称
  const name = req.params.name;

  // 将客户端添加到WebSocket连接列表中
  webSockets.set(name, ws);

  // 当客户端关闭连接时，将其从WebSocket连接列表中移除
  ws.on('close', () => {
    webSockets.delete(name);
  });
});

最后，我们需要启动Express.js应用：

const port = 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

4. 编写客户端代码

在客户端，我们需要编写代码来发送HTTP POST请求和建立WebSocket连接。

首先，我们需要在HTML文件中引入必要的JavaScript库：

<script src="https://cdn.jsdelivr.net/npm/express@4.17.1/dist/express.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ws@7.4.6/dist/ws.min.js"></script>

然后，我们需要编写发送HTTP POST请求的代码：

const sendMessage = () => {
  // 获取消息的发送者、接收者和内容
  const sender = document.getElementById('sender').value;
  const receiver = document.getElementById('receiver').value;
  const message = document.getElementById('message').value;

  // 将消息发送给服务端
  fetch('/message', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ sender, receiver, message })
  });
};

接下来，我们需要编写建立WebSocket连接的代码：

const connectWebSocket = () => {
  // 获取客户端的名称
  const name = document.getElementById('name').value;

  // 建立WebSocket连接
  const ws = new WebSocket(`ws://localhost:3000/ws/${name}`);

  // 当收到消息时，将其显示在页面上
  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    const sender = message.sender;
    const messageContent = message.message;

    const messageElement = document.createElement('p');
    messageElement.innerText = `${sender}: ${messageContent}`;

    document.getElementById('messages').appendChild(messageElement);
  };
};

最后，我们需要在页面加载时执行上述代码：

window.onload = () => {
  // 获取页面元素
  const sendMessageButton = document.getElementById('send-message-button');
  const connectWebSocketButton = document.getElementById('connect-websocket-button');

  // 添加事件监听器
  sendMessageButton.addEventListener('click', sendMessage);
  connectWebSocketButton.addEventListener('click', connectWebSocket);
};