如何在桌面端调试WebSocket/服务器推送事件的重新连接？

Question

我正在开发一个应用程序，使用服务器推送事件（SSE - 基本上是一种单向的Websockets）。如果用户在移动 Chrome 浏览器上使用网站，然后标签页退出大约一分钟，SSE 连接就会断开。如果用户然后返回到网站，它不会刷新页面（这很好）。但我仍然需要重新建立 SSE 连接，以便服务器可以在没有刷新的情况下继续向他们发送消息。

我正在尝试调试我的实现，但在移动设备上进行非常繁琐。我必须拿起手机，刷新页面，然后标签页退出，等待1分钟（使连接断开），然后标签页返回，以确定重新建立连接的代码是否正常工作。

我更愿意能够在桌面上调试这个问题，但我没有找到方法。我已经尝试了以下方法：

1. 尝试了5个不同的Chrome扩展程序来睡眠选项卡。不幸的是，当你回到该选项卡时，它只会刷新页面而不是恢复它。
2. 尝试使用USB调试，但桌面始终保持选项卡处于打开状态，即使在移动设备上切换选项卡，选项卡也永远不会休眠。
3. 尝试在Chrome开发者工具控制台中运行debugger;，但即使我让JavaScript的执行冻结了5分钟以上，它仍然不会断开SSE连接，因此我无法测试重新连接是否有效。
4. 尝试使用扩展程序来杀死Chrome的互联网连接，但奇迹般的是，这仍然保持活动的websocket/SSE连接。显然，谷歌工程师已经降低了这方面的努力？

基本上，我想模拟在移动设备上发生的情况：当你从Web浏览器中切出并等待一分钟，然后切回（JavaScript执行被冻结，SSE连接在一分钟左右断开，然后切回恢复JavaScript并尝试重新连接SSE）。

这是可能的吗？

- Ryan Peschel

---

我有同样的需求。 - Simon H

我们能通过更改浏览器设置来减少超时时间吗？Firefox具有默认的90秒可配置超时。 - the Hutt

Answer 1

对我来说，最明显的解决方案是附加一个监听器来跟踪与选项卡激活相关的事件，并在此基础上构建一些自定义解决方案。

简单地说：

window.onfocus = () => { 
  // Restore SSE session 
}; 

window.onblur = function () { 
  // Inactive 
}; 

仅供参考，SSE是一种与Websockets不同的协议。
如果您有兴趣使用Websockets实现，我建议使用以下库，根据我的经验它非常好用：https://www.npmjs.com/package/@stomp/stompjs

Stomp是对Websocket协议的抽象，但这也意味着您需要在服务器端实现它。

- html_programmer

---

我不想使用WebSockets。它们对于我的简单需求来说太复杂了。此外，你的回答并没有帮助我通过模拟类似于在移动设备上切换选项卡的操作来调试SSE。 - Ryan Peschel

@RyanPeschel 我有点困惑。我以为你的意图是在重新获得焦点时重新建立连接。如果你测试一次可以正常工作，那么应该没问题了吧？请注意，我只添加了WebSockets的信息，因为你在帖子中多次提到它，为了避免混淆（以及万一你感兴趣）。 - html_programmer

不，我的意图是调试服务器推送事件的重新连接。我正在寻找一种方法来导致这种连接中断，以便我可以调试我的重新连接代码是否正常工作。 - Ryan Peschel

@RyanPeschel 我建议你可以尝试根据这里描述的方式进行远程调试：https://developer.chrome.com/docs/devtools/remote-debugging/。但是，如果你在上述回调函数中添加了重新连接逻辑，你应该能够在服务器脚本处设置断点，以查看是否发生了重新连接，对吗？ - html_programmer

使用重新连接很难使所有边缘情况都能正常工作，所以每次更改内容后都需要等待几分钟来查看更改是否生效，这有点麻烦。 - Ryan Peschel

@RyanPeschel 我不确定你在测试连接/重新聚焦时有哪些边缘情况。个人而言，我会为移动设备实现和测试一次，确保它能正常工作，然后继续在普通浏览器上开发。之后，我可能会列出所有的边缘情况，并使用像Selenium/BrowserStack这样的工具来运行自动化测试，以免在开发过程中浪费时间。仅代表个人意见。 - html_programmer

Answer 2

我认为最好的方法是通过模拟你的安卓设备来实现。你可以通过从https://developer.android.com/studio安装安卓工作室，然后在这里你有所有需要开始和管理虚拟安卓环境https://developer.android.com/studio/run/managing-avds。

这是我调试整个移动开发的方式。

- pmakowski

---

理想情况下，我不想下载 Android Studio（一个庞大的应用程序），只是为了调试 SSE 连接断开时发生了什么。 - Ryan Peschel

此外，这并没有真正改变任何事情，因为流程仍然是切换标签页，等待几分钟，然后再切回来。只不过现在是在模拟器上完成而不是在手机上。它并没有解决核心问题（长反馈循环）。 - Ryan Peschel

Answer 3

你可以使用chrome://discards来冻结你的标签页。

你应该根据页面生命周期事件关闭和恢复连接。

- Rex Pan

---

当标签页解冻时，这会导致标签页刷新，因此无法用它来测试SSE连接中断。 - Ryan Peschel

我尝试了 sleep 但它没有断开连接。我再也找不到冻结按钮了。https://imgur.com/a/StKIRA2 - Rex Pan

Answer 4

你可以尝试使用暂停执行

跳转至:

• Chrome JavaScript控制台（Ctrl+Shift+J）>源代码>暂停脚本（按f8键）

这样就可以模拟移动选项卡切换，方便调试。

我认为这是一个简单易行的解决方案。谢谢。

- Aashif Ahamed

---

暂停执行不会中断SSE连接，正如原帖中所提到的。 - Ryan Peschel