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

news/2024/10/30 23:14:24/

目录

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.ppmy.cn/news/516205.html

相关文章

正确使用苹果手机技巧的3个方法,你知道吗?

如何完美的设置苹果手机当中的一些技巧呢?当我们设置好了一些苹果手机技巧后,可以让我们在使用苹果手机的过程中感受到不一样的体验感。但如果,我们去设置一些没有用的技巧,则会觉得这些设置多余。譬如,打游戏的时候把…

快来看看这几个iPhone手机的实用功能

功能一:live动图转视频 众所周知,直播格式动画只能在苹果设备上观看,但是如果我们想把直播格式动画分享给安卓的朋友,那么我们可以将直播格式动画智能转换成视频文件!好在iPhone相册提供了“直播转视频”功能&#xff…

如何用iMazing软件将苹果手机数据备份及功能详解

如今手机俨然成为沟通交流的重要工具,里面存储了很多重要信息。但是如果不及时将数据备份,一旦丢失手机或损坏数据,后果将非常严重。苹果手机的数据备份是件非常复杂的事,但是有了iMazing软件之后则不一样了,今天就一起…

苹果手机、电脑如何进行屏幕录制?苹果录屏功能在哪?

随着人们生活水平的提高,不少小伙伴都会选择苹果手机、苹果电脑作为主要的设备。因为使用苹果电脑进行办公,不仅仅能够提升效率,对于文件的安全性也是有一些保障的。那么,在使用苹果电脑的时候,如果需要有录屏的需求该…

分享几个苹果手机的隐藏功能

功能一:隔空投送 很多人喜欢空投这个功能,因为转账方便,可以快速和朋友分享图片等内容,但也有一些感兴趣的人会利用这个功能给陌生人发奇怪的东西。 更新后AirDrop的默认选项变成了【Contacts Only】,我们可以手动开启…

iPhone的全部隐藏功能

对于iPhone的用户来说,iPhone已经不仅仅是一部手机了,得益于强大的硬件性能和庞大的软件支持,iPhone已经深深融入了用户的生活,另一方面苹果一直引以为傲的就是创意和实用兼得的人性化设计,这点在iPhone身上也得到了很…

Android很多功能iPhone没有,安卓手机特有苹果手机没有的几大功能,你知道吗?...

1.截长图 安卓手机特有功能之一截长屏真是方便了众多用户,对于喜欢截图分享新闻、文章等内容的用户来说是福音。下面告诉大家如何截长图, (1)设置截图功能(以红米note5为例,其他手机举一反三) 打开设置~更多设置~手势及…

iPhone使用技巧

(基础篇) ▍iPhone原生键盘 1.任意拖动光标 有3D Touch功能的机型,重按键盘中的任意字母或者空格键即可随意拖动光标,从而精准定位光标位置,在修改文字时非常实用。 无3D Touch功能的机型,在升级iOS12后…