目录
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 事件名总结：
- connect：当与服务器成功建立连接时触发的事件。
- connect_error：当连接发生错误时触发的事件。
- connect_timeout：当连接超时时触发的事件。
- reconnect：当尝试重新连接到服务器时触发的事件。
- disconnect：当与服务器断开连接时触发的事件。
- error：当发生错误时触发的事件。
- message：当接收到服务器发送的消息时触发的事件。
- custom events：除了上述内置事件外，你还可以自定义事件，根据需要进行命名和处理。
通过监听这些事件，可以根据需要进行相应的操作和逻辑处理。
Socket.IO 方法总结
- connect(url: string, options?: object): 与指定的服务器建立Socket.IO连接。
- disconnect(): 断开Socket.IO连接。
- emit(eventName: string, ...args: any[]): 向服务器发送指定事件的消息或数据。
- on(eventName: string, callback: Function): 监听服务器发送的指定事件，并在事件触发时执行回调函数。
- once(eventName: string, callback: Function): 监听服务器发送的指定事件，只触发一次，然后移除监听器。
- off(eventName: string, callback?: Function): 移除指定事件的监听器。
- hasListeners(eventName: string): 检查是否有指定事件的监听器。
- join(room: string): 加入指定的房间（用于Socket.IO的房间功能）。
- leave(room: string): 离开指定的房间。
- rooms(): 获取当前Socket.IO连接所在的所有房间。
这些方法提供了基本的Socket.IO功能，用于建立连接、发送消息、监听事件和管理房间等操作