WebSocket permite que el servidor envíe datos al cliente de forma proactiva, estableciendo una conexión persistente mediante un único handshake para la comunicación bidireccional.

Definir un módulo para la configuración global

Crea un archivo, por ejemplo socketGlobal.js, que mantenga la instancia de WebSocket accesible en toda la aplicación.

// socketGlobal.js
export default {
    socketInstance: null,
    actualizarSocket: function(nuevaInstancia) {
        this.socketInstance = nuevaInstancia;
    }
};

Importa y registra este módulo en el punto de entrada de tu aplicación Vue.

// En main.js para Vue2
import socketGlobal from './socketGlobal.js';
Vue.prototype.$socketGlobal = socketGlobal;

// En main.js para Vue3
import socketGlobal from './socketGlobal.js';
const app = createApp(App);
app.config.globalProperties.$socketGlobal = socketGlobal;

Establecer la conexión inicial

Implementa una función que inicie la conexión WebSocket en un momento ooprtuno, como al cargar la aplicación.

function conectarWebSocket() {
    if (!window.WebSocket) {
        console.error('El navegador no soporta la tecnología WebSocket.');
        return;
    }

    const wsInstance = new WebSocket('wss://mi-servidor.com/endpoint');
    socketGlobal.actualizarSocket(wsInstance);

    wsInstance.addEventListener('open', () => {
        console.log('Conexión WebSocket activa.');
    });

    wsInstance.addEventListener('close', () => {
        console.log('La conexión WebSocket se ha cerrado.');
        // Opcionalmente, implementar lógica de reconexión
        // setTimeout(conectarWebSocket, 3000);
    });
}

Integración en componentes Vue2

Dantro de un componente Vue2, utiliza la propiedad global para interactuar con el WebSocket.

export default {
    methods: {
        enviarDatos() {
            const ws = this.$socketGlobal.socketInstance;
            if (ws && ws.readyState === WebSocket.OPEN) {
                const mensaje = { accion: 'saludo', contenido: 'Hola servidor' };
                ws.send(JSON.stringify(mensaje));

                ws.onmessage = (evento) => {
                    const respuesta = JSON.parse(evento.data);
                    console.log('Respuesta recibida:', respuesta);
                    // Procesar la respuesta según la lógica de negocio
                };
            }
        }
    }
};

Integración en componentes Vue3

En Vue3, accede a las propiedades globales mediante la Composition API.

import { getCurrentInstance } from 'vue';

export default {
    setup() {
        const instancia = getCurrentInstance();
        const { $socketGlobal } = instancia.appContext.config.globalProperties;

        function comunicarConServidor() {
            const ws = $socketGlobal.socketInstance;
            if (ws && ws.readyState === WebSocket.OPEN) {
                const datos = { id: 123, comando: 'consultar' };
                ws.send(JSON.stringify(datos));

                ws.onmessage = (evento) => {
                    const informacion = JSON.parse(evento.data);
                    console.log('Datos del servidor:', informacion);
                    // Actualizar el estado reactivo del componente
                };
            }
        }

        return { comunicarConServidor };
    }
};