随着互联网的发展，实时通信已经成为了现代应用的标配。在前端开发中，我们经常需要利用 WebSocket 实现实时通信。本文将探讨如何在 Express.js 中利用 WebSocket 实现实时通信，并提供详细的示例代码。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的一个新特性，可以在浏览器和服务器之间建立持久性的连接，实现实时通信。
与传统的 HTTP 请求不同，WebSocket 的连接是长期存在的，因此可以实现实时通信。WebSocket 还支持二进制数据传输，可以在传输效率和数据安全性方面提供更好的支持。
Express.js 简介
Express.js 是一个基于 Node.js 平台的 Web 开发框架，它提供了一系列强大的功能和工具，使得开发 Web 应用变得更加轻松和高效。
Express.js 提供了一系列中间件，可以用于处理 HTTP 请求和响应。同时，它还支持自定义中间件，可以用于实现各种功能，包括实时通信。
实现 WebSocket 实时通信
下面我们将详细介绍如何在 Express.js 中实现 WebSocket 实时通信。
安装依赖
首先，我们需要安装相关依赖。在命令行中执行以下命令：
npm install express ws
其中，express 是 Express.js 框架，ws 是 WebSocket 库。
创建 Express.js 应用
接下来，我们需要创建一个 Express.js 应用。在代码中，我们需要引入 Express.js 模块，并创建一个 Express.js 应用实例：
const express = require('express');
const app = express();创建 WebSocket 服务器
在 Express.js 应用中创建 WebSocket 服务器，我们需要引入 ws 模块，并创建一个 WebSocket 服务器实例：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });其中，8080 是 WebSocket 服务器的端口号。
处理 WebSocket 连接
在 WebSocket 服务器中，我们需要处理客户端的连接请求。在代码中，我们可以监听 connection 事件，当有客户端连接时，执行回调函数：
wss.on('connection', function connection(ws) {
console.log('WebSocket connected');
});其中，ws 是 WebSocket 连接对象。
处理 WebSocket 消息
在 WebSocket 服务器中，我们还需要处理客户端发送的消息。在代码中，我们可以监听 message 事件，当有客户端发送消息时，执行回调函数：
ws.on('message', function incoming(message) {
console.log('WebSocket received: %s', message);
});其中，message 是客户端发送的消息。
发送 WebSocket 消息
在 WebSocket 服务器中，我们还需要发送消息给客户端。在代码中，我们可以调用 send 方法，向客户端发送消息：
ws.send('WebSocket message');其中，'WebSocket message' 是要发送的消息。
完整示例代码
下面是一个完整的 Express.js 应用，实现 WebSocket 实时通信的示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const WebSocket = require('ws');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('WebSocket connected');
ws.on('message', function incoming(message) {
console.log('WebSocket received: %s', message);
ws.send('WebSocket message');
});
});
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(3000, function() {
console.log('Express.js app listening on port 3000');
});其中，index.html 是一个简单的 HTML 文件，用于测试 WebSocket 连接：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket Test</title>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('WebSocket opened');
ws.send('WebSocket message');
};
ws.onmessage = function(event) {
console.log('WebSocket received: ' + event.data);
};
</script>
</head>
<body>
<h1>WebSocket Test</h1>
</body>
</html>在浏览器中打开 index.html 文件，可以测试 WebSocket 连接。
总结
本文介绍了如何在 Express.js 中利用 WebSocket 实现实时通信。通过学习本文，你可以掌握以下技能：
- 安装和使用 WebSocket 库
- 创建 WebSocket 服务器
- 处理 WebSocket 连接和消息
- 发送 WebSocket 消息
希望本文能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65595d62d2f5e1655d3c8e67