vue中使用websocket

websocke协议实现双向通信，可以让服务器将数据主动推给前端

WebSocket 教程

客户端api

#构造函数
var socket=new WebSocket('ws://.....');  //实例化socket

#连接成功后的回调函数
ws.onopen = function () {
  ws.send('Hello Server!');  //发送数据
}

#收到服务器数据后的回调函数
ws.onmessage = function(e) {
  var data = event.data;
};

#报错时的回调函数
ws.onerror = function(e) {
  console.log()
};

#连接关闭后的回调函数
ws.onclose = function(e) {
  console.log(e.reason)
};

#
ws.send('Hello Server!');  //发送数据
ws.close();  //关闭连接

vue中使用websocket (点击按钮连接)

<template slot-scope="scope">
  <el-button @click="openClick(scope.row.id)" type="primary">启动</el-button>
</template>

<script>
export default {
    data() {
    return {
      socket:'',
      keyword:'',
    };
  },
  created(){
  },
  destroyed() {
    this.socket.close() //离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket(){  //初始化
      this.socket=new WebSocket('ws://localhost:****/ws');  //实例化socket
      this.socket.onopen=this.socketOnopen;       //建立连接
      this.socket.onmessage=this.socketOnmessage;  //接收数据
      this.socket.onerror=this.socketOnerror;    //连接失败
    },
    socketOnopen(){  //建立连接
      this.socket.send('建立连接')
    },
    socketOnmessage(e){  //接收服务器数据
      this.keyword=e.data;
    },
    socketSend(data){ //发送数据
      this.socket.send(data)
    },
    socketOnerror(){
      console.log('连接错误，重新连接');
      this.initWebSocket()
    },
    socketOnclose(e){
    },
    openClick(data){ //点击事件
      this.initWebSocket()
    }
  },
}
</script>

请求