前端websockte

 socketfile.js文件

import { socketLogin } from '@/api/login'
let websock = null
let globalCallback = null
let getMsgCallback = null
let protocol = ''
const baseUrl = '请求地址'
const port = window.location.protocol === 'https:' ? ':443' : ':80'
let wsUrl = ''
protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
wsUrl = protocol + baseUrl + port

// 初始化websocket
const initWebSocket = () => {
  // ws地址 -->这里是你的请求路径
  websock = new WebSocket(wsUrl)
  websock.onmessage = e => {
    const clientData = JSON.parse(e.data)
    if (clientData.client_id) {
      const loginData = {
        member_id: JSON.parse(sessionStorage.getItem('userInfo')).admin_id,
        tcp_client_id: clientData.client_id
      }
      socketLogin(loginData).then(r => {
        if (r.code !== 1) {
          console.log('File全局webscoket登录失败')
        } else {
          console.log('File全局webscoket登录成功')
        }
      })
    }
    websocketonmessage(e)
  }
  websock.onclose = e => {
    websocketclose(e)

  }
  websock.onopen = () => {
    sendCheck()
    websocketOpen()
  }

  // 连接发生错误的回调方法
  websock.onerror = () => {
    console.log('File全局WebSocket连接发生错误')

  }
}


//主动心跳
const sendCheck = () => {
  setInterval(function() {
    websock.send('{"type":"3"}')
  }, 20000)
}

// 实际调用的方法
const sendSock = (agentData, callback) => {
  globalCallback = callback
  if (websock.readyState === websock.OPEN) {
    // 若是ws开启状态
    if (agentData) {
      websocketsend(agentData)
    }
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在开启状态，则等待1s后重新调用
    setTimeout(() => {
      sendSock(agentData, callback)
    }, 1000)
  } else {
    // 若未开启 ，则等待1s后重新调用
    setTimeout(() => {
      sendSock(agentData, callback)
    }, 1000)
  }
}

const sockFile = (callback) => {
  if (websock.readyState === websock.OPEN) {
    console.log('全局WebSocket正在接收数据')
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在开启状态，则等待1s后重新调用
    setTimeout(() => {
      initWebSocket()
    }, 1000)
  } else {
    // 若未开启 ，则等待1s后重新调用
    setTimeout(() => {
      initWebSocket()
    }, 1000)
  }
  getMsgCallback = callback
}

// 数据接收
const websocketonmessage = e => {
  setTimeout(() => {
    if (globalCallback) {
      globalCallback(JSON.parse(e.data))
    } else {
      getMsgCallback(JSON.parse(e.data))
    }
  }, 1000)
}

// 数据发送
const websocketsend = agentData => {
  websock.send(JSON.stringify(agentData))
}

// 关闭
const websocketclose = e => {
  console.log('File全局链接已断开 (' + e.code + ')')
}

// 创建 websocket 连接
const websocketOpen = e => {
  console.log('File全局webscoket连接成功')
}
initWebSocket()
// 将方法暴露出去
export {
  sendSock, // 发送消息
  sockFile, // 接受消息
  initWebSocket,
  websock
}

接收调用

mian.js中挂载

import * as sockFile from '@/util/socketfile'
Vue.prototype.sockFile = sockFile
  

vue文件调用
mounted() {
    this.sockFile.sockFile(this.getfile)
  },

    async getfile(res) {
      console.log(res)
    },