如何使用 Express.js 构建 Websocket 应用程序-JavaScript中文网-JavaScript教程资源分享门户

Express.js 是一个流行的 Node.js Web 框架，它使构建 Web 应用程序变得简单。Websocket 是一个基于 TCP 协议的实时通讯协议，它允许在一个可靠的连接上进行双向通信。在这篇文章中，我们将学习如何使用 Express.js 构建 Websocket 应用程序。

0. 先决条件

确保你已经安装了 Node.js，如果没有，请前往 nodejs.org 下载和安装。安装 Node.js 后，你可以在终端中使用 node -v 命令检查 Node.js 的版本，使用 npm -v 命令检查 Node.js 的包管理器 npm 的版本。

1. 安装 Express.js

使用 npm 安装 Express.js：

npm install express --save

安装成功后，你可以在你应用程序的根目录下创建一个 server.js 文件，然后在文件中引入 Express.js 和创建一个 Express 应用：

const express = require('express')
const app = express()

2. 安装 websocket

使用 npm 安装 websocket：

npm install ws --save

在 server.js 文件中引入 websocket 并创建一个 WebSocket 服务器：

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', function connection(ws) {
  console.log('client connected')
  ws.send('connected')
})

上面的代码创建了一个 WebSocket 服务器，并在连接事件中打印出 client connected 和发送了一条连接信息给客户端。

3. 使用 Express 和 websocket

在 server.js 文件中添加一个 GET 路由：

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

上面的代码创建了一个 GET 路由，当访问服务器的根目录时返回一个 index.html 文件。

创建一个 index.html 文件并在其中添加一个 WebSocket 客户端：

<html>
  <head>
    <title>Websocket Example</title>
  </head>
  <body>
    <script>
      const ws = new WebSocket('ws://localhost:3000')
      ws.onmessage = function(event) {
        console.log(event.data)
      }
    </script>
  </body>
</html>

上面的代码在 HTML 中创建了一个 WebSocket 客户端，并在接收到一条消息时打印出消息内容。

最后，在 server.js 文件中启动服务器：

const server = app.listen(8080, function() {
  console.log('server started')
})

上面的代码启动了服务器，并在控制台中打印出 server started。

现在你可以使用浏览器访问 http://localhost:8080，打开控制台查看是否收到了 WebSocket 服务器发送的消息。

总结

在本文中，我们学习了如何使用 Express.js 和 websocket 库构建 Websocket 应用程序。我们创建了一个 Express 应用，然后添加了 WebSocket 服务器，并创建了一个 HTML 文件来测试我们的应用程序。如果你正在寻找一个简单的方法来构建 Websocket 应用程序，Express.js 和 websocket 库是一个不错的选择。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b38f9fadd4f0e0ffc9e75d