WebSocket 是一种基于 TCP 协议的全双工通信协议，它可以在浏览器和服务器之间建立一个持久的连接，使得服务器可以主动向客户端推送消息，而不需要客户端轮询请求。在实时通信场景中，WebSocket 是一种非常方便的技术，可以用于实现在线聊天、实时游戏等功能。
在 Express.js 中，我们可以通过一些中间件和库来实现 WebSocket 功能。本文将介绍如何使用 ws 和 express-ws 库，在 Express.js 中实现 WebSocket 功能。
安装依赖
我们需要安装 ws 和 express-ws 两个库，分别用于 WebSocket 和 Express.js 中的 WebSocket 功能。
npm install ws express-ws --save
创建 Express.js 应用
我们先创建一个简单的 Express.js 应用，用于演示 WebSocket 功能。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});添加 WebSocket 中间件
我们需要使用 express-ws 中间件来添加 WebSocket 功能到 Express.js 应用中。
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app);
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.ws('/', (ws, req) => {
console.log('WebSocket connected!');
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，我们通过调用 express-ws 中间件来添加 WebSocket 功能。app.ws() 方法用于创建 WebSocket 路由，当客户端连接到 / 路径时，会触发回调函数。回调函数中的 ws 参数表示 WebSocket 对象，req 参数表示 HTTP 请求对象。
发送和接收消息
我们可以使用 WebSocket 对象的 send() 方法来发送消息，使用 on('message') 方法来接收消息。
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app);
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.ws('/', (ws, req) => {
console.log('WebSocket connected!');
ws.send('Welcome to WebSocket server!');
ws.on('message', (message) => {
console.log('Received message:', message);
ws.send('You said: ' + message);
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，我们使用 ws.send() 方法发送欢迎消息，使用 ws.on('message') 方法接收客户端发送的消息，并回复相同的消息。
完整示例代码
下面是一个完整的示例代码，包含了 WebSocket 服务端和客户端的代码。
服务端代码：
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app);
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.ws('/', (ws, req) => {
console.log('WebSocket connected!');
ws.send('Welcome to WebSocket server!');
ws.on('message', (message) => {
console.log('Received message:', message);
ws.send('You said: ' + message);
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});客户端代码：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client</h1>
<div id="messages"></div>
<input type="text" id="input" />
<button id="send">Send</button>
<script>
const socket = new WebSocket('ws://localhost:3000/');
socket.onopen = () => {
console.log('WebSocket connected!');
};
socket.onmessage = (event) => {
console.log('Received message:', event.data);
const messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
const input = document.getElementById('input');
const send = document.getElementById('send');
send.addEventListener('click', () => {
const message = input.value;
socket.send(message);
input.value = '';
});
</script>
</body>
</html>在客户端代码中，我们使用 WebSocket 构造函数来创建 WebSocket 对象，指定服务器地址为 ws://localhost:3000/。在 onopen 和 onmessage 事件中，分别处理连接成功和收到消息的情况。在 send 按钮的点击事件中，使用 socket.send() 方法向服务器发送消息。
总结
本文介绍了如何在 Express.js 中使用 ws 和 express-ws 库，实现 WebSocket 功能。我们通过创建 WebSocket 路由，发送和接收消息，实现了一个简单的实时通信示例。在实际项目中，我们可以使用 WebSocket 来实现在线聊天、实时游戏等功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ae03deb4cecbf2d02e0b9