websocket

1、utils/socket_service.js

export default class SocketService{
/**
*定义并设置成单例模式
*/
  static instance = null
  static get Instance(){
    if(!this.instance){
      this.instance = new SocketService()
    }
    return this.instance
  }
  //和服务端连接的socket对象
  ws = null
  //存储回调函数
  callBackMapping = {}
  //标识是否链接成功
  connected = false
  //记录重试的次数
  sendRetryCount = 0
  //记录重连的次数
  connectRetryCount = 0

  // 定义连接服务器的方法
  connect(){
    // 连接服务器
    if(!window.Websocket){
      return console.log('您的浏览器不支持WebSocket')
    }
    this.ws = new WebSocket('ws://localhost:9998')
    
    // 连接成功的事件
    this.ws.onopen =()=>{
      console.log('连接服务端成功了')
      this.connected = true
      //设置重连的次数
      this.connectRetryCount = 0
    }
    //1、连接服务端失败
    //2、链接成功后断开
    this.ws.onclose=()=>{
      console.log('连接服务端失败')
      this.connected = false
      this.connectRetryCount++
      setTimeout(()=>{
        this.connect()
      }，500*this.connectRetryCount)  
    }
    //得到服务端发送过来的数据
    this.ws.onmessage = msg =>{
      console.log('从服务端获取到了数据')
      //真正服务端发送过来的原始数据时在msg中的data字段
      // console.log(msg.data)
      const recvData = JSON.parse(msg.data)
      const socketType =recvData.socketType
      // 判断回调函数是否存在
      if(this.callBackMapping[socketType]){
        const action=recvData.action
        if(action ==='getData'){
          const realData=JSON.parse(recvData.data)
          this.callBackMapping[socketTypel.call(this,realData)
        }else if(action === 'fullScreen'){
  
        }else if(action =='themechange'){

        }
      }
    }
  }
  // 回调函数的注册
  registerCallBack(socketType,callBack){
     this.callBackMapping[socketType]= callBack
  }
  // 取消某一个回调函数
  unRegisterCallBack(socketType){
    this.callBackMapping[socketType]= null
  }
  //发送数据的方法
  send(data){
    if(this.connected){
       this.sendRetryCount = 0
       this .ws.send(JsoN.stringify(data))
    }else{
      setTimeout(()=>{
        this.sendRetryCount++
        this.send(data)
      },this.sendRetryCount*500)
    }
   
  }
}

2、在main.js 中调用

import SocketService from '@/utils/socket service'
//其他的组件 this.$socket
Vue.prototype.$socket= SocketService.Instance
//对服务端进行websocket的连接
SocketService.Instance.connect()

3、组件中调用

created(){
  // 在组件创建完成之后 进行回调函数的注册
  this.$socket.registerCallBack("trendData", this.getData)
}，
mounted(){
  // 发送数据给服务器，告诉服务器，我现在需要数据
  this.$socket.send({
    action:'getData',
    socketType: 'trendData',
    chartName: 'trend',
    value:''
  })
},
destroyed(){
  // 在组件销毁的时候，进行回调函数的取消        
  this.$socket.unRegisterCallBack('trendData')
}
methods:{
  //ret是服务端发送给客户端的数据
  getData(ret){
      //此处就不需要再发送http请求获取数据了，直接使用ret就可以
  }
}