详解如何在 Express.js 中使用 WebSocket-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种在单个 TCP 连接上进行双向通信的协议，它可以在浏览器和服务器之间实现实时通信。在前端开发中，WebSocket 的应用场景非常广泛，特别是在轻量实时通信、多人游戏、在线聊天等方面。本文将深入探讨如何在 Express.js 中使用 WebSocket。

什么是 WebSocket？

WebSocket 是 HTML5 开始提供的一种浏览器与服务器之间进行双向通信的技术，它的出现使得浏览器可以像传统应用一样实现实时通信。WebSocket 采取非常简单的协议来实现两个进程之间的通信，通信过程中只需要在客户端和服务端之间建立一个连接，这个连接要保持连接状态很长的时间，然后进行数据传输，在数据传输过程中可以实现数据的实时更新，这就是 WebSocket 最大的优势。

常见的 WebSocket 应用有在线聊天、实时统计数据、游戏等。

为什么要使用 WebSocket？

在传统的网页中，为了实现实时通信，我们需要通过不停地进行轮询来获取服务端数据。这种方式不仅耗时耗能，而且实时性不高。而使用 WebSocket 则不需要轮询，而直接建立一条长连接，减少了网络传输的开销，提高了效率。

使用 Express.js 中的 WebSocket

在 Express.js 中使用 WebSocket 需要使用一个叫做 ws 的库。首先，我们需要使用 npm 安装 ws：

npm install ws

在使用 ws 之前，我们需要用 Express.js 创建并启动一个 http 服务器，然后在服务器上开启 WebSocket 服务。

创建 HTTP 服务器

首先，我们可以使用 Express.js 创建一个 http 服务器：

// javascriptcn.com 代码示例
const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello, World!')
})

const server = app.listen(3030, () => {
  console.log('Server is listening on port 3030')
})

在上面的代码中，我们创建了一个 Express.js 应用程序，然后定义了一个 GET 请求处理程序，返回一条 “Hello, World!” 消息。接下来，我们使用 app.listen() 启动了一个 HTTP 服务器，在本地的端口 3030 上监听请求。

使用 WebSocket

现在，我们可以在服务器上开启 WebSocket 服务了。我们先将 http 服务器传递给 ws，然后使用 ws 的 WebSocket.Server 类创建一个 WebSocket 服务器：

// javascriptcn.com 代码示例
const WebSocket = require('ws')

const wss = new WebSocket.Server({ server })

wss.on('connection', (ws) => {
  console.log('A new client is connected!')

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

  ws.on('close', () => {
    console.log('A client is disconnected!\n')
  })
})

在上面的代码中，我们首先引入了 ws 库，然后创建了一个 WebSocket 服务器对象 wss；使用 wss.on('connection', ...) 监听客户端连接事件，在客户端连接时会触发回调函数，函数参数 ws 代表客户端连接对象；使用 ws.on('message', ...) 监听客户端发送的消息，在接收到消息后会触发回调函数，函数参数 message 是客户端发送的消息；使用 ws.on('close', ...) 监听客户端连接关闭事件，在连接关闭时会触发回调函数。

这样，我们就成功地在 Express.js 中开启了 WebSocket 服务。

在客户端中使用 WebSocket

完成了服务器端的 WebSocket 服务，我们还需要在客户端中使用 WebSocket。在浏览器中使用 WebSocket 只需要创建一个 WebSocket 对象即可：

// javascriptcn.com 代码示例
const ws = new WebSocket('ws://localhost:3030')

ws.addEventListener('open', (event) => {
  console.log('Connected to WebSocket server!')
})

ws.addEventListener('message', (event) => {
  console.log(`Received message => ${event.data}`)
})

ws.addEventListener('close', (event) => {
  console.log('WebSocket server is closed!')
})

在上面的代码中，我们先创建了一个 WebSocket 对象，并指定 WebSocket 服务器的地址。当连接成功时，会触发 ws.addEventListener('open', ...) 回调函数；当接收到客户端发送的消息时，会触发 ws.addEventListener('message', ...) 回调函数；当连接关闭时，会触发 ws.addEventListener('close', ...) 回调函数。

到此为止，我们已经成功地在 Express.js 中使用 WebSocket 实现了双向通信。

总结

在本文中，我们主要讲解了在 Express.js 中使用 WebSocket。WebSocket 可以在浏览器和服务器之间实现实时通信，使用 WebSocket 可以减小网络传输的开销，提高效率。在具体实现时，我们需要使用 ws 库创建 WebSocket 服务，并在客户端和服务端使用标准的 WebSocket 接口进行通信。希望本文对您了解 WebSocket 以及在 Express.js 中使用 WebSocket 有所帮助。

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