【Vue3+Ts project】认识 Websocket 以及 socket.io 库

2023-10-29

目录

Websocket 

socket.io 

Socket.iO 事件名总结:

Socket.IO 方法总结


Websocket 

作用:

  • WebSocket 仍然提供实时的双向通信功能,使用Vue3 应用程序能够与服务器进行实时数据交换
  • 降低延迟和网络开销:相比传统的HTTP请求-响应模式,WebSocket建立了持久连接,减少了网络开销和延迟,适用于需要实时数据更新的应用场景。

功能:

  • 双向通信:WebSocket允许服务器和客户端之间双向发送和接收消息,实现实时的双向通信。
  • 实时推送:服务器可以主动向客户端推送数据,实现实时更新和通知。
  • 持久连接:WebSocket建立的连接会保持打开状态,避免了每次通信都需要重新建立连接的开销。
  • 低延迟:WebSocket采用较低的网络开销,提供较低的通信延迟,适合实时应用场景。

socket.io 

作用: Socket.IO是一个基于WebSocket的实时通信库,它提供了跨浏览器和跨平台的实时通信解决方案。它的作用是简化实时双向通信的实现,使得在应用程序中建立实时连接、发送和接收实时数据变得更加容易和可靠。Socket.IO支持事件触发、广播、房间和命名空间等概念,为实时应用提供了更高级的功能和可扩展性。

Vue 3中使用Socket.IO的方法如下:


安装 Socket.IO 

pnpm add socket.io-client

npm install  socket.io-client

建立连接

注:

参数1:不传默认是当前服务域名,开发中传入服务器地址
参数2:配置参数,根据需要再来介绍

import io from 'socket.io-client'

const socket = io()

  socket = io(后台域名URL, {
    auth: {
      token: `Bearer ${store.user?.token}` //登录权限
    }
  })

确认连接成功

socket.on('connect', () => {
  // 建立连接成功
})

错误异常消息

  socket.on('error', () => {
    //错误异常消息
  })

已经断开连接

  socket.on('disconnect', () => {
    //已经断开连接
  })

发送消息
注:chat message 发送消息事件,由后台约定,可变


socket.emit('chat message', '消息内容')

接收消息

注:chat message 接收消息事件,由后台约定,可变

socket.on('chat message', (ev) => {
  // ev 是服务器发送的消息
})

关闭连接

注:一般离开组件时使用,onUnmounted使用

socket.close()

Socket.iO 事件名总结:

  1. connect:当与服务器成功建立连接时触发的事件。
  2. connect_error:当连接发生错误时触发的事件。
  3. connect_timeout:当连接超时时触发的事件。
  4. reconnect:当尝试重新连接到服务器时触发的事件。
  5. disconnect:当与服务器断开连接时触发的事件。
  6. error:当发生错误时触发的事件。
  7. message:当接收到服务器发送的消息时触发的事件。
  8. custom events:除了上述内置事件外,你还可以自定义事件,根据需要进行命名和处理。

通过监听这些事件,可以根据需要进行相应的操作和逻辑处理。

Socket.IO 方法总结

  1. connect(url: string, options?: object): 与指定的服务器建立Socket.IO连接。
  2. disconnect(): 断开Socket.IO连接。
  3. emit(eventName: string, ...args: any[]): 向服务器发送指定事件的消息或数据。
  4. on(eventName: string, callback: Function): 监听服务器发送的指定事件,并在事件触发时执行回调函数。
  5. once(eventName: string, callback: Function): 监听服务器发送的指定事件,只触发一次,然后移除监听器。
  6. off(eventName: string, callback?: Function): 移除指定事件的监听器。
  7. hasListeners(eventName: string): 检查是否有指定事件的监听器。
  8. join(room: string): 加入指定的房间(用于Socket.IO的房间功能)。
  9. leave(room: string): 离开指定的房间。
  10. rooms(): 获取当前Socket.IO连接所在的所有房间。

这些方法提供了基本的Socket.IO功能,用于建立连接、发送消息、监听事件和管理房间等操作

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Vue3+Ts project】认识 Websocket 以及 socket.io 库 的相关文章

  • 帮助我避免 JPA、Hibernate 和 MySQL 的连接超时

    我正在使用 JPA Hibernate 作为提供者 Glassfish 和 MySQL 开发中一切都运行良好 但是当我将应用程序部署到测试服务器并让它运行 大部分空闲 过夜时 我通常会在早上遇到这样的情况 2011 03 09T15 06
  • Glassfish:在部署期间修改 EAR 的部署描述符

    经过几天的搜索 尝试和摇头 我将这个问题发布到 SO 尽管它seems已经得到答复 这是场景 我有一个 EAR 应用程序 目前 包含一个 WAR 和一个 EJB 模块 EJB 模块使用 JPA persistence xml 并且一些无状态
  • 初始堆大小无效。无法创建Java虚拟机

    我遇到了下一个问题 我尝试通过startup bat手动启动Tomcat 但似乎没有显示任何结果 然后我尝试运行shutdown bat 控制台显示如下 D apache tomcat 7 0 35 bin gt startup bat U
  • EL 通过 Scriptlet

    在 JSP 中使用 EL 相对于 scriptlet 的优势是什么 EL 被认为是无脚本语言 EL 使 JSP 免受容易出错原始 Java 代码并强制您根据 MVC 思想编写 JSP EL 或像 JSTL 这样的标签库 不可能实现的任何事情
  • 全静态方法和应用单例模式有什么区别?

    我正在创建一个数据库来存储有关我的网站用户的信息 我正在使用 stuts2 因此使用 Java EE 技术 对于数据库 我将创建一个 DBManager 我应该在这里应用单例模式还是将其所有方法设为静态 我将使用这个 DBManager 进
  • 我需要一个字数统计程序[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要弄清
  • Vue 多个组件位于一个包/文件中

    假设我想创建一个 UI 包 如何将多个组件放入一个 JS 文件中 通常我会将不同的组件放在不同的文件中 import ButtonText from ButtonText vue import ButtonIcon from ButtonI
  • 如何在Java中打印保留2位小数的浮点数?

    我可以用System out print 您可以使用printf http java sun com j2se 1 5 0 docs api java io PrintStream html printf 28java lang Strin
  • vm 参数中的 -D 是什么,它表示为什么我们必须在 vm 参数中始终指定 -D

    vm 参数中的 D 是什么 它表示为什么我们必须在 vm 参数中始终指定 D 有什么标准吗 如果是 那是什么以及指定的位置 D 设置当前运行的 java 程序可以访问的属性值 它允许程序员设置程序运行所需的值 但程序不知道这些值是什么 因此
  • 使用 Google Analytics 的 Angular 4+

    我正在尝试将 Google Analytics 与 Angular 4 一起使用 但我在 ts 中找不到 ga js 的任何 type 为了快速解决方案 我在每个组件中都使用了它 declare let ga any 下面我是如何解决的 创
  • Typescript:$rootScope 上不存在属性(Angularjs)

    在 Typescript 中向根作用域添加值时出现错误 class TestClass this rootScope ng IRootScopeService constructor rootScope this rootScope roo
  • JFrame Glasspane 也优于 JDialog,但不应该

    我有一个带有 Glasspane 的 JFrame 未装饰 该框架打开一个 JDialog 也未装饰 也有一个 glassPane 并隐藏自身 setVisible false Glasspanes 通过 setGlassPane 设置 对
  • Java字符串查找和替换的最佳方法?

    我正在寻找 Java 中字符串查找和替换的最佳方法 这是一句话 我的名字叫米兰 人们都知道我叫米兰瓦西奇 我想用 Milan Vasic 替换 Milan 弦 但在我已经有 Milan Vasic 的地方 情况不应该是这样 搜索 替换后的结
  • Java LRU 缓存使用 LinkedList

    堆栈溢出的新手 所以请不要介意我以菜鸟的方式问这个问题 我正在尝试使用链表实现 LRU 缓存 我在这里看到了使用 linkedHashMap 和其他数据结构的其他实现 但对于这种情况 我正在尝试使用链表创建最佳优化版本 正如我在技术期间被问
  • 如何在 Log4j2 - JSON 布局中自定义或删除默认属性

    In Spring Boot 2我已配置的应用程序Log4j2 with JsonLayout像下面这样
  • TS2531:对象可能为“空”

    我有以下功能 uploadPhoto var nativeElement HTMLInputElement this fileInput nativeElement this photoService upload this vehicle
  • 使用正则表达式匹配阿拉伯文文本

    我试图使用正则表达式仅匹配阿拉伯语文本 但出现异常 这是我的代码 txt matches P Arabic 这是例外情况 线程 main 中的异常 java util regex PatternSyntaxException 索引 9 附近
  • 使用 PDFBox 在 Android 中创建 PDF

    我正在尝试通过我的 Android 应用程序创建 PDFPDFBoxapi 但出现以下错误 java lang NoClassDefFoundError org apache pdfbox pdmodel PDDocument 我已经将以下
  • Microsoft SQL 数据库的 WebSocket 侦听器

    我目前正在开发一个项目 该项目必须使用 WebSockets 作为将数据传输到客户端的方式 基础设施看起来像这样 客户端 gt Web 服务器 gt Microsoft SQL 数据库 我想最理想的情况应该是这样的 客户端打开一个到服务器的
  • Java 可变 BigInteger 类

    我正在使用 BigIntegers 进行计算 该计算使用一个调用 multiply 大约 1000 亿次的循环 并且从 BigInteger 创建新对象使其非常慢 我希望有人编写或找到了 MutableBigInteger 类 我在 jav

随机推荐

  • Tomcat配置问题:Warning:The selected directory is not a TomEE home

    问题描述 在使用IDEA进行Tomcat配置时 发生如下警告 提示 因为是警告就没太在意 配置完成后进行启动 发现变成了 错误 原因分析 产生这个的原因其实是因为自己的一个小疏忽 在配置Tomcat的时候 选择了TomEE Server 解
  • python爬虫实战(1)--爬取新闻数据

    想要每天看到新闻数据又不想占用太多时间去整理 萌生自己抓取新闻网站的想法 1 准备工作 使用python语言可以快速实现 调用BeautifulSoup包里面的方法 安装BeautifulSoup pip install Beautiful
  • 责任链模式二

    本文以创建商品案例来讲解责任链模式 假设创建商品逻辑分为 1 创建商品 2 检验商品 3 保存商品 第二步中校验商品又分为多种情况 必填字段校验 规格校验 价格校验 库存校验等等 伪代码如下 public Result createProc
  • 值不值

    Hi 我是小小 今天是本周的第五篇 主要内容是jpa的入门 现在开始今日内容 数据准备 数据库使用的数据表设计如下 建表语句如下 SET NAMES utf8mb4 SET FOREIGN KEY CHECKS 0 Table struct
  • 初学Qt之--带参数的信号和槽的实现(入门级)

    初次接触Qt 由于只有C语言的基础 弄起来很是头疼 下面这个Qt带参数的信号与槽的实例仅供入门之用 高手免观 Qt 4 4 0 实现 废话不多说 直接上代码 MyMainWindows h ifndef MYMAINWINDOWS H de
  • MATLAB实现TopSis优劣解距离法——分析《世界征服者3》将领排名

    问题背景 世界征服者3游戏中有150 的将领角色 每个将领都有自己的兵种优势 军阶 技能等不同的属性 如何教务客观 综合全面地选拔出其中排名前50的将领 基于TOPSIS优劣解距离法以及聚类算法 给出大家较为客观的排名 一 问题描述 在世界
  • 自定义TableViewCell的使用方法

    新建TableViewCell类 继承父类为UITableViewCell 1 1 TableCell h import
  • Android 内存优化技术点

    致敬前辈 砥砺前行
  • ir2104s的自举电容_IR2104s半桥驱动芯片使用经验及注意事项

    多次使用IR2104s 每次的调试都有种让人吐血的冲动 现在将使用过程遇到的错误给大家分享一下 方便大家找到思路 一 自举电容部分 关键 1 听说自举电路必须要安装场效应管 于是我在使用过程中 安装了只半桥的高端场效应管 结果 高端驱动HO
  • 被广泛应用的水分含量传感器工作原理

    水分含量传感器由电源模块 变送模块 漂零及温度补偿模块 数据处理模块等组成 采用FDR频域法 可以实时准确测定各种土壤不同剖面的水分含量 传感器内置信号采样及放大 零点漂移及温度补偿功能 用户接口简洁 方便 外型小巧轻便 便于携带和连接 功
  • 招聘方眼里的猎聘和Boss直聘直观对比

    最近为了招聘 公司HR给开通了猎聘和Boss直聘的账户 对比两个招聘渠道的使用 有着截然不同的效果 功能上 两者相差不多 简历上 相对来说猎聘的更高端一些 可能有 猎 的字眼 来看我们发布的职位的不少是海归 不过对我们纯本土的企业来说 英语
  • 基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程

    详情点击链接 基于ArcGIS ENVI InVEST FRAGSTATS等多技术融合提升环境 生态 水文 土地 土壤 农业 大气等领域的数据分析能力与项目科研水平教程 一 空间数据获取与制图 1 1 软件安装与应用 1 2 空间数据 1
  • 【django】APPEND_SLASH 路由末尾的斜杠问题

    url路由末尾是否加斜杠的规范 加斜杠 表示是目录 不加斜杠 表示是文件 在django中的setting中 默认APPEND SLASH True 即当请求的路由末尾没有加斜杠 如果尝试加上斜杠后 能在后端路由里匹配到 则会自动加上斜杠
  • 2023/09/15 qt day1

    代码实现图形化界面 include denglu h include ui denglu h include
  • 题13:字符串匹配之KMP

    kmp算法是一种改进的字符串匹配算法 由D E Knuth与V R Pratt和J H Morris同时发现 因此人们称它为克努特 莫里斯 普拉特操作 简称KMP算法 KMP算法的关键是根据给定的模式串W1 m 定义一个next函数 nex
  • 基础算法题——牛牛种花(高效、降维、离散化、树状数组)

    牛牛种花 题目链接 这道题还是挺有意思的 呵呵 解题思路 高效 利用结构体存储数据 struct node int x y id a N lt lt 1 利用 id 来记录每个节点是查询或是种树 若为查询则给予编号 从 1 开始编号 否则置
  • Python Flask 轻量级的Web应用程序框架介绍

    一 概述 Python Flask是一个轻量级的Web应用程序框架 它是使用Python编写的 用于快速开发Web应用程序和API 它的设计理念是简单 易用和可扩展 以下是Python Flask的一些主要特点 轻量级 Flask没有多余的
  • SeleniumLibrary4.5.0 关键字详解(十一)

    SeleniumLibrary4 5 0 关键字详解 十一 库版本 4 5 0 库范围 全局 命名参数 受支持 简介 SeleniumLibrary是Robot Framework的Web测试库 本文档说明了如何使用SeleniumLibr
  • Qt学习笔记--窗口部件(Widget)

    1 Widget是GUI编程的基本组件 2 每个Widget可以放置在一个UI内或者作为一个独立的窗口 3 每种类型的组件都是Widget的子类 Widget继承QObject 4 每个Widget在构造时可以指定它的父对象 这样可以保证它
  • 【Vue3+Ts project】认识 Websocket 以及 socket.io 库

    目录 Websocket socket io Socket iO 事件名总结 Socket IO 方法总结 Websocket 作用 WebSocket 仍然提供实时的双向通信功能 使用Vue3 应用程序能够与服务器进行实时数据交换 降低延