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

news2024/9/21 14:45:10

目录

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功能,用于建立连接、发送消息、监听事件和管理房间等操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/674080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

scratch lenet(7): C语言计算可学习参数数量和连接数量

scratch lenet(7): C语言计算可学习参数数量和连接数量 1. 目的 按照 LeNet-5 对应的原版论文 LeCun-98.pdf 的网络结构,算出符合原文数据的“网络每层可学习参数数量、连接数量”。 网络上很多人的 LeNet-5 实现仅仅是 “copy” 现有的别人的项目, 缺…

求2的N次幂(C++)解决高精度运算

​👻内容专栏:《C/C专栏》 🐨本文概括: 计算高精度的2的N次方数字。 🐼本文作者:花 碟 🐸发布时间:2023.6.22 文章目录 ​前言求2的N次方,N ≤ 10000实现思路&#xff1a…

SpringBoot 如何使用 @PathVariable 进行数据校验

SpringBoot 如何使用 PathVariable 进行数据校验 在 SpringBoot 项目中,我们经常需要从 URL 中获取参数并进行相关的数据校验。而 PathVariable 注解就是一种非常方便的方式,可以让我们在方法参数中直接获取 URL 中的参数,并进行数据校验。本…

基于python开发实现数学中各种经典曲线的可视化

今天正好有点时间就想着把之前零星时间里面做的一点小东西整合一下梳理出来,本文的核心目的就是想要基于python来开发实现各种有趣的数学曲线的可视化展示。 笛卡尔心形线 笛卡尔心形线是一种二维平面曲线,由法国数学家笛卡尔在17世纪提出。它得名于其…

基于springboot+Redis的前后端分离项目(三)-【黑马点评】

🎁🎁资源文件分享 链接:https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA?pwdeh11 提取码:eh11 优惠券秒杀 优惠券秒杀1 -全局唯一ID2 -Redis实现全局唯一Id3 添加优惠卷4 实现秒杀下单5 库存超卖问题分析6 优惠券秒杀-一人一单…

Spring Boot 异常处理的主要特点

Spring Boot 异常处理的主要特点 在 Web 应用程序中,异常处理是非常重要的一部分。在 Spring Boot 中,异常处理是非常简单和灵活的。本文将介绍 Spring Boot 异常处理的主要特点,并提供一些示例代码来帮助您更好地理解。 异常处理的主要特点…

王道计算机网络学习笔记(1)——计算机网络基本知识

前言 文章中的内容来自B站王道考研计算机网络课程,想要完整学习的可以到B站官方看完整版。 一:计算机网络基本知识 1.1.1:认识计算机网络 计算机网络的功能 网络把许多计算机连接在一起,而互联网则将许多网络连接在一起&#x…

第一章JavaScript简介

第一章JavaScript简介 js是一门,高级,动态,解释型编程语言 每种语言都必须有一个平台或标准库,用于执行包括基本输入和输出在内的基本操作.核心js语言定义了最小限度的API,可以操作数组,文本,数组,集合,映射等,但不包括任何输入输出的功能.输入和输出(以及更加复杂的特性,如联…

基于Servlet实现分页查询

Servlet JSPJSTL MySQLBootstrap 等技术实现分页查询功能。 所用工具:IDEA 2022.3.3 Navicat Tomcat 等。 本文目录 一:运行效果 二:代码详解 (1)index.jsp (2)PageBean &#xff08…

图解操作系统笔记

硬件基础 CPU是如何执行程序的? 程序执行的基本过程 第一步,CPU 读取「程序计数器」的值,这个值是指令的内存地址,然后 CPU 的「控制单元」操作「地址总线」指定需要访问的内存地址,接着通知内存设备准备数据&#…

python:并发编程(十七)

前言 本文将和大家一起探讨python并发编程的实际运用,会以一些我实际使用的案例,或者一些典型案例来分享。本文使用的案例是我实际使用的案例(中篇),是基于之前效率不高的代码改写成并发编程的。让我们来看看改造的过…

excel数据的编排与整理——行列的批量处理

excel数据的编排与整理——行列的批量处理 1 一次性插入多行多列 1.1 插入连续行 1.1.0 题目内容 1.1.1 选中插入的位置➡按住shift键➡往下选中2行 1.1.2 鼠标右击➡点击插入 1.1.3 插入后的效果 1.2 插入不连续行 1.2.0 题目内容 1.2.1 按下ctrl键➡选中插入的位置,需要插…

7.4_1B树(二序查找树BST的升级版)

如果需要查找的值比节点小,会向左子树方向查找,如果比节点值大,会向右子树方向查找 拓展为5叉的形态 5叉排序树的定义 num是这个节点中真实存在的节点个数 那么一个节点中 最少有1个关键字,两个分叉 最多有4个关键字&#xff0c…

数据结构:二叉树详解

目录 概念(在做习题中常用的概念) 两种特殊的二叉树 二叉树的性质 二叉树的遍历(重点) 如上图: 二叉树的构建(代码表示一颗二叉树和一些操作二叉树的方法) 二叉树的oj习题讲解&#xff0…

代码审计-Java项目Filter过滤器CNVD分析XSS跨站框架安全

文章目录 Demo-Filter-过滤器引用Demo-ST2框架-组件安全CNVD-Jeesns-XSS跨站绕过CNVD-悟空CRM-Fastjson组件 Demo-Filter-过滤器引用 Filter:Javaweb三大组件之一(另外两个是Servlet、Listener) 概念:Web中的过滤器,当访问服务器的资源时&am…

编程语言的优劣评选标准与未来发展趋势——探索最佳编程语言选择

编程语言的优劣评选标准与未来发展趋势——探索最佳编程语言选择 评判标准不同编程语言的优点与缺点分析对编程语言未来发展的猜测和未来趋势 💕 💕 💕 博主个人主页: 汴京城下君–野生程序员💕 💕 &#x…

编程输出三位数的水仙花数

目录 题目 分析思路 代码 题目 编程输出三位数的水仙花数 标准的 水仙花数 就是三位数,即将三位数的个位;十位;百位取出来,分别三次方相加,若个位;十位;百位三次方相加与原来的三位数相等&a…

模拟电路系列文章-频率响应的描述

目录 概要 整体架构流程 技术名词解释 技术细节 1.为什么受频率的影响 2.频率响应 小结 概要 提示:这里可以添加技术概要 电容和电感是储能元件,对不同频率的交流信号,它们具有不同的感抗或者容抗。虽然它们不消耗功率,但同电阻一…

【PHP】文件写入和读取详解

一.实现文件读取和写入的基本思路: 1.通过fopen方法打开文件:$fp fopen(/*参数,参数*/),fp为Resource类型 2.进行文件读取或者文件写入操作(这里使用的函数以1中返回的$fp作为参数…

Python网络爬虫基础进阶到实战教程

文章目录 认识网络爬虫HTML页面组成Requests模块get请求与实战效果图代码解析 Post请求与实战代码解析 发送JSON格式的POST请求使用代理服务器发送POST请求发送带文件的POST请求 Xpath解析XPath语法的规则集:XPath解析的代码案例及其详细讲解:使用XPath解…