博客

https://www.npmjs.com/package/vue-socket.io

这个是文档

在Vue中下载socket  npm install vue-socket.io –save

https://www.cnblogs.com/wangcq/p/3520400.html

这个是通信原理可以看看，我觉得写得很好

在main.js中是酱紫写得

import VueSocketio from "vue-socket.io";
Vue.use(new VueSocketio({
  debug: true,
  connection: window.SOCKET_URL,
  options: {
    path: "/geoc"
  }
}))

这是滚动条，可能有点丑~~~~

            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :data="{name: ''}"
              :on-success="handlesuccess"
              :before-upload="beforeupload"
              multiple
              :show-file-list="false"
            >
              <i class="el-icon-upload" style="font-size:20px;vertical-align:middle"></i>上传数据
            </el-upload>
            <!-- 上传提示框 -->
            <div id="upDiv" v-show="ismsgShow">{{uploadmsg.desc}}</div>

在与data并行中添加sockets

data() {
    return {
      uploadmsg: {
        name: "upload",
        desc: "",
        duration: 0
      },
      ismsgShow: false,
      uploadUrl: "",
    };
  },
  sockets: {
    connect: function() {
      console.log("socket connected....");
    },
    dataset_publish: function(change) {
      console.log(change, "改变的值");
      let desc = change.status
        ? change.status.publish_info
        : change.publish_info;

      this.uploadmsg.desc = desc;
      if (change.status && change.status.publish_status == 2) {
        this.ismsgShow = false;
        this.这个是自己要在上传完之后获取服务列表（）;
      }
    }
  },

点击上传时候

    beforeupload(file) {
      this.uploadName = file.name;
      this.ismsgShow = true;
    },
    handlesuccess(response, file, fileList) {
      console.log(response, file, fileList, "response, file, fileList");
      // if (fileList.length > 0) {
      //   // this.$refs.upload.getFileData();
      //   this.$refs.upload.dialogsjlx = true;
      // }
    },