asp.net-mvc - Stack Overflow 如何异步显示更新？

Question

在 Stack Overflow 网站上，我们可以看到以下异步更新。

1. 声誉变化
2. 问题列表中添加了新问题
3. 添加了新评论等。

据我了解，可以在 XMLHttpRequest 中完成(XHR) 异步请求，可能需要 setInterval 的帮助。

困惑:在 Firefox 中，没有 XHR 请求到来，即使这样我也可以异步看到上述更改。

这属于哪种实现方式以及如何在 ASP.NET MVC 中完成此操作？

Answer 1

这个令人印象深刻且美丽的东西是使用Ajax从客户端到服务器进行的异步调用。 .

一个非常简单的方法是使用 jQuery Ajax在 setInterval 内进行异步调用来搜索问题的“更新”(这是 ID 为 17779628 的问题。我们可以在 URL =P 上看到)。因此，对服务器的调用可以传递此 ID 和上次对服务器进行调用的时间戳(日期)。然后，服务器将从 TimeStamp 发生的更新带到 DateTime.Now。

我不确定 Stack Overflow 的实际实现，但我已经做了很多这样的事情。

---

另一个提示:

有一个改进。 ;)现代浏览器包含 WebSocket 的实现。由于套接字是“点对点”而不是“客户端-服务器”，因此现代浏览器不需要 setInterval 方法。相反，您可以在 JavaScript 中实现 WebSocket 打开然后服务器可以在更新发生时主动发送更新(您可以使用包含事件的设计模式)。

看看CanIUse查看哪些浏览器支持 WebSocket。

---

编辑

无论如何，我刚刚为你打开了代码。 Stack Overflow 的 JavaScript 代码使用 singleton JavaScript 代码的设计模式。只需查看浏览器控制台中的 StackExchange 变量即可。这是 JavaScript 代码的核心。正如你所看到的，有一个完整的API建立在这个 StackExchange 变量之上。现在，搜索 StackExchange.realtime.init('sockets.ny.stackexchange.com:80');

然后，在控制台上查看 StackExchange.realtime.init 的实现。看来他们支持使用 WebSocket 进行异步更新。这是很好和现代的，但只有新的浏览器版本支持。如果需要保持向后兼容性，可以同时支持 WebSocket(对于新浏览器)和 Ajax 实现(对于旧浏览器)。