在前端开发中，常常会遇到需要实现实时通信的需求。传统的 HTTP 协议无法满足这种需求，因此我们需要使用 WebSocket 协议来实现实时通信。Express.js 是一种流行的 Node.js 框架，可以方便地创建 Web 应用程序。本文将介绍如何使用 Express.js 结合 WebSocket 实现实时通信。
WebSocket 简介
WebSocket 是一种 HTML5 的新协议，可以在浏览器与服务器之间建立实时、双向的通信。WebSocket 技术可用于任何网络应用程序，可以用于实现聊天室、游戏、数据传输等，支持任何编程语言，不限于 JavaScript。WebSocket 使用标准的 HTTP/HTTPS 端口（80/443），不需要像其他类似技术那样开设新的端口。
安装依赖
在本例中，我们将使用 Express.js 和 ws （WebSocket 的 Node.js 实现）。首先需要安装它们：
npm install express npm install ws
创建 Express.js 应用
创建一个名为 app.js 的文件，输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ -------- ----- ---- - --------------- --------- --- ---------------- -------- -- - -------------------- --- --------- -- ---- -------- ---
以上代码创建了一个 Express.js 应用，并在浏览器中输入 http://localhost:3000/ 可以看到 Hello World! 的输出。
添加 WebSocket 支持
现在我们将为我们的应用添加 WebSocket 支持。在 app.js 中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------
----- ------ - -----------------------
----- --- - --- ------------------ ------ ---
-------------------- -------- -------------- -
------------------- ------------
---------------- -------- ----------------- -
---------------------- ---- ---------
---
---------------- -- --- ---- --------
---
------------------- -------- -- -
-------------------- --- --------- -- ---- --------
---以上代码创建了一个 WebSocket 服务器，并向客户端发送了一条欢迎消息。在客户端连接到 WebSocket 服务器时，将打印一条消息到控制台。
现在我们需要测试一下我们的 WebSocket 服务器。在浏览器中输入 http://localhost:3000/，在 DevTools 的 Console 标签中输入以下代码：
let socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('open', function (event) {
console.log('WebSocket connected to server.');
socket.send('Hello, server!');
});
socket.addEventListener('message', function (event) {
console.log('Server says: ' + event.data);
});以上代码创建了一个 WebSocket 连接，并向服务器发送了一条消息。在服务器接收到消息后，将打印一条消息到控制台。
总结
通过以上示例，我们了解了如何使用 Express.js 结合 WebSocket 实现实时通信。当然，以上示例只是一个起点，在实际应用中可能还需要更多的功能和安全措施。希望本文能对大家学习和使用 WebSocket 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aab6a048841e98946c66e5