从外部文件导入socket变量后WebSocket无法正常工作求助

问题场景 #

场景1（正常工作） #

const socket = new WebSocket("ws://localhost:3000/socket");

setTimeout(() => {
  console.log("socket: ", socket);
}, 3000);

运行后WebSocket的readyState值为1（已连接），工作正常。

场景2（无法连接） #

test.js代码：

export const socket = new WebSocket("ws://localhost:3000/socket");

主文件代码：

import { socket } from "./test";

setTimeout(() => {
  console.log("socket: ", socket);
}, 3000);

此时WebSocket的readyState始终为0（连接中），无任何变化，无法建立连接。

原因 #

核心问题出在ES模块的执行时机：

• 场景1中，WebSocket实例是在脚本执行阶段创建的，此时运行环境（比如浏览器）已经完成基础初始化，网络请求可以正常发起。
• 场景2中，模块级别的new WebSocket()会在模块被加载解析时立即执行。如果模块加载时机过早（比如浏览器中模块脚本放在<head>且未加defer/async），此时浏览器可能还未完成页面初始化，WebSocket的连接请求会被阻塞；或者在某些打包工具的处理逻辑中，模块执行阶段的网络上下文受限，导致连接无法正常建立，readyState一直停留在0。

你可以给WebSocket添加onerror事件监听，大概率能捕获到具体的连接失败原因：

export const socket = new WebSocket("ws://localhost:3000/socket");
socket.onerror = (err) => {
  console.error("WebSocket连接错误: ", err);
};

解决方案 #

方案1：延迟创建WebSocket实例 #

不要在模块级别直接创建实例，改成导出一个初始化函数，在环境就绪后再调用：
test.js：

export let socket;
export function initSocket() {
  socket = new WebSocket("ws://localhost:3000/socket");
  socket.onopen = () => {
    console.log("WebSocket已连接");
  };
  socket.onerror = (err) => {
    console.error("连接失败: ", err);
  };
}

主文件：

import { initSocket, socket } from "./test";

// 确保环境就绪后初始化，比如浏览器中DOM加载完成
window.addEventListener("DOMContentLoaded", () => {
  initSocket();
  setTimeout(() => {
    console.log("socket: ", socket);
  }, 3000);
});

方案2：调整模块加载时机 #

如果是在浏览器环境中，确保模块脚本的加载时机是在页面初始化完成后。比如给模块脚本添加defer属性：

<script type="module" src="./main.js" defer></script>

defer会让模块脚本在DOM加载完成后再执行，此时创建WebSocket的环境已经就绪。

方案3：检查服务器与网络状态 #

确认本地WebSocket服务器（ws://localhost:3000/socket）是否正常运行，端口是否被占用，同时检查浏览器控制台的网络请求，看WebSocket的握手请求是否发送成功，是否有报错信息。

内容的提问来源于stack exchange，提问作者logic13