Vuex vuejs nodejs 维护和存储到 API 的多个连接答案

【问题标题】：Vuex vuejs nodejs maintaining and storing multiple connections to an APIVuex vuejs nodejs 维护和存储到 API 的多个连接
【发布时间】：2020-10-15 13:27:40
【问题描述】：

我是一名 Vue 初学者，正在编写一个管理多个相同类型设备的应用程序。每个设备都需要连接到 API 才能执行任何请求。 如何维护和存储此连接，这样我就不必在每次请求之前尝试连接？

目前我的应用程序只有 Vuex 和 Vuejs，每次用户需要在设备上执行操作时，我都会连接设备、执行请求并断开设备连接。这显然是非常低效的。我想让我的 Vue 应用程序保持持续连接，并且仅在手动从应用程序中删除设备或关闭应用程序时断开连接。这是我目前正在做的一个例子：

(async () => {
    await device.find();
    await device.connect();
    await device.execute(action)
    device.disconnect();
})();

任何帮助表示赞赏。谢谢

【问题讨论】：

对于长时间的连续连接，请使用套接字。 socket.io 是一个很好的解决方案，但它不是原生套接字。
我也考虑过套接字。我认为它会完美地工作。我想我会为每个设备创建一个套接字。但我不确定如何管理连接，然后从 Vuex/Vuejs 的后端检索连接
嗯？套接字是一个连接

标签： node.js vue.js electron vuex

【解决方案1】：

我认为在这种情况下你应该开始使用套接字。

将 socket.io 与 Vue.js 和 Node.js 一起使用完整示例：

在您的后端（Node.js）中：

//setting up sockets
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)
io.on('connection', (socket) => {
  socket.on('executeAction', function(data) {
    io.emit('updateSomeData', data)
  });
})

从 Vue 组件发送更新：

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  someData: []
 }
},
methods: {
 this.socket.emit('executeAction', {someData: this.someData})
}

在Vue组件中监听socket：

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  someData: []
 }
},
created() {
  this.socket.on('updateSomeData', (data) => {
   this.someData = data.someData
  })
}

供您参考：socket.io

【讨论】：