问题标签 [vue-socket.io]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1724 浏览

node.js - 从 socket.io 服务器接收消息时,Vuejs 不触发代码

我一直在努力让 vuejs 应用程序与远程、独立的 socket.io 服务器通信。我已经设法让 vuejs 应用程序将消息发送到 socket.io 服务器(通过 nodejs 实例上的控制台日志确认),我似乎得到了回复,但我似乎无法让它触发基于响应的代码。

我正在以最基本的形式使用 Vue-socket.io,并且我已将 localhost 和 null 添加到 origin 以希望排除该问题。

  • 我在 localhost:3000 上运行 socket.io 服务器
  • 我在 localhost:8888 上运行 vuejs 应用程序

为什么监听器没有在下面的代码中触发?我也没有在 app.vue 中获得任何 sockets.connect 和 sockets.customMessage 的控制台日志。

socket.io (nodejs) 服务器:

app.js(vuejs 应用程序的入口点):

应用程序.vue:

0 投票
1 回答
180 浏览

vue.js - 在一个 vue/vuex 应用程序中连接到两个 websocket(通过 vue-socket.io)

所以我有一个使用 vue 和 vuex 的 web 应用程序,它通过 vue-socket-io 连接到 websocket,如下所示:

我的问题是,除了这个 websocket,我现在还需要通过 websocket 与另一台服务器通信。如何同时拥有两个具有不同服务器的 websocket?

我在这里发现了一个类似的问题,但我不确定“不使用 vue-socket-io 因为它不起作用”的答案是否正确,或者是否有办法做到这一点?在这个问题中,用户尝试使用两家商店,我也不知道这是否是一个美食创意?

感谢您提供有关如何解决此问题的任何提示!

0 投票
1 回答
1715 浏览

node.js - vue-socket.io 应用程序没有收到来自 express socket.io 应用程序的发射

我正在尝试在使用 socket.io (localhost:8000) 的 express 应用程序和使用vue-socket.io (localhost:8080) 的 vue 应用程序之间创建一个 socket.io 通信。express 应用程序正在接收来自 vue 应用程序的排放,但反之则不然。这是我的快速应用程序,尽管我很确定问题出在 vue 应用程序上:

后端快递

我猜问题出在下面的某个地方:

前端 Vue(使用 CLI)

主.js:

聊天组件(Chat.vue)

我一直试图弄清楚这一天,但没有运气。

再一次,我唯一的目标是能够在 express 应用程序前接收排放。作为旁注,如果有更好的方法在 vue 中使用 socket.io 而不使用 vue-socket.io,我很乐意进行调查。

0 投票
0 回答
48 浏览

vue.js - 动态注入或更新 Vue 依赖项

  • 我正在使用套接字连接在 Vue 中构建应用程序。
  • 该应用程序允许用户以经过身份验证的用户和匿名用户的身份查看内容。
  • 登录后,其想法是能够针对特定客户提供数据——例如“有人评论了您的输入”。
  • 在登录之前,我们对套接字连接不感兴趣。
  • 登录应该是无缝的,并且不应该重新加载整个页面。
  • 我正在研究使用一个抛光的库来自动将套接字感知注入到组件中:https ://github.com/probil/vue-socket.io-extended#readme

除了套接字连接之外,还构建了应用程序。

基于该插件自述文件,这就是我将 lib 注入应用程序的方式:

这一切都很好,但是当我不想将套接字连接注入应用程序时,我被卡住了。

问题:在 1 个用例中,我想在应用程序初始化后建立套接字连接:初始化后是否可以在 Vue 中调用Vue.use(VueSocketIOExt, socket);

(即在这种情况下;在用户加载应用程序然后进行身份验证之后)

0 投票
1 回答
254 浏览

vue.js - Vue-Socket 变异监听器

我最近改用连接到套接字上的命名空间。以前连接工作正常,我的 Vuex 突变正在捕获来自服务器的发射。
切换到命名空间后,我已经验证了连接正在建立并且正确的事件正在套接字上触发,但是我的 Vuex 突变不再触发。

这是适用的代码:

服务器端

客户端

同样,我已经验证了套接字正在到达 UPDATE_REQUEST_SERVICE,但是当套接字发出时,突变永远不会运行,它在不使用命名空间时工作。

我在想前缀被更改或在使用命名空间时不起作用?

0 投票
1 回答
257 浏览

vue.js - VueSocketIO 提供后备连接 url

我将 Vuetify 与 Vuex 和 VueSocketIO 一起用于我的 WebApp,这是代码的示例部分:

如果我理解正确的话,一起使用 Vuex 和 VueSocketIO 使得只能同时使用一个这样的 Socket。

在某些情况下,Vue 可能无法连接到指定的套接字connection。我想知道是否有可能首先让 Vue 尝试连接到一个套接字(也有一些重新连接尝试)但切换到另一个connection值并在之后尝试使用该值作为后备?

先感谢您!

最终解决方案

0 投票
2 回答
658 浏览

node.js - 如何离开带有 vue-socket 的套接字房间并重新加入而不重复消息?

当我加入房间,然后离开路线返回,然后使用我建立的聊天室时,我收到的消息数量是我离开和重新加入次数的两倍。

当我硬刷新时,这个问题就消失了。

到目前为止,我已经尝试了所有我能找到的东西,但一直无法让它工作。

我在客户端尝试过,beforeRouteLeavebeforeDestroywindow.onbeforeunload

  • this.$socket.removeListener("insertListener");--> 尝试了所有
  • this.$socket = null
  • this.$socket.connected = false
  • this.$socket.disconnected = true
  • this.$socket.removeAllListeners()
  • this.$socket.disconnect()

在相同的事件中,我还发送了一个this.$socket.emit("leaveChat", roomId),然后在服务器端在io.on("connection")接收器内部尝试了以下操作socket.on("leaveChat", function(roomId) {})

  • socket.leave(roomId)--> 根据文档,这是应该工作的;
  • socket.disconnect()
  • socket.off()- 似乎已被弃用
  • socket.removeAllListeners(roomId)

我尝试了很多其他的事情,我不记得了,但如果我这样做了,我会更新帖子。

要么它以某种方式断开连接,并且在重新加入时,以前的听众或某些东西仍然存在,这意味着所有消息都收到*次重新加入。或者,如果我断开连接,我似乎无法重新连接。

加入时,我向服务器发送房间 ID 并使用 socket.join(roomId)。

我想要做的就是不刷新,当我离开页面时,在此之前,用户可以离开房间,当他们返回时,他们可以重新加入,不会出现重复的消息。

我目前正在尝试仔细阅读源代码。

0 投票
0 回答
141 浏览

flask-socketio - vue-socketio 和烧瓶-socketio

我正在使用 vue-socketio (v3.0.5) 与运行 flask-socketio (v4.3.1) 的烧瓶服务器进行通信。我的 Web 客户端可以连接,但不能长时间保持连接。在初始握手之后不会交换任何消息。我在详细模式下运行flask-socketio,但它没有给我任何解释。

是否存在版本兼容性问题?

我在服务器上看到以下内容:

紧接着...

0 投票
1 回答
357 浏览

vue.js - 如何将来自VueJs的套接字与内置套接字的Sails js与vue js中的sails.io.js连接起来?

我正在尝试通过 Sails.io.js 包通过套接字连接将 VueJs 与 Sails js 连接,但直到现在还没有成功。

我采用了 VuejS 入门模板和sails js 入门模板来完成整个工作。

我的前端包包含:

我的后端包包含:

在 vuejs 上,我的代码是,

所以我试图在安装 vue 组件后 2 秒后连接它。

但是每次我遇到一个相同的错误时,

WebSocket 连接到 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' 失败:连接在收到握手响应之前关闭

然后我尝试将 io.sails.url = 'http://localhost:1337' 更改为 io.sails.url = 'ws://localhost:1337'

但随后它开始显示错误(如果 io.sails.useCORSRouteToGetCookie = true),

GET ws://localhost:1337/__getcookie net::ERR_DISALLOWED_URL_SCHEME

但随后它开始显示错误(如果 io.sails.useCORSRouteToGetCookie = false),

WebSocket 连接到 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' 失败:连接在收到握手响应之前关闭

在sails js中,我在config/sockets.js文件中对socket的设置是,

我浏览了很多关于sails js的链接和文档,但到目前为止还没有成功。

在此之后,我尝试将套接字与其他可用包连接。那些是,

使用上述软件包时,我的 Vue js 代码是,

我在sails js控制器上使用/api/testhello创建了路线,其代码是,

有了这个,我在帆的控制台上得到输出,

但是有了这个,我的 vuejs 与sails js 连接,我得到一个客户端通过套接字连接,但我不知道如何获取连接的用户套接字ID或如何获取套接字实例。

上面我正在寻找的是:

  1. 如何在前端不使用sails.io.js但使用sails默认内置套接字功能的方法腾出空间?
  2. 如何将特定用户连接到该房间,因为我没有获得以这种不使用sails.io.js 的方法请求URL 的用户的Socket id?
  3. 如果上述方法在 vue js 中不使用sail.io.js,如何在sails js 中为集群模式配置Redis Pub sub?

提前致谢。

0 投票
1 回答
138 浏览

javascript - 如何在单个 vuejs 项目中连接多个套接字?

我尝试使用上面的代码。但只有套接字在工作。是否可以同时连接两个插座。