如何用 port.start 开启共享子线程与主页面的长连接通道-js教程-PHP中文网

port.start() 并非开启长连接的方法，而是启用 messageport 消息接收队列的必要操作，需在获取 port 后显式调用以开始接收消息，尤其在未设置 onmessage 时；它属于 messagechannel 通信机制，不涉及网络连接。

如何用 port.start 开启共享子线程与主页面的长连接通道

port.start 并不是标准 Web API 或主流框架（如 Chrome 扩展、Web Workers、WebSocket）中用于开启“共享子线程与主页面长连接通道”的原生方法。它不存在于浏览器环境的标准 JavaScript API 中，也不直接属于 MessageChannel、Worker、SharedWorker 或 Port 接口的合法调用方式。

你可能混淆了以下几种常见场景中的概念：

✅ 正确理解：`MessagePort` 与 `start()` 方法

在基于 MessageChannel 的跨上下文通信中（例如主线程 ↔ Worker、iframe ↔ 主页、Service Worker ↔ 页面），确实存在 port.start()，但它不是用来“开启长连接”，而是启用端口的消息队列，用于手动控制消息接收时机（尤其在 onmessage 未设置时）。

✔️ 使用前提

你已通过 new MessageChannel() 创建通道；
已将 port1 或 port2 转移（postMessage(..., [port])）到另一上下文（如 Worker）；
接收方拿到 MessagePort 对象后，需显式调用 port.start() 才能开始接收消息（否则消息会积压或丢失）。

✔️ 示例：主线程 ↔ Web Worker 的可靠通信

// 主线程
const worker = new Worker('worker.js');
const channel = new MessageChannel();

// 启动 worker，并传入 port2
worker.postMessage({ type: 'INIT_PORT' }, [channel.port2]);

// 主线程监听 port1
channel.port1.onmessage = (e) => {
  console.log('收到 worker 消息:', e.data);
};

// ⚠️ 关键：必须调用 start() 启用接收（尤其在未设 onmessage 之前）
channel.port1.start();

// worker.js
let sharedPort;

self.onmessage = function(e) {
  if (e.data.type === 'INIT_PORT') {
    // 接收主线程传来的 port
    sharedPort = e.ports[0];
    sharedPort.onmessage = (e) => {
      console.log('Worker 收到:', e.data);
      sharedPort.postMessage('已处理: ' + e.data);
    };
    // ✅ 必须 start() 才能开始接收
    sharedPort.start();
  }
};

? 注意：若你设置了 port.onmessage，现代浏览器通常会自动隐式调用 start()；但显式调用是推荐做法，尤其在兼容性要求高或逻辑复杂时。

❌ 常见误解澄清

说法	是否正确	说明
`port.start()` 是开启长连接的入口	❌	它只是启用消息接收，不建立网络连接，也不维持 TCP/HTTP 长连接
`port.start()` 可用于 WebSocket 或 Fetch	❌	`WebSocket` 和 `fetch` 不涉及 `MessagePort`，无此方法
`port.start()` 是 Chrome 扩展 `runtime.connect()` 的一部分	❌	扩展中 `Port` 对象有 `start()`，但它是扩展 API 的独立实现，和 `MessageChannel` 无关，且仅用于 extension ↔ content script 通信