前端如何创建与使用WebSocket

前提：后端要前端配合建立一个webSocket链接，起初不明白是要做什么，不清楚过程中怎么去建立，具体原理是什么
解决过程：我目前对websocket的理解就是建立长链接，用于后续持续的消息通信，原来的http请求都是单次的，发完就没有了下文，而webSocket可进行持续通信，webSocket我用到的是创建一个webSocket对象、建立链接、监听链接成功的消息、关闭链接、接收链接报错的消息
解决结果：
为了方便测试，首先在页面上写个按钮，准备后面发起链接使用

<el-button type="primary" @click="testwebSocket">测试wb</el-button>

引入获取当前token的方法(我的项目中是单独封装了一个js文件)

import { getToken } from '@/utils/cook'

找到当前使用的IP地址，我的项目中是在globalConfig.js中设置了sUrl，后续会详细写建立globalConfig.js灵活切换当前环境

//截取链接URL
let Url = window.globalConfig.sUrl

前后端之间有多个websocket链接、当后端需要建立长连接时会给我们一个链接地址，我们把所需要的IP地址和链接拿到后，形成新的链接地址，是否需要token要根据实际需求而定，下面分别列出需要token和不需要token的写法

//不需要token时
let wa_url = `${Url.replace(
   /http/,
   'wa',
 )}/stream/test`
//需要token时
let wa_url = `${Url.replace(
   /http/,
   'wa',
 )}/stream/test/${getToken()}`

//创建一个webSocket对象
let socket = {}
//发起链接
const testwebSocket = () => {
   //建立webSocket链接(如果需要携带参数，直接在wa_url后面加即可，例如wa_url+'参数')
   socket = new WebSocket(wa_url)
   //接收链接成功的消息
   socket.onopen = function(e) {
       console.log("连接成功");
        // 发送消息
       socket.send("已连接");
    };
    //链接关闭时的消息
    socket.onclose = evt => {
       console.log('Connection closed')
       //链接关闭后会在指定时间内再次发起链接
       setTimeout(() => {
           testwebSocket()
       }, 5000)
    }
    //监听链接返回的消息
    socket.onmessage = evt => {
        console.log('成功')
        const res = JSON.parse(evt.data)
     }
    //接收链接报错的消息
    socket.onerror = err => {
      console.error('Socket encountered error: ', err, 'Closing socket')
      return
    }
}

关于webSocket，我所使用到的暂时就是这些，先记录到这里了~