Websocket 是一种网络协议,可以在客户端和服务器之间创建持久的、双向通信的连接。这种连接能够使得客户端和服务器实时地交换数据、通知、消息等。在前端开发中,我们经常会使用 Websocket 进行实时数据传输,如即时通讯、实时监控、数据可视化等功能。在本文中,我们将学习如何使用 Express.js 进行 Websocket 操作。
环境搭建
首先,我们需要安装 Node.js 和 Express.js。使用以下命令可以安装:
npm install express --save
接着,我们需要安装 Websocket 包,使用以下命令可以安装:
npm install ws --save
安装完毕后,我们就可以开始使用 Express.js 进行 Websocket 操作了。
创建 Websocket 服务
我们需要在 Express.js 中创建一个服务,并向其中添加 Websocket 功能。下面是一个简单的 Express.js 代码示例:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --------- - -------------- ----- --- - ---------- ----- --- - --- ------------------ ----- ---- --- -------------------- ---- -- - ------------------- ------------ ---------------- --------- -- - ---------------------- ------------- ------------ ---- ------------- --- --- ---------------- -- -- - ---------------- --------- -- ---- ------- ---
上述代码中,我们首先创建了一个 Express.js 应用和一个 WebSocket 服务。 当有客户端连接到我们的 WebSocket 服务时,我们通过 wss.on('connection', (ws) ...) 来处理连接。回调函数里允许我们访问 WebSocket 对象,可以在这里添加处理连接的代码。当客户端向服务器发送消息时,我们可以使用 ws.on('message', (message) ...) 来处理 WebSocket 消息。
配置客户端
创建 WebSocket 服务仅仅是第一步,接下来我们需要为客户端配置。客户端需要调用如下代码来连接到 Websocket 服务并且向服务器发送消息:
const ws = new WebSocket('ws://localhost:8080'); ws.onmessage = (event) => { console.log(`received: ${event.data}`); }; ws.send('hello');
测试我们的服务
在我们的服务运行后,可以使用浏览器控制台来查看客户端和服务器之间的 Websocket 通信。
打开控制台,点击 Network 选项卡,选择 WS 选项卡,你将看到你的 WebSocket 连接已经打开。
接着,可以输入如下代码来在客户端和服务器之间进行实时通信:
ws.send('hello world');
在控制台上的 Messages 面板中,你将会看到“received: you sent hello world”的消息。这说明,WebSocket 建立了连接并成功通信。
总结
在本文中,我们学习了如何使用 Express.js 进行 Websocket 操作。我们介绍了如何在 Express.js 中创建 Websocket 服务,并为客户端配置 WebSocket。我们还演示了如何在客户端和服务器之间进行实时通信。对于那些需要在前端应用程序中实现实时通信的开发者来说,这是一个非常有用的技术。希望这篇文章能够帮助你更好地掌握 Express.js 和 Websocket 的使用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6499052448841e98945f7784