如何通过服务器推送动态更新HTML5画布而无需重新加载页面?

时间:2011-08-31 19:35:46

标签: html5 canvas push

我想要做的是创建一个显示网络地图的画布。这不是一个真正的网络地图,但就解释它而言,网络地图示例最好不会让您陷入与我的问题无关的细节。

在网络地图上,我想显示流量所需的路线。这些路线随时间变化,有时频繁变化,每分钟多次。在服务器端,我有一个日志文件,在发生时附加每个路由更改。

我知道如何创建画布,我知道如何在画布上绘制路线。

是否可以让服务器在不需要页面重新加载/刷新的情况下将更新推送到画布,基本上根本不需要用户交互?绘制的路线只是自动改变?

这需要在IIS上工作,因此需要基于jscript或.Net的解决方案。我将无法安装PHP,Python,Ruby等。

提前感谢您提供的任何见解。

3 个答案:

答案 0 :(得分:3)

我建议您查看WebSockets解决方案,将信息从服务器推送到客户端(JavaScript)。收到更新后,您可以根据需要更新画布。

如果您首选的服务器技术是.NET,那么您应该看看的技术是Pusher这样的服务,我为谁工作,我们的.NET APIs允许您通过我们的REST将更新推送到客户端API。

如果您希望托管自己的实时基础架构,那么您可以查看WebSync(实际上是Comet技术),它与IIS以及XSockets集成。 this guide上还有许多可能让您感兴趣的实时技术。如果您有任何其他问题,请告诉我。

答案 1 :(得分:1)

服务器发送的事件:http://www.html5rocks.com/en/tutorials/eventsource/basics

(服务器发送事件是一种技术,用于以DOM事件的形式从服务器向浏览器客户端提供推送通知。服务器发送事件事件源API现在被W3C标准化为HTML5 [1]的一部分。)

答案 2 :(得分:0)

是的,之前我已经完成了这个(使用基于ajax的绘图应用程序)。这很有可能。通过AJAX(JSON或其他)发送信息包,解释它们,并在客户端的canvas元素上绘制它们。这对于设计来说是微不足道的(并且易于使用像jQuery这样的东西来实现)。您似乎已经发现需要有一个服务器端脚本将信息推送到网页和实际在画布上绘制内容的网页。这基本上就是它。