Vue.js 从vuex和Vue本机websocket插件接收websocket数据

我目前正在使用Quasar V1框架，其中包括Vue和Vuex。 今天我在看这个插件：

我不确定如何设置此插件并使其工作，并且需要一些帮助来确保我做得正确，因为这将是我第一次在Vue中使用WebSocket

我首先通过npm安装了vue原生websocket，并创建了一个名为src\boot\websocket.js的启动文件

import VueNativeSock from 'vue-native-websocket';

export default async ({ Vue }) => {
  Vue.use(VueNativeSock, 'wss://echo.websocket.org', {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 3000
  });
};

通过此命令：

npm install vue-native-websocket --save

websocket.js

import VueNativeSock from 'vue-native-websocket';

export default async ({ Vue }) => {
  Vue.use(VueNativeSock, 'wss://echo.websocket.org', {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 3000
  });
};

在Quasar v1中，我在以下位置创建了一个名为“websockets”的模块：

本模块包括：

actions.js
getters.js
index.js
mutations.js
state.js

我需要使用启用“json”格式的websocket

我的问题是:

假设我有一个页面，我希望在其中创建websocket连接并接收实时数据，我可以这样做吗

模块代码： websockets/translations.js：

export function SOCKET_ONOPEN (state, event) {
  let vm = this;
  vm.prototype.$socket = event.currentTarget;
  state.socket.isConnected = true;
}
export function SOCKET_ONCLOSE (state, event) {
  state.socket.isConnected = false;
}
export function SOCKET_ONERROR (state, event) {
  console.error(state, event);
}
// default handler called for all methods
export function SOCKET_ONMESSAGE (state, message) {
  state.socket.message = message;
}
// mutations for reconnect methods
export function SOCKET_RECONNECT (state, count) {
  console.info(state, count);
}
export function SOCKET_RECONNECT_ERROR (state) {
  state.socket.reconnectError = true;
}

模块代码： websockets/state.js

export default {
  socket: {
    isConnected: false,
    message: '',
    reconnectError: false
  }
};

但问题现在出现在我的vue页面中

假设我只想显示websocket中具有特定事件的数据，请问如何从vue页面本身调用该数据？我对插件的这一部分感到非常困惑

对于我来说，了解如何分离接收和发送数据非常重要。 ie：我可能想收到许多用户的名单 或者我可能想收到所有新闻的列表 或者我可以向数据库中添加一个新用户

我不断听到有关频道、活动和订阅的消息。。。。。。 据我所知，您必须首先订阅一个频道（即：wss://mywebsite.com/news)，然后侦听事件，在这种情况下，我相信事件只是来自此通道的数据流）

如果我对以上内容的理解是正确的，那么如何订阅一个频道并用这个插件收听事件呢

---

如果您有一个非常快速的示例，那就太好了，谢谢。

我使用Vue原生websocket插件开发了一个聊天应用程序。这里我将展示如何在vuex存储中注册pulgin，以及如何从vue组件调用它

步骤1：在

index.js文件中定义这些方法

步骤2：写入套接字状态和状态

//注意：这里是从套接字连接获取的消息

SOCKET_ONMESSAGE (state, message) {   
 state.data.chatCollection = updateChatCollection(state.data.chatCollection,message)
},

步骤3：编写操作，您可以从vue组件调用它

注意：：连接和断开连接的套接字操作

WSConnect ({commit, state}) {
  connectWS()
},
WSDisconnect ({commit, state}) {
  disconnectWS()
},

步骤4：最后注册插件，因为它需要store对象

步骤5：从vue组件调用您的操作

现在您已连接到插座

步骤6：在vuex文件中编写操作方法

步骤7：您可以定义一个输入文本框，并在输入evenlisterner时调用action方法

谢谢，因为这是一条老线索，所以我一直遵循与您（几个月前）相同的路径。我会加上你的回答作为正确的一个，以帮助别人。
SOCKET_ONMESSAGE (state, message) {   
 state.data.chatCollection = updateChatCollection(state.data.chatCollection,message)
},

WSConnect ({commit, state}) {
  connectWS()
},
WSDisconnect ({commit, state}) {
  disconnectWS()
},

Vue.use(VueNativeSock, `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://www.example.com/socketserver`,
  { store: store, format: 'json', connectManually: true })

buttonClick (rowData) {        
   const tickCount = this.ticketClickCounter
   if (tickCount === 0) {
      this.$store.dispatch('WSConnect')
   } else {
      this.$store.dispatch('WSDisconnect')
       setTimeout(() => {
          this.$store.dispatch('WSConnect')
        }, 1000)
    }
   this.ticketClickCounter = tickCount + 1
},

sendChatMessageAction ({commit, state}, data) {
      // NOTE: Here, you are sending the message through the socket connection
   sendMessageWS({
        type: WSMessageTypes.MESSAGE,
        data: {
          param1: abc,
          param2: xyz,
          param3: 123,
          param4: $$$
       }
   })
},

onEnter (event) {        
 if (event.target.value !== '') {
    let newValue = {
        param1: Date.now(),
        param2: xyz,
        param3: 123,
     }
     this.$store.dispatch('sendChatMessageAction', newValue) // Action
  }
},