Express.js 中 WebSocket 的使用指南

随着现代 Web 应用程序的复杂化和实时性要求的增加,WebSocket 在 Web 应用程序中的使用已经变得越来越普遍。WebSocket 是一种在浏览器和服务器之间建立全双工通信的技术,它可以通过单个 TCP 连接实现实时更新和传输数据。在本文中,我们将介绍如何在 Express.js 中使用 WebSocket。

WebSocket 的基本概念

WebSocket 是一个基于事件驱动的协议,可以在客户端和服务器之间进行双向通信。WebSocket 协议在建立连接时使用 HTTP 协议,握手完成后在同一个 TCP 连接上进行通信。WebSocket 连接是全双工的,这意味着服务器和客户端可以同时发送和接收消息。

在 JavaScript 中,我们可以使用 WebSocket API 来创建 WebSocket 连接。例如,以下代码将创建一个连接到 ws://localhost:8080 的 WebSocket:

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

一旦建立连接,我们就可以通过监听 message 事件获取服务器发送的消息:

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

当我们想要向服务器发送消息时,我们可以使用 send 方法:

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

在 Express.js 中使用 WebSocket

虽然 WebSocket 的 API 可以在浏览器中使用,但在服务器端实现 WebSocket 连接需要使用一些不同的技术。幸运的是,有一些现成的解决方案可以轻松地将 WebSocket 添加到 Express.js 中。

在 Express.js 中,我们可以使用 express-ws 中间件来添加 WebSocket 功能。首先,我们需要安装 express-ws

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

接下来,在我们的 Express.js 应用程序中添加中间件:

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

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

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

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

在上面的代码中,我们使用了 app.ws 方法来定义 WebSocket 端点。ws 回调接受两个参数: ws 对象表示 WebSocket 连接,req 对象是 ws 对象的请求实例。我们可以使用 ws 对象的 on 方法来监听 WebSocket 事件,例如 message 事件。当收到消息时,我们可以使用 ws.send 方法向客户端发送消息。

现在,我们已经创建了一个 WebSocket 服务器并开始监听来自客户端的连接请求。让我们看一下如何在客户端中连接 WebSocket 服务器和发送和接收消息。

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

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

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

在上面的代码中,我们使用 WebSocket API 创建了一个 WebSocket 连接,然后监听 open 事件来检测连接是否已建立。当连接已建立时,我们可以使用 send 方法向服务端发送消息来验证连接是否工作正常。然后,我们监听 message 事件以获取从服务器发送的消息。

总结

WebSocket 提供了一个灵活而强大的方法来实现实时网络通信。有了 express-ws 中间件,我们可以轻松地在 Express.js 应用程序中添加 WebSocket 功能。在本文中,我们介绍了如何在 Express.js 中使用 WebSocket,包括建立 WebSocket 连接和发送和接收消息的基本操作。希望这篇文章能够帮助您更好地理解和使用 WebSocket。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a524b848841e989419ade3


猜你喜欢

  • 在 Next.js 项目中使用 Supabase 的完整指南

    在 Next.js 项目中使用 Supabase 的完整指南 Supabase 是一个开源的后台服务,它提供了一系列数据库和身份验证功能,可以帮助开发者快速搭建应用。

    1 年前
  • 解决 React Native 应用中的布局问题

    React Native 是一种流行的跨平台移动应用开发框架。和 React 类似,React Native 也采用了组件化的开发模式,但是与 React 不同的是,React Native 是通过 ...

    1 年前
  • SASS 中使用 CSS media queries 的方法

    在前端开发中,响应式设计是非常重要的,因为现在大多数用户都会使用各种设备来访问网站,比如手机、平板、台式机等等。因此,我们需要编写能够适应不同屏幕尺寸的样式。而使用 CSS media queries...

    1 年前
  • AngularJS 单页应用 SEO 优化实践

    随着单页应用(SPA)的流行,越来越多的网站已经采用了 AngularJS 这样的前端框架来构建其 SPA。然而,SPA 对搜索引擎优化(SEO)方面的支持存在挑战,因为搜索引擎爬虫通常只能获取静态 ...

    1 年前
  • 学习 ES11:ECMAScript 2020 中的块级作用域变量声明 let/const

    在早期 JavaScript 中,变量声明只有 var 这一种方式,在全局作用域和函数作用域中都可以使用。然而,由于变量的提升机制,导致一些不可预料的问题,比如重复声明变量或变量的声明与使用不在同一个...

    1 年前
  • ESLint 在 Node.js 项目中的优化实践

    ESLint 是一个广泛使用的 JavaScript 静态代码分析工具,它能够帮助我们在编码过程中尽早地发现代码问题,提高代码质量。在 Node.js 项目中使用 ESLint 可以帮助我们检测代码规...

    1 年前
  • 利用 Docker 构建 CI/CD 流水线,从容器化构建到应用编译部署全过程学习

    随着互联网的不断发展,传统的 SDLC(软件开发生命周期)已经不能满足现代项目的需求,CI(持续集成)和CD(持续交付/部署)成为了现代项目开发的标配。而 Docker 作为一个流行的容器化解决方案,...

    1 年前
  • Kubernetes 中容器运行日志处理方案

    在 Kubernetes 集群中,容器是运行在 Pod 中的基本单位。Kubernetes 提供了多种机制来收集和处理容器的运行日志,这对于维护应用的健康状态和排除问题非常重要。

    1 年前
  • Custom Elements 中自定义事件的注册及触发方法

    在 Web 开发过程中,为了让页面更加交互和响应用户的操作,往往需要使用 JavaScript 来注册和触发事件。在 Custom Elements 中,我们可以通过自定义事件来让组件与外部的代码进行...

    1 年前
  • ES9(ECMAScript 2018)中的正则表达式 named capture groups

    正则表达式是前端开发中不可或缺的工具之一。在 ECMAScript 2018 中,引入了一项新的特性——“命名捕获组(named capture groups)”,在处理正则表达式匹配时可以大大提高代...

    1 年前
  • Sequelize 使用过程中如何处理并发风险

    前言 Sequelize 是一款 Node.js 中 ORM 框架,可以方便地操作数据库。在实际开发中,Sequelize 经常用于解决与数据库相关的一些问题。然而,在使用 Sequelize 进行并...

    1 年前
  • Mongoose 中的 populate 操作的性能优化

    在使用 Mongoose 进行开发时,populate 是非常常见的操作,用于在查询时将关联的数据一起获取。但是,在关联的数据比较多时,populate 可能会大幅度影响查询性能。

    1 年前
  • LESS 编译后样式不生效的解决方法

    在前端开发中,LESS 是一种非常流行的 CSS 预处理器。它具有许多强大的功能,如变量、混合、嵌套等,能够让我们编写更加简洁、优雅的样式代码。但是,在使用 LESS 的时候,我们有时会遇到编译后样式...

    1 年前
  • CSS Reset 如何解决 HTML 中 input 样式问题?

    前言 当我们在开发前端项目时,可能会遇到一些奇怪的样式问题。比如说在使用 input 标签时,文本框的样式不同,而且往往难以修改。这个问题通常可以通过 CSS Reset 的方式来解决。

    1 年前
  • Redis 中如何实现类似于 MySQL 的 limit 操作?

    在前端开发过程中,我们经常需要对大量的数据进行操作。而 Redis 作为一个高性能的 NoSQL 数据库,也是很常用的一种数据库,可以方便地进行数据的操纵和处理。其中,针对于较大的数据量,常常需要使用...

    1 年前
  • Flexbox 布局下的 li 元素基线对齐问题

    Flexbox 布局在现代 Web 开发中非常常用。然而,当使用 Flexbox 布局时,有时候会遇到一些奇怪的问题,其中一个是 li 元素(或其他行内块元素)的基线对齐问题。

    1 年前
  • 理解 ES12 中的函数柯里化 (Currying) 的实用技巧

    函数柯里化是一种很有用的技术,也是函数式编程中的重要概念。它可以让我们把一个函数拆分成多个部分,每个部分都只接受单一的参数,这样既方便了代码的组合和复用,也让代码更加可读和简洁。

    1 年前
  • Vue.js 中使用插件扩展功能的方法

    在 Vue.js 中,插件是一种扩展 Vue.js 功能的常见方式。Vue.js 的插件系统非常灵活,可以用来实现一些常见的功能,比如全局变量和工具函数等。 插件的定义和使用 在 Vue.js 中,插...

    1 年前
  • Headless CMS 构建跨境电商站点的实践

    随着互联网的发展,越来越多的企业开始将业务拓展到全球市场,跨境电商也随之兴起。对于跨境电商网站而言,国际化就成为了一个非常重要的问题。如何更好地支持多语言、多货币,并保持高效率便成了关键。

    1 年前
  • 使用 Socket.io 实现前端实时通信

    随着 Web 技术的不断发展,实时通信成为了一个非常重要的应用场景,比如在线聊天、多人协作等都需要实时通信的功能。而 Socket.io 就是一个非常好用的实时通信框架,它可以同时支持 Web 端和服...

    1 年前

相关推荐

    暂无文章