vue.js - 从 vuex 和 Vue-native-websocket 插件接收 WebSockets 数据

Question

我目前正在使用包含 Vue 和 Vuex 的 Quasar V1 框架。今天我在看这个插件: https://www.npmjs.com/package/vue-native-websocket/v/2.0.6

我不确定如何设置此插件并使其正常工作，需要一些帮助以确保我这样做是正确的，因为这将是我第一次将 WebSockets 与 Vue 结合使用。

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

通过这个命令:

npm install vue-native-websocket --save

网络套接字

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”的模块:

src\store\websockets

这个模块有:

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

我需要使用格式为:'json' enabled 的 websocket

我的问题是:

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

模块代码:websockets/mutations.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 页面本身调用它？我对插件的这一部分很困惑。

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

我一直听说 channel 、事件和订阅......据我了解，您必须首先订阅一个 channel (即:wss://mywebsite.com/news)，然后收听事件，在这种情况下，我相信事件只是来自该 channel 的数据流。

如果我的上述判断正确，请问如何使用此插件订阅 channel 和收听事件，有什么想法吗？

如果你有一个非常简单的例子，那就太好了，谢谢。

Answer 1

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

Step 1: Define these methods in your index.js file

const connectWS = () => {
  vm.$connect()
}
const disconnectWS = () => {
  vm.$disconnect()
}

const sendMessageWS = (data) => {
  if (!Vue.prototype.$socket) {
    return
  }
  Vue.prototype.$socket.send(JSON.stringify(data))
}

Step 2: Write the socket state and mutations

SOCKET_ONOPEN (state, event) {
  if (!state.socket.isConnected) {
      Vue.prototype.$socket = event.currentTarget
      state.socket.isConnected = true
      let phone = state.config.selectedChatTicket.phone
      sendMessageWS({type: WSMessageTypes.HANDSHAKE, data: {id: window.ACCOUNT_INFO.accId, phone: phone, agentId: USER_NAME}})
    }
},
SOCKET_ONCLOSE (state, event) {
  console.log('SOCKET_ONCLOSE', state, event)
  state.socket.isConnected = false
  Vue.prototype.$socket = null
},

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

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

STEP 3 : Write Action, you can call it from your vue component

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

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

STEP 4: Register the plugin in the end as it requires the store object

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

STEP 5: call your action from your vue component

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

Now you are connected to the socket

STEP 6: write a action method in your vuex file

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: $$$
       }
   })
},

STEP 7: you can define a input text box and on-enter evenlisterner you can call the action method

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