使用 Express.js 实现 WebSocket

阅读时长 6 分钟读完

WebSocket 是一种在 Web 应用程序中的持久性协议,它允许客户端和服务器之间进行双向通信。而 Express.js 是一个流行的 Node.js Web 框架,可以用于构建 Web 应用程序的后端。在本文中,我们将学习如何使用 Express.js 实现 WebSocket。

WebSocket 基础知识

在介绍如何使用 Express.js 实现 WebSocket 之前,让我们先了解一下 WebSocket 的基础知识。

WebSocket 是一种基于 TCP 的协议,它与 HTTP 协议类似,但是它是双向的。WebSocket 通过一个 HTTP 请求开始通信,在通信过程中可以发送和接收任意数量的数据帧。WebSocket 消息可以是文本或二进制数据。

在客户端和服务器建立连接之后,它们可以自由地发送消息,直到连接被关闭。与 HTTP 不同的是,WebSocket 连接在建立后不会被关闭,直到其中一方请求关闭为止。

Express.js WebSocket 实现步骤

接下来,我们将使用 Express.js 实现 WebSocket。我们将会使用 ws 库,它是一个 WebSocket 实现的 Node.js 库。

第一步:安装依赖

我们需要在项目中安装 expressws 依赖。

第二步:创建 Express 应用

app.js 文件中,我们需要创建一个 Express 应用。

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------

------------ ------------- ---- -
  --------------- ---------
---

---------------- ---------- -
  -------------------- --- --------- -- ---- -------
---

这是一个基本的 Express 应用,它监听 3000 端口并返回 "Hello World!"。

第三步:创建 WebSocket 服务器

我们需要创建一个 WebSocket 服务器,在监听连接时接受和处理消息。我们使用 ws 库来创建 WebSocket 服务器。

app.js 文件中添加以下代码:

-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---

-------------------- -------- -------------- -
  ---------------------- ------------

  ---------------- -------- -------------- -
    --------------------- ---------- ------
    ------------ ----- - - ------
  ---

  -------------- -------- ------- -
    ---------------------- ---------------
  ---
---

这是一个简单的 WebSocket 服务器。当客户端连接时,wss.on('connection', ...) 会被调用。在连接建立后,我们可以使用 ws.on('message', ...) 接收来自客户端的消息。

当客户端发送消息时,ws.on('message', ...) 会被调用。在这里,我们简单地记录了消息并通过 ws.send() 发送回客户端。

在关闭连接时,ws.on('close', ...) 会被调用。

第四步:创建 WebSocket 客户端

我们需要创建一个 WebSocket 客户端来连接和测试服务器。在浏览器中,我们可以使用 JavaScript WebSocket 对象来创建 WebSocket 客户端。

index.html 文件中添加以下代码:

-- -------------------- ---- -------
--------- -----
------
------
  ---------------- ------------
  --------
    --- -- - --- ---------------------------------

    ---------- - --------------- -
      ------------------------ -------- -------
    --

    --------- - --------------- -
      ---------------------- ---------
      --------------- -------------
    --

    ------------ - --------------- -
      --------------------- ---------- ------------
    --

    ---------- - --------------- -
      ---------------------- ---------
    --
  ---------
-------
------
  ------------- ---------
-------
-------

这是一个使用 JavaScript WebSocket 对象创建的 WebSocket 客户端。当客户端连接成功时,ws.onopen 会被调用。我们可以在这里发送一个 "Hello, WebSocket!" 的消息。

当服务器发送消息时,ws.onmessage 会被调用。在这里,我们简单打印了收到的消息。

在断开连接时,ws.onclose 会被调用。

第五步:运行应用程序

现在我们已经实现了 WebSocket 服务器和客户端。我们可以在终端中运行以下命令启动应用程序:

在浏览器中打开 http://localhost:3000,打开控制台,我们可以看到 WebSocket 客户端连接成功,并发送了一个 "Hello, WebSocket!" 的消息。在控制台中,我们应该会看到服务器回复了同样的消息。

总结

在本文中,我们学习了使用 Express.js 和 ws 库实现 WebSocket 的步骤。我们创建了一个 WebSocket 服务器和客户端,并在服务器接收和处理消息。这个例子展示了如何实现简单的 WebSocket 协议。

WebSocket 为客户端和服务器之间的双向通信提供了一种简单的选择。通过使用 Express.js 和 ws 库,你可以在你的应用程序中轻松地实现 WebSocket。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ccb87c5ad90b6d042b04e5

纠错
反馈