Tengo varios archivos html y cada uno tiene archivos js asociados principalmente para manipulaciones DOM y también funcionalidad socket.io. Sin embargo, no puedo entender cómo tener el mismo socket.id para estos diferentes archivos javascript. Tal vez pueda fusionar estos archivos js en uno solo, pero eso sería una regresión.
Intenté hacer un módulo js socket.js :
import { io } from 'https://cdn.socket.io/4.3.2/socket.io.esm.min.js'; export const socket = io()y luego importé esto en mis archivos js, pero pronto me di cuenta de que esto no estaba funcionando.
Estaba intentando lo mismo hoy y encontré tu pregunta. Mi solución fue esta:
main.js se carga en cada carga de página. se ejecuta un IIFE que establece una variable en mi archivo de emisor con el socket a través de socket.on('connect', ()=>{}) También ejecuta una función que contiene todos los socket.on(msg,()=>{}) , pasando el zócalo.
Puedo poner todas mis funciones de mensajes de socket en emitters.js. y todos los mensajes recibidos en receive.js
Todavía no he encontrado ningún problema, pero aún no estoy seguro de si esta es una práctica estándar. No pude encontrar mucha información sobre esta pregunta exacta, así que espero que esto ayude.
principal.js
import socketEmitters from './emitters'; import socketRoutes from './socketRoutes'; (function () { const socket = io(); socketReceived(socket); socket.on('connect', () => { socketEmitters().getSocketInstance(socket); }); }());emisores.js
let socket = null; export default function socketEmitters() { return { emitBtnEvent(toggle, msg) { socket.emit(msg, true); }, getSocketInstance(socketReceived) { socket = socketReceived; } }; }recibido.js
export default function socketRoutes(socket) { socket.on('receivedMsg', () => {...}); }