Vue-socketio求助

四层楼 2021-01-31 03:29:48

我在main.js中使用Vue.use初始化了全局的SocketIO，在组件中能用sockets里的方法和后台通信
但是我在一个页面中引入了多个这个组件，需要每个组件单独建立一个和后台的连接，于是我删掉了全局的Vue.ues，在组件中写

<script>

import Vue from "vue";

import VueSocketIO from "vue-socket.io";

import SocketIO from "socket.io-client";



Vue.use(

  new VueSocketIO({

    debug: true,

    connection: SocketIO("http://127.0.0.1:5000"),

  })

);



export default {

  name: "ZuJian",

  sockets: {

    connect: function () {

      console.log(this.$socket);

      console.log("client connent socket.id=" + this.$socket.id);

    },

}

打印发现每个组件里this.$socket.id相同，相当于多个组件跟后台还是一个连接。

我想要每个组件中，都是单独的连接，互不干扰的处理后台返回的数据，应该怎么写呀？

...全文

522 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

四层楼 2021-02-03

打赏
举报

引用 9 楼烈阳，的回复:

实在不行看看我的第一篇博文吧，聊天的那个案例，我就是用那个demo新建了个test的组件，使用三次都是新的socket.id

多谢了，我现在只用一个全局的socket了，后面再看要不要换成单独的。你的方法应该是可以的，估计是我哪里用得不对

howcoder 2021-02-03

打赏
举报

实在不行看看我的第一篇博文吧，聊天的那个案例，我就是用那个demo新建了个test的组件，使用三次都是新的socket.id

四层楼 2021-02-02

打赏
举报

引用 7 楼烈阳，的回复:

我注册了三个测试组件，确实获得了三个不同的socket.id，和你说下我的做法，我是没有在main.js引入的，在需要用到的页面才引入，例如

我开始用VueSocketIO，后来换成socket.io-client，后来重新新建了一个工程，看上去都还是一个socket（ids:0）。发现它没有.id属性，我怀疑是不是版本的问题，把socket.io-client从3.1.0降成了2.4.0，还是一样的结果

howcoder 2021-02-02

打赏
举报

我注册了三个测试组件，确实获得了三个不同的socket.id，和你说下我的做法，我是没有在main.js引入的，在需要用到的页面才引入，例如

howcoder 2021-02-01

打赏
举报

在组件创建函数里面new VueSocketIO()试试,不过挺好奇你为什么需要每个组件单独连接的

四层楼 2021-02-01

打赏
举报

引用 5 楼烈阳，的回复:

在此之前，你有把vuex的全局引入去掉吗

感觉还没有用到vuex

howcoder 2021-02-01

打赏
举报

在此之前，你有把vuex的全局引入去掉吗

四层楼 2021-02-01

打赏
举报

引用 3 楼烈阳，的回复:

一般前端很少会有异常，有异常的几乎都是后端，后端有异常，那你四个格子都会有异常，如果你非要怕有异常，就做心跳检测，我上周刚刚用完，我最新的那篇文章也有教程，还有就是想知道你按我的想法可以做到独立socket吗？

不行，在组件的created函数里，或者在组件的按钮上点击后的方法里new VueSocketIO() ，每个组件都会有上面这段提示，并且没有触发sockets里的connect方法。我同时十几个格子，用全局socketio。我不是做聊天的功能，主要是想用websocket的双工模式，连上后，flask隔一段时间就往前台上报一些数据，结果动不动就断开连接了，暂时还不清楚是哪里导致的断开，打算再看点文章例子后再尝试