WebSocket（socket.io）

什么是WebSocket？

WebSocket 是一种网络通信协议(双向)，就类似于 HTTP 也是一种通信协议。

为什么需要 WebSocket?

因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

<script>
    // 创建ws实例，建立连接  (ws://121.40.165.18:8800  有广告)
    var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

    // 连接成功事件
    ws.onopen = function(evt) {
        console.log("Connection open ...");
        // 发送消息
        ws.send("Hello WebSockets!");
    };
    // 接受消息事件
    ws.onmessage = function(evt) {
        console.log("Received Message: " + evt.data);
        // 关闭连接  
        ws.close();
    };
    // 关闭连接事件
    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };
</script>

什么是socket.io是什么？

socket.io 是一个基于 WebSocket 的 CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。

如何使用?

安装 sokect.io-client 包。中文网网址

pnpm add socket.io-client

npm install socket.io-client

yarn add socket.io-client

如何建立连接？

import io from 'socket.io-client'
// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据需要再来介绍
const socket = io()

如何确定连接成功？

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

如何发送消息？

// chat message 发送消息事件，由后台约定，可变
socket.emit('chat message', '消息内容')

如何接收消息？

// chat message 接收消息事件，由后台约定，可变
socket.on('chat message', (ev) => {
// ev 是服务器发送的消息
})

如何关闭连接？

// 离开组件需要使用
socket.close()

import type { Socket } from 'socket.io-client'
import { io } from 'socket.io-client'
import { onMounted, onUnmounted } from 'vue'
import { baseURL } from '@/utils/request'
import { useUserStore } from '@/stores'
import { useRoute } from 'vue-router'

const store = useUserStore()
const route = useRoute()

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')
    })
})