在现代 Web 开发中，实时通信已经成为了一种越来越重要的需求。WebSocket 是一项基于 TCP 协议的、全双工通信的技术，它可以在客户端和服务器端之间实现高效实时的通信。而 Express.js 则是一款流行的 Node.js Web 开发框架，它提供了一系列功能强大的中间件，可以用来快速构建 Web 应用。在本文中，我们将会介绍如何在 Express.js 中使用 WebSocket，来实现一个简单的实时聊天应用。
WebSocket 简介
WebSocket 是一个 HTML5 的特性，主要用于在浏览器和服务器之间建立一个双向连接，使得数据可以在实时性要求较高的情况下，快速地、并且可靠地在客户端和服务器之间传递。WebSocket 协议是一种基于帧的协议，每一帧都包含了帧类型、负载数据以及相关的控制信息。通过 WebSocket，客户端和服务器可以使用事件驱动的方式进行通信，从而实现实时的业务需求。
Express.js 入门
首先，我们需要安装并了解一下 Express.js。可以使用 npm 命令来安装 Express.js：
$ npm install express --save
之后，我们需要在 Node.js 应用中引入 Express.js：
const express = require('express')
const app = express()接下来，我们可以通过 Express.js 提供的一些常见 API 来处理请求。
app.get('/', function(req, res) {
res.send('Hello, world!')
})这里我们定义了一个路由处理程序，用于返回“Hello, world!”信息。这个路由可以通过访问 http://localhost:3000 来进行访问。
使用 WebSocket
接下来，我们需要安装 WebSocket 的依赖包。可以使用 npm 命令来安装它们：
$ npm install ws --save
然后，我们需要在 Express.js 应用中引入 WebSocket：
const WebSocket = require('ws')我们可以在路由处理程序中，通过 Express.js 的中间件机制，创建一个 WebSocket 服务器：
// javascriptcn.com 代码示例
app.use(function(req, res) {
const ws = new WebSocket('ws://localhost:3000')
ws.on('message', function(message) {
console.log('Received message:', message)
})
ws.send('Hello, client!')
})上面的代码中，我们创建了一个在 http://localhost:3000 上监听的 WebSocket 服务器实例 ws。在服务器收到客户端发送的消息时，会触发 message 事件，并输出收到的消息。在服务器端发送消息时，我们可以通过 ws.send 方法来向客户端发送消息。
接下来，我们需要在客户端中建立一个 WebSocket 连接，以实现实时通信的功能。在客户端代码中，我们可以使用浏览器原生提供的 WebSocket API：
const ws = new WebSocket('ws://localhost:3000')
ws.onmessage = function(event) {
console.log('Received message:', event.data)
}
ws.send('Hello, server!')在客户端建立 WebSocket 连接之后，我们可以通过 ws.onmessage 方法，来处理来自服务器的消息。在客户端发送消息时，我们需要调用 ws.send 方法，来向服务器发送消息。
示例代码
下面是一个完整的使用 Express.js 和 WebSocket 构建实时通信应用的示例代码：
// javascriptcn.com 代码示例
const express = require('express')
const WebSocket = require('ws')
const app = express()
const server = app.listen(3000, function() {
console.log('Server started on port 3000.')
})
const ws = new WebSocket.Server({ server })
ws.on('connection', function(ws) {
console.log('New client connected.')
ws.on('message', function(message) {
console.log('Received message:', message)
ws.send('Echo: ' + message)
})
ws.on('close', function() {
console.log('Client disconnected.')
})
})
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html')
})// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Type a message...">
<button id="send">Send</button>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('ws://localhost:3000')
socket.onopen = function(event) {
console.log('Connected to server.')
}
socket.onmessage = function(event) {
const messages = document.querySelector('#messages')
const li = document.createElement('li')
li.innerText = event.data
messages.appendChild(li)
}
document.querySelector('#send').addEventListener('click', function(event) {
const message = document.querySelector('#message').value
socket.send(message)
})
</script>
</body>
</html>上面的代码实现了一个简单的聊天应用，可以在浏览器中运行。我们可以通过访问 http://localhost:3000 来进入聊天室。在聊天室中，输入文字并点击“发送”按钮，即可将消息发送给服务器，并实时地显示在聊天室中。
总结
本文介绍了如何在 Express.js 应用中使用 WebSocket，来实现实时通信的功能。WebSocket 是一项非常实用的技术，它可以帮助开发者快速地实现实时通信的功能。通过本文的介绍，相信读者已经了解了 WebSocket 的基本用法，以及在 Express.js 中使用 WebSocket 的方法。在实际开发中，我们可以根据业务需求，来选择合适的技术来实现实时通信的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b980a7d4982a6ebd64de4