0

我是 vue 的初学者并创建了我的第一个应用程序。我使用 vuex，并且我有一个插件来管理服务器的 webSocket。只要我只处理从服务器发送到浏览器的消息，一切正常。

我现在想添加一个函数，如果已连接，则通过套接字发送消息，但我无法访问导出的函数。我也是 Javascript 编程的初学者。

这是插件代码：


var store = null;
var ws = null;

function startWebsocket() {
    ws = new WebSocket(process.env.VUE_APP_WEBSOCKET_URL)
    ws.onmessage = function (event) {
        console.log("webSocket: on message: ", event.data);
        store.dispatch('remoteMessage', event.data);
    }
    ws.onopen = function (event) {
        console.log("webSocket: on open: ", event)
        store.dispatch('connectionOpened');
    }
    ws.onclose = function (event) {
        console.log("webSocket: on close: ", event)
        store.dispatch('connectionClosed');
        ws = null
        setTimeout(startWebsocket, 5000)
    }    
    ws.onerror = function (event) {
        console.log("webSocket: on error: ", event)
    }
}

export default function createWebSocketPlugin() {
    return store_param => {
        store = store_param;
        startWebsocket();
    };
}

我想将以下函数添加到插件中，以便我可以从 vuex 操作函数中调用它。

export function sendWebSocketMsg(msg) {
    if (ws) {
        ws.sendMsg(msg)
    }
}

在 vuex index.js 文件中，我有这个：

. . .
import webSocket from '../plugins/webSocket'
. . .
export default new Vuex.Store({
  . . .
  actions: {
    connectionOpened({ commit }) {
      commit('SET_CONNECTION', true);
    },
    connectionClosed({ commit }) {
      commit('SET_CONNECTION', false);
    },
    connectionError({ commit }, error) {
      commit('SET_ERROR', error);
    },
    remoteMessage({commit}, message) {
      commit('SET_MESSAGE', message);
    },
    pause() {
      sendWebSocketMsg('{"pause":true}')
    },
    play() {
      sendWebSocketMsg('{"pause":false}')
    }
  }
}

webSocket 运行良好并自动重新连接。

我唯一缺少的是发送 webSocket 消息的能力。

如何修改 webSocket 插件？

4

2 回答 2

1

自从找到解决方案后，我就回答了我的问题。它在我遵循的教程中部分给出。

我不知道，但该插件是一个 vuex 插件。

解决方案是订阅一个 vuex 方法。我将空方法 SEND_MESSAGE 添加到 vuex 突变中。

  mutations: {
    SET_ERROR(state, errStr) {
      state.error = errStr;
    },
    SET_CONNECTION(state, status) {
      state.connected = status;
    },
    SET_MESSAGE(state, message) {
      let msg = JSON.parse(message);
      . . .
    },
    SEND_MESSAGE() {
    },
  },

我还添加了应用程序特定的操作：

    pause({commit}) {
      commit('SEND_MESSAGE', '{"pause":true}');
    },
    play({commit}) {
      commit('SEND_MESSAGE', '{"pause":false}');
    },

我从我的组件中调用存储操作，如下所示：

  methods: {
    pause() {
      this.$store.dispatch("pause");
    },
    play() {
      this.$store.dispatch("play");
    }
  },

剩下要做的唯一更改是在插件中。我订阅了一个调用 SEND_MESSAGE 突变的方法。这是这样做的：

export default function createWebSocketPlugin() {
    return store_param => {
        store = store_param;
        startWebsocket();
        store.subscribe((mutation, state) => {
            if (state.connected && mutation.type === 'SEND_MESSAGE' && ws) {
                console.log("webSocket send "+mutation.payload);
                ws.send(mutation.payload);
            }
        });          
    };
}

我添加了store.subscribe说明。我们仅在突变类型正确且连接了 Web 套接字时才执行操作。

于 2021-10-03T18:10:28.023 回答
0

ws变量是它定义的模块的本地变量，这需要修改插件模块以便函数访问ws，例如：

export function sendWebSocketMsg(msg) {
    if (ws) {
        ws.sendMsg(msg)
    }
}

export default function createWebSocketPlugin() {...}

然后可以在使用它的模块中导入命名导出：

import webSocket, {sendWebSocketMsg} from '../plugins/webSocket'
于 2021-10-03T16:23:59.070 回答