Vue中使用websocket

HTML5 WebSocket
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

<template>
  <div class="test">

  </div>
</template>

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>

 <el-button  
                  :key=" table.columns[1].columnName"
                  :label=" table.columns[1].columnName"
                  :value=" table.columns[1].columnName"
            ref="a" type="primary" icon="el-icon-download" @click="download(table.columns[1].columnName)">下载漏误检图片</el-button>
<div v-html="downloadval"></div>
adddownload(val){
        // console.log(val);
        this.downloadval=this.downloadval+ ' <span style="font-size:12px;border: 1px solid #409EFF;padding: 10px;">'+val+'正在下载</span>'
      },
       initWebSocket(key){ //初始化weosocket
        const wsuri = "ws://172.17.10.109:7600/WebSocket/SocketServer/"+key;
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数
        // let actions = {"test":"12345"};
        // this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        if(e.data != '连接成功'){
        const redata=JSON.parse(e.data);
        console.log(redata)
        console.log(redata.code)
        if(redata.code==0){
            this.$message.closeAll();
            this.$message({
            duration: 1600,
            message: "图片加载"+redata.data.complete+"%",
            type: "warning"
            });
            if(redata.data.complete==100&&redata.data.downLoadUrl!=null){
                this.$message({
                duration: 2200,
                message: "图片加载完成",
                type: "success"
                });
                this.href=redata.data.downLoadUrl;
                window.open(this.href)
            }
        }else{
            this.$message.closeAll();
            this.$message({
            duration: 2200,
            message: redata.msg,
            type: "error"
            });
        }
        }
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
 download(id){
                this.$refs["form"].validate(valid => {
                if (valid) {
                let url = [];
                 let list=[];
                url = this.$base_url + "/download/draw/single";
                //let singleData=JSON.stringify({projectId:this.form.region,versionIds:this.form.type,threshold:this.form.name,attributeIds:this.form.singgle});
               // let singgleData1 = this.form.singgle.join(",");
                let singgleData2 = this.form.type.join(",");
                let singgleData3 = parseFloat(this.form.name);
                this.$axios
                    .post(
                    url,
                    {
                        attributeName: id,
                        projectId: this.form.region,
                        threshold: singgleData3,
                        versionIdList: singgleData2
                    },
                    { headers: { "Content-Type": "application/json" } }
                    )
                    .then(response => {
                         if(response.data.code==0){
                            this.sigledata = response.data.data;
                            // console.log( this.sigledata.complete)
                            if(this.sigledata.complete==100&&this.sigledata.downLoadUrl!=null) {
                                        this.$message.closeAll();
                                        this.$message({
                                        duration: 1600,
                                        message: "图片下载成功",
                                        type: "success"
                                        });
                                        this.href=response.data.data.downLoadUrl;
                                        //indow.location.href=this.href;
                                        window.open(this.href)
                                    } else {
                                        // console.log(id)
                                        this.key=response.data.data.requestKey;
                                        this.initWebSocket(this.key);
                                        this.adddownload(id);
    
                                    }
                            }else{
                                this.$message.closeAll();
                                this.$message({
                                duration: 2200,
                                message: response.data.msg,
                                type: "error"
                                });
                            }
                        });
                    
                } else {
                console.log("error submit!!");
                return false;
                }
            });
    },
 

参考