Node.js 中如何使用 WebSocket 实现实时通信

前言

现今互联网时代对于实时通信的要求越来越高,而 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它提供了一个事件驱动、非阻塞 I/O 的模型,使它成为了构建实时 Web 应用的理想平台。本文中将会介绍如何使用 WebSocket 在 Node.js 中实现实时通信。

WebSocket 是什么?

WebSocket 是一种网络通信协议,可以在单个 TCP 连接上提供全双工通信信道。WebSocket 协议使得在 Web 应用程序中开发实时信息交换变得更加容易。

WebSocket 与 HTTP 的区别

HTTP 协议是无状态的,每个请求和响应都是独立的。由于这种无状态的特性,HTTP 协议对于服务器与客户端之间的交互是不利的。如果需要经常性的更新数据,那么不得不通过轮询来不断的获取更新,这样不仅带来了非常多的延迟,而且也会大大降低应用程序的性能。

而 WebSocket 协议则不同,WebSocket 协议通过一个 HTTP 握手的方式来启动一个与服务器持久连接的通信信道。这个信道是全双工的,可以实现服务器与客户端之间的实时通信。WebSocket 协议相当于将一个 TCP 连接划分为两个信道,一个用于客户端发送信息,一个用于服务器发送信息,从而实现实时的双向通信。

在 Node.js 中使用 WebSocket

在 Node.js 中使用 WebSocket 需要借助 ws 库。ws 是一个简单、快速、稳定、高效的 WebSocket 实现。

安装 ws 库:

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

接下来我们看一个实现 WebSocket 实时通信的简单示例:

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

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

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

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

app.js 中,我们首先引入 ws 库,然后创建一个 WebSocket 服务器,设置端口号为 8080。

当客户端连接到服务器时,wss 触发 connection 事件,其中 ws 表示 WebSocket 连接。这个连接可以用于接收和发送消息。当客户端发送消息时,ws 触发 message 事件,并将消息参数传递给回调函数,我们可以在此回调函数中将消息广播给所有连接了服务器的客户端。

在客户端页面中,我们添加以下代码:

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

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

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

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

在客户端我们首先创建一个 WebSocket 连接,然后监听 open 事件,当连接成功后将打印 connected。然后我们监听 message 事件,当接收到来自服务器的消息时,将其显示在页面中。

在页面中添加一个表单,当用户提交表单时,我们获取输入框中的数据,向服务器发送消息。接着将输入框重置为空。

启动服务器:

---- ------

在浏览器中打开 index.html 文件,您会看到一个简单的聊天应用程序。通过这个应用程序,您可以使用 WebSocket 在服务器和客户端之间进行实时通信。

总结

本文介绍了 WebSocket 在 Node.js 中的使用,WebSocket 是一种可以满足实时通信需求的协议,在 Node.js 中可以借助 ws 库轻松实现。实现一个简单的聊天应用程序只是 WebSocket 的冰山一角,WebSocket 还有很多用途,包括实时游戏、在线编辑和协作、股票行情和实时监控等。

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


猜你喜欢

  • 在 Next.js 项目中处理无法解析模块的问题

    在 Next.js 项目中,我们通常会使用模块导入语句来引入外部模块和库。然而,有时候我们会遇到无法解析模块的问题,这可能是因为模块不存在、路径错误、模块版本不匹配等原因引起的。

    1 年前
  • 使用 PM2 部署 Node.js 应用的完整教程

    Node.js 是一个基于 V8 引擎的 JavaScript 运行环境,可以在服务器端运行 JavaScript 代码。随着 Node.js 的发展,越来越多的开发者选择使用 Node.js 来构建...

    1 年前
  • 在 CSS Grid 中优雅地处理输入框的样式

    在前端开发中,输入框是一个常见的组件,而如何优雅地处理输入框的样式是一个必备的技能。在被广泛使用的 CSS Grid 中,我们也可以轻松地实现输入框的样式。本文将介绍如何在 CSS Grid 中优雅地...

    1 年前
  • Custom Elements 遇到的性能问题及优化方法 -

    Custom Elements 遇到的性能问题及优化方法 在前端开发领域, Custom Elements 是一个极其有用的技术。 Custom Elements 可以帮助您创建全新的 HTML 元素...

    1 年前
  • Sequelize 与 PostgreSQL 的完美结合指南

    前言 Sequelize 是一款基于 Promise 的 Node.js ORM(对象关系映射)框架,它支持多种 SQL 数据库,包括 MySQL、PostgreSQL、SQLite、Microsof...

    1 年前
  • Mongoose 数据库连接超时问题解决方案

    Mongoose 数据库连接超时问题解决方案 Mongoose 是一个优秀的 Node.js 的 MongoDB 对象建模工具,它可以提供更好的 MongoDB 数据库操作 API,更友好的错误提示以...

    1 年前
  • Fastify 应用程序中的数据库事务操作教程

    在开发 Web 应用程序时,数据库操作是必不可少的一环。而在处理事务时,我们需要确保对数据库的操作是原子性的、一致性的、隔离性的和持久性的。Fastify 是一个快速和低开销的 Node.js Web...

    1 年前
  • JS 的现代开发:从 ES6 到 ES9,你需要知道的所有新特性

    JS 的现代开发:从 ES6 到 ES9,你需要知道的所有新特性 随着前端技术的不断发展,我们对 JavaScript 的需求也越来越高。JavaScript 语法的不断更新也有助于我们更好地使用它。

    1 年前
  • Angular 中如何使用 rxjs Observables 实现异步数据获取

    在 Angular 中,我们经常需要使用异步方式获取数据,例如从 API 或者后台服务器获取数据。在过去的几年中,Angular 的开发团队都一直在积极推广使用 rxjs(响应式编程)的概念和理念,特...

    1 年前
  • Enzyme 教程:使用 React 测试组件

    如果你是一名前端工程师,你一定知道测试对于项目的重要性。特别是在 React 中,由于组件占据了开发的核心地位,因此测试组件的正确性非常关键。而 Enzyme 就是一款适合用于 React 组件测试的...

    1 年前
  • Headless CMS 如何支持企业级数据安全和权限控制

    在前端开发中,我们经常会使用内容管理系统(CMS)来管理网站的数据。近年来,Headless CMS 已经成为了越来越受欢迎的一种解决方案。与传统 CMS 不同,Headless CMS 不负责管理前...

    1 年前
  • 如何在 Vue 中使用 Tailwind CSS | 自学 IT 学院

    如何在 Vue 中使用 Tailwind CSS 在前端开发中,CSS 是不可或缺的一部分。但随着项目复杂度的增加,手写 CSS 样式往往会变得难以维护,因此出现了一系列 CSS 框架和预处理器,如 ...

    1 年前
  • Vue.js 中如何兼容 IE8 及以下浏览器

    Vue.js 是一种流行的前端 JavaScript 框架,但是 Vue.js 的官方文档中默认不支持 IE8 及以下浏览器,这让许多开发者头痛不已。本文将介绍如何在 Vue.js 中兼容 IE8 及...

    1 年前
  • LESS 中如何使用选择器优化 CSS 代码

    在前端开发中,CSS 是必不可少的,但是 CSS 写起来十分繁琐,而且 CSS 文件过大会严重影响页面的加载速度。为了解决这个问题,我们可以使用 LESS 来优化 CSS 代码。

    1 年前
  • Node.js 实现即时通讯之 Socket.io

    在实现 web 即时通讯的过程中,通常需要通过 WebSocket 协议来完成数据传输。而在 Node.js 中,使用 Socket.io 可以轻松地实现 WebSocket 服务,使得实现即时通讯变...

    1 年前
  • 如何解决 Vue SPA 中数据修改后页面的不刷新问题

    随着前端开发的日益普及,越来越多的企业和开发者选择了开发单页应用(Single Page Application,SPA),其中 Vue 是目前较为流行的框架之一。

    1 年前
  • 如何使用 Performance Optimization 优化你的 MySQL 数据库

    MySQL 是前端开发中最常用的关系型数据库之一,在应用程序中经常用于存储数据。然而,随着数据库中数据越来越多,查询速度可能会逐步变慢,并且可能耗费更多的内存和 CPU 资源。

    1 年前
  • CSS Flexbox 中主轴和交叉轴的区别与应用

    Flexbox 是 CSS3 中新的布局方式,它可以使我们能够更加高效地布局和对齐元素,特别是在响应式设计中更加方便。在 Flexbox 中,有两个非常重要的概念,即主轴和交叉轴。

    1 年前
  • 如何使用 AngularJS 与 RESTful API 构建前端应用

    前端应用已经成为了不可或缺的一部分,而搭建一个高效的前端应用需要我们采用同样高效的技术工具。AngularJS 和 RESTful API 都是我们常见的技术栈,本文将深入讲解 AngularJS 和...

    1 年前
  • 十二条响应式设计技巧

    在当前这个移动设备普及的时代,响应式设计已成为前端设计中的重要技术。而要实现良好的响应式设计,需要有一定的技巧。下面是本文总结的十二条响应式设计技巧。 1. 使用流式布局 流式布局是指采用百分比尺寸而...

    1 年前

相关推荐

    暂无文章