Soy un principiante en vue y creé mi primera aplicación. Uso vuex y tengo un complemento para administrar un webSocket al servidor. Todo funciona bien siempre que solo trate con mensajes enviados desde el servidor al navegador.
Ahora me gustaría agregar una función para enviar mensajes a través del socket si está conectado, pero no puedo acceder a la función exportada. También soy un principiante en la programación de Javascript.
Aquí está el código del complemento:
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(); }; }Me gustaría agregar la siguiente función al complemento para poder llamarlo desde una función de acción vuex.
export function sendWebSocketMsg(msg) { if (ws) { ws.sendMsg(msg) } }En el archivo vuex index.js tengo esto:
. . . 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}') } } }El webSocket funciona bien y se vuelve a conectar automáticamente.
Lo único que me falta es la capacidad de enviar un mensaje webSocket.
¿Cómo tengo que modificar el complemento webSocket?
Respondo a mi pregunta ya que encontré la solución. Se da en parte en el tutorial que seguí .
No lo sabía, pero el complemento es un complemento vuex.
La solución es suscribirse a un método vuex. Agregué el método vacío SEND_MESSAGE a las mutaciones de 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() { }, },También agregué las acciones específicas de la aplicación:
pause({commit}) { commit('SEND_MESSAGE', '{"pause":true}'); }, play({commit}) { commit('SEND_MESSAGE', '{"pause":false}'); },Llamo a las acciones de la tienda desde mis componentes así:
methods: { pause() { this.$store.dispatch("pause"); }, play() { this.$store.dispatch("play"); } },El único cambio que queda por hacer es en el complemento. Suscribo un método para llamar a la mutación SEND_MESSAGE. Así es como se hace:
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); } }); }; } Agregué la instrucción store.subscribe . Solo realizamos la operación cuando la mutación es del tipo correcto y el socket web está conectado.
La variable ws es local para el módulo que se definió, esto requiere modificar el módulo del complemento para que una función acceda a ws , por ejemplo:
export function sendWebSocketMsg(msg) { if (ws) { ws.sendMsg(msg) } } export default function createWebSocketPlugin() {...}Luego, la exportación con nombre se puede importar en el módulo donde se usa:
import webSocket, {sendWebSocketMsg} from '../plugins/webSocket'