vue-socket

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;
      // }
    },

 

vue-socket.io是基于socket.io-client的封装,它允许在Vue项目中更方便地使用实时、双向和基于事件的通信。它通过将$socket挂载到Vue实例上,并使用sockets对象来实现组件化的事件监听。 在使用vue-socket.io时,你可以使用Vue.use(VueSocketio, 'http://socketserver.com:1923')来引入vue-socket.io插件。但需要注意,根据引用的说法,这种方法可能存在一些问题,所以你可能需要注意一下。 如果你想深入了解vue-socket.io的使用,引用提供了一篇关于vue-socket.io使用的文章,其中包含了一些关于socket连接、断开重连以及动态连接地址的注意事项。你可以阅读这篇文章来获得更全面的了解。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue中 引入使用 vue-socket.io](https://blog.csdn.net/ZYS10000/article/details/122737466)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [最详细的vue-socket.io用法](https://blog.csdn.net/weixin_43898997/article/details/122962888)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

侧耳倾听...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值