输出:

  1. 客户端日志
   Connected to WebSocket server   Message from server: Hello, you sent -> Hello from client
  1. 服务器日志
   Client connected   Received: Hello from client

Socket.IO:简化的 WebSocket

虽然 WebSocket 功能强大,但它们需要一些手动工作来处理重新连接、广播和管理后备(例如长轮询)等事件。 Socket.IO 通过提供以下功能简化了实时通信:

第1步:安装Socket.IO

npm install socket.io

第2步:创建Socket.IO服务器

const http = require(\\'http\\');const socketio = require(\\'socket.io\\');// Create an HTTP serverconst server = http.createServer();const io = socketio(server);io.on(\\'connection\\', (socket) => {    console.log(\\'Client connected\\');    // Listen for messages from the client    socket.on(\\'message\\', (msg) => {        console.log(\\'Received message:\\', msg);        socket.emit(\\'message\\', `Server received: ${msg}`);    });    // On client disconnect    socket.on(\\'disconnect\\', () => {        console.log(\\'Client disconnected\\');    });});server.listen(3000, () => {    console.log(\\'Socket.IO server running on http://localhost:3000\\');});

这里:

第3步:创建Socket.IO客户端

            Socket.IO Client    

Socket.IO Example

在此示例中,Socket.IO 客户端自动处理与服务器的连接并允许双向通信。

输出:

  1. 客户端日志
   Connected to server   Message from server: Server received: Hello from client
  1. 服务器日志
   Client connected   Received message: Hello from client

WebSocket 和 Socket.IO 的用例

4.1 实时聊天应用

问题:消息平台需要实现用户之间的实时通信。

解决方案:WebSockets(或Socket.IO)提供事件驱动的持久连接,允许用户无延迟地实时发送和接收消息。

4.2 实时协作文档编辑

问题:协作处理文档的用户需要立即查看其他人所做的更改。

解决方案:通过使用 WebSocket,更改会实时推送到所有客户端,确保文档在所有用户之间保持同步。

4.3 Web 应用程序中的通知

问题:Web 应用程序需要通知用户新消息、更新或警报等事件。

解决方案:WebSockets允许服务器在事件发生时立即向客户端推送通知,提高用户参与度。

扩展 WebSocket 和 Socket.IO

扩展 WebSocket 和 Socket.IO 具有挑战性,因为它们具有持久性。每个 WebSocket 连接都是一个长期存在的 TCP 连接,随着连接数量的增加,它可能会变得资源密集型。

常见的扩展策略:

  1. 水平扩展:跨多个服务器负载平衡 WebSocket 流量。
  2. 粘性会话:确保来自客户端的所有 WebSocket 连接都路由到同一服务器。
  3. Redis for Pub/Sub:使用Redis进行跨服务器的事件发布和订阅,确保所有客户端都能收到实时更新。
npm install socket.io-redis

下面是配置 Socket.IO 使用 Redis 的示例:

const io = require(\\'socket.io\\')(server);const redisAdapter = require(\\'socket.io-redis\\');io.adapter(redisAdapter({ host: \\'localhost\\', port: 6379 }));

结论

WebSockets 和 Socket.IO 是现代 Web 应用程序中实时通信的基本技术。虽然 WebSocket 为全双工通信提供了低级协议,但 Socket.IO 简化了实现,提供了自动重新连接和广播等附加功能。这两种技术在现实世界中都有重要的应用,从聊天应用程序到协作工具。

在下一篇文章中,我们将深入研究 Node.js Streams 并探索它们如何有效地处理大数据,重点关注可扩展性和性能。

","image":"http://www.luping.net/uploads/20241017/17291584876710dd57bf9e9.jpg","datePublished":"2024-11-08T16:58:22+08:00","dateModified":"2024-11-08T16:58:22+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Node.js 中与 WebSockets 和 Socket.IO 的实时通信

Node.js 中与 WebSockets 和 Socket.IO 的实时通信

发布于2024-11-08
浏览:467

Real-time communication with WebSockets and Socket.IO in Node.js

现代 Web 应用程序通常需要实时通信,无论是聊天系统、实时更新、协作编辑还是通知。传统的 HTTP 通信不足以满足实时应用程序的需要,因为它依赖于请求-响应模式。这就是 WebSockets 发挥作用的地方,它允许服务器和客户端之间进行全双工通信。

在本文中,我们将探讨:

  1. WebSocket 是什么,以及为什么它们对于实时应用程序至关重要。
  2. 如何在 Node.js 中实现 WebSocket。
  3. 使用 Socket.IO 简化 WebSocket 实现。
  4. 实际用例示例。

什么是 WebSocket?

WebSockets 是一种通过单个 TCP 连接提供全双工通信通道的协议。与传统的 HTTP 请求不同,传统的 HTTP 请求基于请求-响应并且在不断建立新连接方面存在开销,WebSocket 允许持久通信。

主要特点:

  • 全双工通信:客户端和服务器端都可以随时发送消息,无需互相等待。
  • 更低延迟:WebSocket 无需不断打开和关闭连接,从而减少延迟并提高实时应用程序的性能。
  • 事件驱动:双方都可以推送数据,非常适合聊天、游戏或实时通知等动态应用。

在 Node.js 中实现 WebSocket

第1步:安装ws WebSocket库

在 Node.js 中,WebSocket 不是内置的,因此我们需要一个库。 Node.js 最流行的 WebSocket 库之一是 ws.

npm install ws

第 2 步:创建 WebSocket 服务器

这是一个使用 ws 库的简单 WebSocket 服务器:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log('Received:', message);
        // Respond to the client
        ws.send(`Hello, you sent -> ${message}`);
    });

    // On client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

在此示例中:

  • 我们在端口 8080 上创建一个 WebSocket 服务器。
  • 当客户端连接时,连接事件触发。
  • 服务器侦听来自客户端的消息并用确认消息进行响应。
  • 如果客户端断开连接,我们会记录一条消息。

第 3 步:创建 WebSocket 客户端

您可以在浏览器中使用 JavaScript 创建 WebSocket 客户端:



    WebSocket Client

WebSocket Example

  • 当 WebSocket 连接打开时,客户端会记录一条成功消息。
  • 单击按钮时会向服务器发送一条消息,并显示服务器的响应。

输出:

  1. 客户端日志
   Connected to WebSocket server
   Message from server: Hello, you sent -> Hello from client
  1. 服务器日志
   Client connected
   Received: Hello from client

Socket.IO:简化的 WebSocket

虽然 WebSocket 功能强大,但它们需要一些手动工作来处理重新连接、广播和管理后备(例如长轮询)等事件。 Socket.IO 通过提供以下功能简化了实时通信:

  • 自动重连。
  • 向多个客户端广播事件。
  • 如果不支持 WebSockets,则退回到轮询。

第1步:安装Socket.IO

npm install socket.io

第2步:创建Socket.IO服务器

const http = require('http');
const socketio = require('socket.io');

// Create an HTTP server
const server = http.createServer();
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log('Received message:', msg);
        socket.emit('message', `Server received: ${msg}`);
    });

    // On client disconnect
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server running on http://localhost:3000');
});

这里:

  • 我们使用 Socket.IO 创建一个服务器来侦听连接和传入消息。
  • socket.emit 用于将消息发送回客户端。

第3步:创建Socket.IO客户端



    Socket.IO Client

Socket.IO Example

在此示例中,Socket.IO 客户端自动处理与服务器的连接并允许双向通信。

输出:

  1. 客户端日志
   Connected to server
   Message from server: Server received: Hello from client
  1. 服务器日志
   Client connected
   Received message: Hello from client

WebSocket 和 Socket.IO 的用例

4.1 实时聊天应用

问题:消息平台需要实现用户之间的实时通信。

解决方案:WebSockets(或Socket.IO)提供事件驱动的持久连接,允许用户无延迟地实时发送和接收消息。

4.2 实时协作文档编辑

问题:协作处理文档的用户需要立即查看其他人所做的更改。

解决方案:通过使用 WebSocket,更改会实时推送到所有客户端,确保文档在所有用户之间保持同步。

4.3 Web 应用程序中的通知

问题:Web 应用程序需要通知用户新消息、更新或警报等事件。

解决方案:WebSockets允许服务器在事件发生时立即向客户端推送通知,提高用户参与度。

扩展 WebSocket 和 Socket.IO

扩展 WebSocket 和 Socket.IO 具有挑战性,因为它们具有持久性。每个 WebSocket 连接都是一个长期存在的 TCP 连接,随着连接数量的增加,它可能会变得资源密集型。

常见的扩展策略:

  1. 水平扩展:跨多个服务器负载平衡 WebSocket 流量。
  2. 粘性会话:确保来自客户端的所有 WebSocket 连接都路由到同一服务器。
  3. Redis for Pub/Sub:使用Redis进行跨服务器的事件发布和订阅,确保所有客户端都能收到实时更新。
npm install socket.io-redis

下面是配置 Socket.IO 使用 Redis 的示例:

const io = require('socket.io')(server);
const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

结论

WebSockets 和 Socket.IO 是现代 Web 应用程序中实时通信的基本技术。虽然 WebSocket 为全双工通信提供了低级协议,但 Socket.IO 简化了实现,提供了自动重新连接和广播等附加功能。这两种技术在现实世界中都有重要的应用,从聊天应用程序到协作工具。

在下一篇文章中,我们将深入研究 Node.js Streams 并探索它们如何有效地处理大数据,重点关注可扩展性和性能。

版本声明 本文转载于:https://dev.to/imsushant12/real-time-communication-with-websockets-and-socketio-in-nodejs-4p8e?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • TypeScript 与 JavaScript:开发人员的主要区别
    TypeScript 与 JavaScript:开发人员的主要区别
    JavaScript 是网络的核心语言,而 TypeScript 是基于它的现代增强语言。两者都很强大,但它们的用途略有不同。这是一个快速细分: 1. 类型安全 JavaScript:松散类型。变量可以动态更改类型,从而导致潜在的运行时错误。 TypeScript:静态类型。您定义类...
    编程 发布于2024-11-08
  • JavaScript 能否为不可预测的属性实现动态 Getter 和 Setter?
    JavaScript 能否为不可预测的属性实现动态 Getter 和 Setter?
    JavaScript 可以实现动态 Getters/Setters 吗?动态 getters 和 setters 允许 JavaScript 对象处理超出预定义属性的属性访问和修改。虽然早期的 JavaScript 技术对已知属性使用特定的 getter 和 setter,但本文探讨了为任何未定义的...
    编程 发布于2024-11-08
  • 我的第一个使用 Python 构建的开源项目,通过 CLI 快速检查数据库
    我的第一个使用 Python 构建的开源项目,通过 CLI 快速检查数据库
    我的问题是: 在处理其他项目时,我发现自己总是必须连接并使用 SELECT * 来查看虚拟条目或新用户。我更喜欢使用 CLI 来监视我的数据库条目,特别是因为我正在测试并只是将虚拟用户添加为项目中的第一个普通用户。因此,总是需要连接到 postgres、mysql 并从 CLI 进行 select ...
    编程 发布于2024-11-08
  • PHP,永不倒下的大象!
    PHP,永不倒下的大象!
    照片由 Ben Griffiths 在 Unsplash 上拍摄 PHP是一种广受好评的语言,同时也受到其他人的批评,有人说它正在消亡,但真的是这样吗,值得花时间学习PHP吗? PHP PHP 是 Rasmus Lerdorf 在 90 年代开发的一种编程语言,最初它被开发为一种服务...
    编程 发布于2024-11-08
  • 如何从 Android 应用程序安全访问远程 MySQL 数据库?
    如何从 Android 应用程序安全访问远程 MySQL 数据库?
    使用 JDBC 在 Android 中访问远程 MySQL 数据库:综合分析使用 JDBC API 从 Android 应用程序远程连接到 MySQL 数据库是一种常见的操作移动开发者之间的问题。虽然建立直接连接在技术上是可行的,但它带来了重大的安全和性能问题。安全影响允许 Android 应用程序...
    编程 发布于2024-11-08
  • 使用 CSS 创建自定义鼠标光标
    使用 CSS 创建自定义鼠标光标
    Written by Samson Omojola✏️ Editor’s note: This article was last updated by Njong Emy on 5 August 2024 to update content and code blocks, as well as t...
    编程 发布于2024-11-08
  • 如何修复 Chrome 扩展程序中孤立内容脚本导致的“扩展程序上下文无效”错误?
    如何修复 Chrome 扩展程序中孤立内容脚本导致的“扩展程序上下文无效”错误?
    如何在 Chrome 扩展程序更新后删除孤立脚本问题无意中重新加载 Chrome 扩展程序,尤其是处于开发者模式的扩展程序,可能会创建孤立内容脚本。这些脚本仍然在后台运行,但与扩展的其余部分失去了通信,从而导致诸如“扩展上下文无效”和“未检查的运行时.lastError”之类的错误。解决方案孤立的内...
    编程 发布于2024-11-08
  • 为什么需要设置$GOPATH以及如何有效使用它?
    为什么需要设置$GOPATH以及如何有效使用它?
    在 $GOPATH 的迷宫中导航作为一个初露头角的 Go 开发者,在错综复杂的 $GOPATH 中导航可能会令人畏惧。为了阐明其目的和用法,让我们深入研究有关此环境变量的一些常见问题。为什么在项目根目录设置 $GOPATH?传统上, $GOPATH 对于设置安装 Go 包的工作区至关重要。默认情况下...
    编程 发布于2024-11-08
  • 如何构建数据输入系统(快速简单指南)
    如何构建数据输入系统(快速简单指南)
    三步构建数据输入系统 在本指南中,我们详细介绍了使用 Five 的快速应用程序开发环境构建和部署数据输入系统所需的步骤。 什么是数据输入系统? 数据输入系统是一个旨在捕获、存储、管理和分析数据的平台。这些系统有助于收集用于决策、研究、分析和报告的重要信息。数据输入系统范围从基本的在线表格到与数据库和...
    编程 发布于2024-11-08
  • 使用内联 SVG 时如何确保剪辑路径的响应式对齐?
    使用内联 SVG 时如何确保剪辑路径的响应式对齐?
    具有内联 SVG 的响应式剪辑路径将剪辑路径应用于具有背景的元素时,通常会嵌入 SVG 内联。但是,您可能会遇到响应能力或对齐问题,如下例所示:<header id="block-header"> <svg width="100%" he...
    编程 发布于2024-11-08
  • 使用 PHP 安全地传送电子邮件:使用 SMTP 发送无垃圾邮件的指南
    使用 PHP 安全地传送电子邮件:使用 SMTP 发送无垃圾邮件的指南
    这是如何使用 PHP SMTP 发送电子邮件而不进入垃圾邮件文件夹的分步示例。 我们将使用 PHPMailer 库,它简化了通过 SMTP 发送电子邮件的过程,并有助于提高送达率。按照以下步骤,您将了解如何正确配置 SMTP 以避免电子邮件进入垃圾邮件文件夹。 第1步:安装PHPMa...
    编程 发布于2024-11-08
  • 如何使用 Python 的“locale”模块来格式化货币值?
    如何使用 Python 的“locale”模块来格式化货币值?
    Python 中的货币格式:综合指南将数字格式化为货币是编程中的一项常见任务,尤其是在处理财务数据时。在 Python 中,locale 模块提供了方便的函数来格式化货币值。如何使用 Python 的 locale 模块格式化货币值导入 locale模块:import locale设置区域设置:为了...
    编程 发布于2024-11-08
  • 您可能不知道的关于类型转换的有趣事实
    您可能不知道的关于类型转换的有趣事实
    介绍 类型转换不仅仅是技术上的需要;它有着丰富的历史和许多程序员可能不知道的迷人的细微差别。了解这些可以为编程和软件开发提供更深入的见解。 类型转换的历史视角 多年来,类型转换的概念已经发生了显着的演变。 编程语言中类型转换的演变: 在编程的早期,类型转换是一个手动...
    编程 发布于2024-11-08
  • 将数据提取到 CSV 文件时,为什么我的 PDO 准备语句返回双结果?
    将数据提取到 CSV 文件时,为什么我的 PDO 准备语句返回双结果?
    PDO 准备语句获取双结果用户遇到了一个问题,即在将数据输出到CSV 文件。相关代码利用 $result_get_rows->fetch() 函数从数据库中检索行。理解 Fetch() 方法The fetch() PDOStatement 对象的方法用于从结果集中检索行。默认情况下,它以索引数组(按...
    编程 发布于2024-11-08
  • 鸭子类型遇到类型提示:在 Python 中使用协议
    鸭子类型遇到类型提示:在 Python 中使用协议
    Python 的动态特性和对鸭子类型的支持长期以来因其灵活性而受到称赞。然而,随着代码库变得越来越大、越来越复杂,静态类型检查的好处变得越来越明显。但是我们如何协调鸭子类型的灵活性和静态类型检查的安全性呢?进入Python的Protocol类。 在本教程中,您将学习: 什么是鸭子类型以及 Pytho...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3