5分钟入门WebSocket

1.什么是WebSocket?

 它是一种网络通信协议，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。

 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

1. WebSocket可以在浏览器里使用
2. 支持双向通信
3. 使用很简单

2.如何使用WebSocket

1. 建立连接
2. 监听消息
3. 关闭连接

   

1. 下包:

pnpm i socket.io-client

2.引入:

import type { Socket } from 'socket.io-client'
import { io } from 'socket.io-client'

3.使用:

let socket: Socket
onUnmounted(() => {
    socket.close()
})
onMounted(async () => {
    // 建立链接，创建 socket.io 实例
    socket = io(baseURL, {
        auth: {
            token: `Bearer ${store.user?.token}`
        },
        query: {
            // 订单 ID
            orderId: route.query.orderId
        }
    })

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

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

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