Websocket实战迷雾：“我收不到回执！”

WebSocket实战迷雾：没有拿到回执

在一次WebSocket实战中，我向后端发送消息后，却迟迟没有收到回执。我向后端工程师反映了这一问题，得到的答复却是：“我也没收到。”

问题一下子变得扑朔迷离，我开始四处寻找原因。突然，我意识到，另一个后端工程师的回执是由嵌套在我这边的iframe里的另一个前端页面进行输入的。

问题的成因

经过一番分析，我发现问题的根源在于：

• WebSocket连接建立在两个不同的后端之间，而不是直接连接到我的前端。
• 嵌套的iframe页面接收来自另一个后端的回执，但我这边却无法直接访问该页面。

解决方案

为了解决这个问题，我采用了以下步骤：

1. 在我的前端页面中，向嵌套的iframe页面发送消息，请求它转发回执。
2. 嵌套的iframe页面接收到消息后，将回执发送给另一个后端。
3. 另一个后端收到回执后，将其转发到我的前端。

实战经验

这次WebSocket实战给我留下了深刻的经验教训：

• 在复杂的技术系统中，问题可能并不总是显而易见的。
• 有时，解决问题的关键在于跳出固有思维，寻找看似不相关的地方。
• 与其他团队合作时，明确的沟通和清晰的接口至关重要。

技术指南

步骤 1：向嵌套iframe发送消息

const iframe = document.getElementById("nested-iframe");

iframe.contentWindow.postMessage({
  type: "request-receipt",
}, "*");

步骤 2：嵌套iframe接收消息

window.addEventListener("message", (event) => {
  if (event.data.type === "request-receipt") {
    // 获取回执并发送给另一个后端
    const receipt = getReceipt();
    event.source.postMessage({
      type: "receipt",
      data: receipt,
    }, "*");
  }
});

步骤 3：另一个后端接收回执

@PostMapping("/receive-receipt")
public void receiveReceipt(@RequestBody String receipt) {
  // 将回执转发到前端
  webSocketService.sendReceiptToFrontEnd(receipt);
}