Express.js + WebSocket 实现即时消息推送-JavaScript中文网-JavaScript教程资源分享门户

随着即时通讯在各种应用场景中的广泛应用，实现即时消息推送成为了一个十分常见的需求。在 Web 开发中，常常需要实现 WebSocket 连接以实时传输信息。而 Express.js 则是一个极为流行的 Web 应用程序框架，通过使用它，可以快速构建强大的 Web 应用程序。本文将介绍如何使用 Express.js 和 WebSocket 实现即时消息推送。

什么是 WebSocket？

WebSocket 是一个通信协议，它在单个 TCP 连接上提供了全双工通信信道。它可以在客户端和服务器之间进行双向通信，而不需要通过 HTTP 请求/响应协议的各种限制。 WebSocket 不仅可以用于实时消息传递，还可以用于游戏、远程桌面等应用场景。相比于 HTTP 请求/响应通信方式，WebSocket 具有更低的延迟和更高的吞吐量。

什么是 Express.js？

Express.js 是一个流行的 Web 框架，它基于 Node.js 平台。使用 Express.js，可以构建快速、简单和可扩展的 Web 应用程序。它提供了一个易于学习和使用的中间件系统，用于处理 HTTP 请求和响应的各个方面，包括处理路由、渲染视图、处理错误、解析请求正文等。

使用 Express.js 和 WebSocket 实现即时消息推送

使用 Express.js 和 WebSocket 实现即时消息推送主要分为以下几个步骤：

安装 Express 和 WebSocket：

$ npm install express
$ npm install ws

创建 Express 应用程序：

const express = require('express');
const app = express();

const port = 3000;

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

创建 WebSocket 服务器：

// javascriptcn.com 代码示例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 向所有客户端广播消息
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

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

在 Express 应用程序中添加 WebSocket 服务器中间件：

// javascriptcn.com 代码示例
app.ws('/chat', (ws, req) => {
  console.log('WebSocket connection established');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 向所有客户端广播消息
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('WebSocket connection closed');
  });
});

编写前端代码实现 WebSocket 连接和消息传输：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>WebSocket Chat</title>
  </head>
  <body>
    <h1>WebSocket Chat</h1>
    <form>
      <input type="text" id="message" placeholder="Type your message">
      <button type="submit">Send</button>
    </form>
    <ul id="messages"></ul>

    <script>
      const ws = new WebSocket('ws://localhost:3000/chat');

      ws.onopen = () => {
        console.log('WebSocket connection established');
      };

      ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        const listItem = document.createElement('li');
        listItem.innerText = message;
        document.getElementById('messages').appendChild(listItem);
      };

      document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault();

        const input = document.getElementById('message');
        const message = input.value;

        ws.send(JSON.stringify(message));

        input.value = '';
      });
    </script>
  </body>
</html>

如上代码中，我们在表单中输入消息，然后将其发送给 WebSocket 服务器。每当我们接收到 WebSocket 服务器发送的消息时，我们就将其添加到消息列表中以进行显示。

总结

本文介绍了如何使用 Express.js 和 WebSocket 实现即时消息推送。WebSocket 提供了一种实时的双向通信协议，而 Express.js 则让我们能够快速、简单地构建 Web 应用程序。结合两者，我们可以简单地实现即时消息传递功能。虽然本文仅介绍了基础用法，但是对于实现更复杂的应用程序，这些基础知识也是必不可少的。

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