Stack Overflow 如何异步显示更新？答案

【问题标题】：How does Stack Overflow show the updates asynchronously?Stack Overflow 如何异步显示更新？
【发布时间】：2013-07-20 17:15:11
【问题描述】：

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

声誉变化
问题列表中添加了新问题
添加了新评论等

据我了解，它可以在XMLHttpRequest (XHR) 请求中异步完成，也许在setInterval 的帮助下。

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

这是哪种实现方式，如何在ASP.NET MVC 中实现？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 xmlhttprequest

【解决方案1】：

我想他们会使用SignalR 或WebSocket 之类的东西。 SignalR 将在可用时利用 WebSocket，然后回退到许多其他技术来实现相同的目标。

【讨论】：

用 Visual Studio 中的 Nuget 包管理器试试这个：- Install-Package Microsoft.AspNet.SignalR.Sample
还可以查看 SignalR Github 站点：github.com/SignalR/SignalR/tree/master/samples
sry，需要一些时间来完成它。希望你能理解。

【解决方案2】：

我最近回答了一个类似的问题： How do I display real-time information to the user?

正如Nathan Fisher 所说，您需要研究 Websockets 和 SignalR。

关于您在 Firefox 中看不到 XHR 请求，请尝试寻找 Websockets。在 Chrome 中，我可以在我访问的每个 SO 页面上看到一个 Websocket。

通知正在处理有关我的收件箱、我的声誉以及在我写这个答案时Nathan Fisher 对他的帖子进行了编辑，所以我可以看到该页面也在处理这个问题（我看到“已对此帖子进行了编辑”）。

【讨论】：

【解决方案3】：

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

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

我不确定 StackOverflow 的真正实现，但我已经做了很多这样的事情。

另一个提示：

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

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

编辑

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

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

【讨论】：

sry，需要一些时间来完成它。希望你能理解。
不用着急=)。查看here 获取示例，查看here 获取承诺让您的生活更轻松的插件。
@Minduca ：在您的第一句话中，JQuery Ajax 链接存在。这实际上是为每个请求创建 XHR。另一方面，如果您在 FireFox 中看到控制台，则会出现一些 XHR，而我们在 Stackoverflow 中为 cmets/rep/post 进行了一些异步更新。
@PKKG，我必须说当我提出我的答案时我没有打开 StackOverflow 代码 =)。我以为您想要一个类似的解决方案，而不是完全相同的解决方案。无论如何，我只是为你打开了代码。 StackOverflow 的 javascript 对 javascript 代码使用 Singleton 设计模式。只需查看浏览器控制台中的“StackExchange”变量即可。这就是这里 javascript 的核心。有一个基于此 StackExchange 变量的完整框架。现在，搜索“StackExchange.realtime.init('sockets.ny.stackexchange.com:80');”
然后，在您的控制台中查看“StackExchange.realtime.init”的实现。您将看到它们仅支持使用 WebSockets 进行异步更新。这是很好的和现代的，但只支持现代浏览器。您可以同时支持 Web 套接字和自定义 jquery ajax 实现以保持向后兼容性（我将粘贴此评论作为答案的一部分）。