使用带有多个模块的 socket.io 客户端答案

【问题标题】：Using socket.io client with mutliple modules使用带有多个模块的 socket.io 客户端
【发布时间】：2022-01-20 18:27:35
【问题描述】：

我有多个 html 文件，它们每个都有关联的 js 文件，主要用于 DOM 操作和 socket.io 功能。但是，我不知道如何为这些不同的 javascript 文件使用相同的 socket.id。我也许可以将这些 js 文件合并为一个，但那将是一种倒退。

我尝试制作一个js模块socket.js:

import { io } from 'https://cdn.socket.io/4.3.2/socket.io.esm.min.js';
export const socket = io()

然后将其导入到我的 js 文件中，但我很快意识到这不起作用。

【问题讨论】：

什么不起作用？
文件之间的socket不同，尤其是socket.id
将所有与socket.io相关的代码放在一个文件中，一次加载该文件。我还建议研究一个前端框架，比如 react 来构建比简单信息板更复杂的网站
每个新网页都会创建一个新的 webSocket 连接——这些连接无法在浏览器中更改页面后继续存在——这与您的客户端模块策略无关——它只是浏览器的方式作品。因此，当页面加载并且该页面连接到您的服务器时，每个页面都会有不同的socket.id。您可能需要某种服务器端会话，以便您可以识别哪个用户是哪个用户 - 无论它是哪个 socket.id 并可能跟踪当前的socket.id。

标签： javascript websocket socket.io es6-modules web-frontend

【解决方案1】：

我今天也在尝试同样的事情，遇到了你的问题。我的解决方案是这样的：

main.js 在每次页面加载时加载。一个 IIFE 运行，它通过socket.on('connect', ()=>{}) 在我的发射器文件中使用套接字设置一个变量它还只是运行一个包含所有socket.on(msg,()=>{}) 的函数，传递套接字。

我可以将我所有的套接字消息函数放入emitters.js。并将所有收到的消息放入 received.js

我还没有发现任何问题，但我不确定这是否是标准做法。我找不到关于这个确切问题的太多信息，所以希望这会有所帮助。

main.js

import socketEmitters from './emitters';
import socketRoutes from './socketRoutes';

(function () {
  const socket = io();

  socketReceived(socket);

  socket.on('connect', () => {
    socketEmitters().getSocketInstance(socket);
  });
}());

发射器.js

let socket = null;
    
export default function socketEmitters() {

  return {
    emitBtnEvent(toggle, msg) {
      socket.emit(msg, true);
    },

    getSocketInstance(socketReceived) {
      socket = socketReceived;
    }

  };
}

received.js

export default function socketRoutes(socket) {

  socket.on('receivedMsg', () => {...});

}

【讨论】：