如何用 Express.js 实现 Websockets

Websockets是一种基于TCP连接的双向通信协议,可以在客户端和服务器之间建立实时的、持续的、双向的通信通道。这种通信模式适合实现一些需要实时性和即时性的场景,比如在线聊天、协同编辑等。

在本文中,我们将通过Express.js来实现Websockets。Express.js是一个流行的Node.js web应用程序框架,它可以帮助我们快速搭建web应用并实现各种功能。让我们开始吧。

前置条件

在开始之前,您需要安装Node.js和Express.js。

创建一个Express.js应用程序

我们从创建一个基本的Express应用程序开始,以便于我们能够添加Websockets支持。打开命令行窗口并输入以下命令:

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

接下来,打开index.js文件并将以下代码复制到该文件中:

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

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

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

这个应用程序包含一个HTTP服务器,运行在3000端口上,并返回一个index.html文件作为根路径的响应。接下来,我们将为我们的应用程序添加Websockets支持。

使用Websockets

现在来看一下如何在Express.js应用程序中使用Websockets。我们将使用wsnpm模块来实现此功能。打开命令行窗口并输入以下命令:

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

接下来,我们需要对我们的Express应用程序进行一些修改以支持Websockets。打开index.js文件并将以下代码添加到文件底部。

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

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

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

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

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

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

这段代码中,我们创建了一个WebSocket服务器,并在8080端口监听连接。当一个客户端连接上Websocket服务器后(使用浏览器客户端可以打开该链接),我们将在服务器端打印“New client connected”的消息。当客户端发送消息时,我们将在服务器端打印“Client message:message”的消息。当客户端断开连接时,我们将在服务器端打印“Client disconnected”消息。

同时,我们使用ws.send方法发送“Welcome to the chat room!”消息到客户端。现在我们已经完成了我们的应用程序设置。让我们启动它并测试。

测试

我们使用以下命令来启动我们的Express应用程序:

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

在浏览器中打开http://localhost:3000链接,应该会看到一个带有“Welcome to Express.js websockets”标题的空页面。接下来,启动一个新终端,输入以下命令:

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

这个命令将启动一个WebSocket客户端,连接到我们刚刚设置的WebSocket服务器。在客户端输入任何消息,例如:“hello”,将输出以下内容:

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

在服务器端,查看命令行终端,将会看到以下消息:

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

恭喜您,您已经成功地使用Express.js实现了Websockets。

总结

在这篇文章中,我们使用Express.js和ws模块展示了如何实现Websockets。通过使用这种技术,我们现在可以轻松地构建实时的和基于事件的应用程序。

只要我们有一个WebSocket服务器和客户端,我们就可以在不同的平台上实现Websockets通信。在构建在线聊天室、游戏、协同编辑器等实时性的应用程序时,Websockets是一个非常有用的技术。希望这篇文章能够帮助您更好地理解如何在Express.js应用程序中使用Websockets。

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


猜你喜欢

  • 在 Fastify 应用程序中部署 OpenAPI

    什么是 Fastify Fastify 是一个快速、低开销的 Web 框架,可以用于部署 Node.js 应用程序。它在效率和性能方面优于很多其他流行的 Web 框架,比如 Express 和 Koa...

    9 个月前
  • 解决 Express.js 中 POST 请求数据格式错误的问题

    在使用 Express.js 开发 Web 应用时,常常需要处理 POST 请求。然而,当 POST 请求中的数据格式出现错误时,可能会导致应用出现错误,甚至崩溃。

    9 个月前
  • 如何使用 Enzyme 测试 React 中的多边形图形组件

    React 是一种流行的前端框架,可以用于构建可重用的组件。在本文中,我们将介绍如何使用 Enzyme 测试 React 中的多边形图形组件。 Enzyme 是什么? Enzyme 是一个用于 Rea...

    9 个月前
  • Hapi 和 Seeli-Mongoose 实现 MongoDB 数据库操作

    Hapi 和 Seeli-Mongoose 实现 MongoDB 数据库操作 在前端开发中,涉及到数据库操作时,我们通常使用 MongoDB 数据库。而在 Node.js 环境下,使用 Hapi 和 ...

    9 个月前
  • 在 Deno 中如何使用 Express?

    在 Deno 中使用 Express 和在 Node.js 中使用非常相似。Express 是一个流行的 Node.js Web 应用程序框架。使用 Express,您可以轻松地构建具有路由、中间件和...

    9 个月前
  • 如何使用 Socket.io 构建完全实时的聊天应用

    在现代 Web 应用程序中,我们越来越经常需要实时性,这包括聊天应用、实时游戏和协同工具等。 Socket.io 是一个基于 Node.js 的实时 Web 应用程序框架,提供了一种简单的方式来构建实...

    9 个月前
  • Enzyme 与 Jest 如何配合使用测试 React 组件的交互与渲染

    Enzyme 与 Jest 如何配合使用测试 React 组件的交互与渲染 React 组件是前端开发中一个非常核心的概念,在 React 应用中的每一个组件都扮演着至关重要的角色。

    9 个月前
  • 如何在 Web Components 中使用 JavaScript Promises 来处理异步操作

    随着 Web Components 技术的发展,现代前端应用不断地向组件化方向发展。在组件化开发中,处理异步操作是不可避免的。本文将介绍如何在 Web Components 中使用 JavaScrip...

    9 个月前
  • 使用 LESS 时如何避免出现样式覆盖问题?

    在前端开发中,我们经常会遇到样式覆盖的问题,这是由于多个样式规则作用于同一元素,最终只有一个样式起作用,经常会导致样式出现异常甚至无法达到预期目的。为解决这个问题,我们可以使用 LESS 这个 CSS...

    9 个月前
  • 在 TypeScript 中使用 ES6 Promise:完美指南

    在 TypeScript 中使用 ES6 Promise:完美指南 ES6 Promise 是 JavaScript 中非常强大的异步编程模型,可以方便地解决异步回调地狱的问题,使代码更加简洁易读。

    9 个月前
  • Mocha 测试中出现 “chunk failed to be read” 错误的解决方法

    在进行 JavaScript 前端开发时,常常需要使用 Mocha 进行单元测试。然而,有时候在执行测试时,会出现 “chunk failed to be read” 错误,导致测试无法正常执行。

    9 个月前
  • RESTful API 设计中的幂等性原则详解

    在 RESTful API 的设计中,幂等性是一个十分重要的原则。幂等性的含义是,对于同一个请求,无论进行多少次操作,产生的结果都是一样的。在 API 的使用中,这个原则能够保证数据的一致性和可靠性,...

    9 个月前
  • Next.js 中如何使用 CSS Modules?

    在前端开发中,CSS Modules 是一个非常流行的技术,可以帮助我们更好地组织样式代码,避免命名冲突和样式污染。在 Next.js 中,使用 CSS Modules 也非常方便。

    9 个月前
  • Mongoose Date 类型时间戳陷阱与解决方式

    在使用 Mongoose 开发 Node.js 项目时,我们经常会使用 Date 类型来存储时间戳。但是,在使用过程中,我们可能会遇到一些令人困惑的问题。本文将介绍 Date 类型时间戳的陷阱以及解决...

    9 个月前
  • TailwindCSS 教程:为什么需要配置 Webpack?

    TailwindCSS 是一种流行的 CSS 框架,它提供了许多工具和类帮助我们快速构建现代化的网站界面。TailwindCSS 可以轻松定制,在不同的项目中灵活适配。

    9 个月前
  • Docker 部署 Rails 应用指南

    作为一名前端工程师,我们经常需要部署应用程序。Docker 作为目前最流行的容器化解决方案,能够为应用程序提供更高效、安全、可靠的部署方式。在这篇文章中,我们将重点介绍如何使用 Docker 来部署 ...

    9 个月前
  • ES12 中引入的新 Number BigInt 型函数:引入 Pow()、Mod()、Sqrt()

    在 ES12 版本中,引入了一种新的数据类型:BigInt。相较于 Number 类型,BigInt 类型的数值范围更大,可以处理远超 JavaScript 数值精度范围的计算。

    9 个月前
  • 使用 Chai 进行 API 测试时如何处理不稳定的测试数据

    使用 Chai 进行 API 测试时如何处理不稳定的测试数据 在进行 API 测试的过程中,我们可能会遇到一些不稳定的测试数据。这些数据可能会因为各种原因而发生变化,例如某个接口返回的数据结构有所改变...

    9 个月前
  • Kubernetes 中的异地多活方案设计

    在分布式系统中,异地多活 (geo-replication) 是一项非常重要的技术,它可以将数据在多个地理位置进行备份和同步,以避免单点故障和服务中断。Kubernetes 作为一种容器编排引擎,也需...

    9 个月前
  • ES11 中使用 Optional Chaining Operator 解决深层次属性引用问题

    在前端开发中,经常会遇到需要引用深层次属性(如嵌套对象或数组)的情况,而在访问嵌套属性时,如果中间的属性为空或未定义,就会出现“Cannot read property XXX of undefine...

    9 个月前

相关推荐

    暂无文章