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

Posted 2023-04-18

【中文标题】使用带有多个模块的 socket.io 客户端

【英文标题】：Using socket.io client with mutliple modules

【发布时间】：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。

【参考方案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', () => ...);