HTML5服务器驱动进度栏

分享于 

8分钟阅读

Web开发

  繁體

介绍

本文是一个 html/javascript实时进度条,由服务器更新。 为了达到这个目的,我们将一个,发送给所连接的客户端,每 100毫秒发送必要的时间组件( 小时。分钟。秒和毫秒)。 要进行快速总结:

  • 每小时从服务器向客户端发送的时间组件( 小时,分钟,秒,毫秒) 每100毫秒。
  • 它使用 progressbar.js显示和更新客户端的进度栏。
  • 它在内部使用收费 websockets,但由引擎抽象,将回退到旧浏览器的Flash 套接字。
  • 应用服务器是一个负担过重的自托管可执行文件。
  • 客户机只是一个收费的普通页面,显示进度条,进度条随着客户机从服务器获得发布数据而更新。

[Live Demo]

就像屏幕截图中所看到的,有四个进度条,包括小时。分。秒和毫秒。 完成 24小时后,进度进度条完成。 当分钟和秒的值达到 60时,分钟和第二进度条完成。 每秒完成毫秒进度条。

服务器端实现

让我们先让服务器。 这里服务器需要执行以下操作:

  • 向特定端点 ( IP+Port ) ,并创建发布订阅通道,以便将消息发布到客户端。
  • 在特定频率( 在我们的案例中) 上获取时间组件 publish发布所有已经订阅客户端的价值。

对于第一个任务,我们需要调用 Service.Listen 方法,以便开始侦听特定的ip地址和端口( 称为终结点)。 Main方法中的这一行完成了它:

Service.Listen(new TcpBinding(IPAddress.Any, 8002));

接下来,我们创建一个新的PubHub实例,通过使用statement引擎提供的语句:

var hub = Service.Hubs.GetOrCreatePubHub("Clock");

这实现发布订阅模型。在发布订阅服务器模型发件人中,不规划要直接发送给特定接收者的消息。 相反,发布的消息被特征化为类,不知道用户可能有什么。 同样,订阅者表示对一个或者多个类的兴趣,只接收感兴趣的消息,如果有的话。 我们首先创建PubHub实例,给它一个名称。 名称是重要的,因为我们需要在我们的客户端提供同样的名称,当我们想订阅。

然后调度每 100毫秒调用一次函数,这个函数将消息发布到 PubHub。

hub.Schedule(TimeSpan.FromMilliseconds(100), OnTick);

以下是它的外观:

[InvokeAt(InvokeAtType.Initialize)]publicstaticvoid Initialize()
{
 // We create a PubHub which acts as publish-subscribe channel. This allows us to publish// simple string messages and remote clients can subscribe to the publish notificationsvar hub = Service.Hubs.GetOrCreatePubHub("Clock");
 // We schedule the OnTick() function to be executed every 100 milliseconds. hub.Schedule(TimeSpan.FromMilliseconds(100), OnTick);
}

下面是发布消息的完整功能。 这相当简单,因为我们简单地调用 Publish 方法。 你可以能注意到我们并不担心我们希望传递给消费者的字典的序列化。 方法接受一个对象,并使用JSON格式自动对它的进行序列化。

privatestaticvoid OnTick(IHub hub)
{
 // Cast is as Pubhubvar pubHub = hub as PubHub;
 if (pubHub!= null)
 {
 // Get the current time and push it into the dictionaryvar dateTime = DateTime.Now;
 var time = new Dictionary<string, int>();
 time.Add("hours", dateTime.Hour);
 time.Add("minutes", dateTime.Minute);
 time.Add("seconds", dateTime.Second);
 time.Add("milliseconds", dateTime.Millisecond);
 // Publish data pubHub.Publish(time);
 }
}

客户端实现

现在,我们必须创建一个客户端,使用服务器发布的数据,并在html页面中呈现进度条。 为此,我们使用了的progressbar.js 库来显示进度栏。

我们首先在页面中添加所需的javascript引用:

<scriptsrc="Scripts/jquery-1.4.1.min.js"type="text/javascript"></script><scriptsrc="Scripts/progressbar.min.js"type="text/javascript"></script><scriptsrc="Scripts/spike-sdk.min.js"type="text/javascript"></script>

然后我们创建一个 div,我们的进度条将显示在其中。

<divid="divHoursProgressBar"></div><divid="divMinutesProgressBar"></div><divid="divSecondsProgressBar"></div><divid="divMillisecondsProgressBar"></div>

接下来,我们在javascript中实现客户端功能。 要从服务器获取发布数据,我们需要连接到服务器。 当客户端连接到服务器时,它会订阅时钟中心作为给它的名称。

var server = new spike.ServerChannel("127.0.0.1:8002");// Once the browser is connected to the server, subscribe.server.on('connect', function() {
 server.hubSubscribe('Clock', null);
});

一旦发布的数据被接收到客户端,我们调用负责处理进度条的函数"setstatus"。

// When we got a notification from the serverserver.on('hubEventInform', function(p) {
 setStatus(p.message);
});
function setStatus(timeComponents) 
{
 var parsedTimeComponents = JSON.parse(timeComponents);
 // Handle hours progress barvar hours = parsedTimeComponents.hours;
 var hoursProgressBarPercent = hours/.24;
 document.getElementById('lblHoursCount').innerHTML = hours;
 hoursProgressBar.setPercent(hoursProgressBarPercent);
 // Handle minutes progress barvar minutes = parsedTimeComponents.minutes;
 var minutesProgressBarPercent = minutes/.6;
 document.getElementById('lblMinutesCount').innerHTML = minutes;
 minutesProgressBar.setPercent(minutesProgressBarPercent);
 // Handle seconds progress barvar seconds = parsedTimeComponents.seconds;
 var secondsProgressBarPercent = seconds/.6;
 document.getElementById('lblSecondsCount').innerHTML = seconds;
 secondsProgressBar.setPercent(secondsProgressBarPercent);
 // Handle milliseconds progress barvar milliseconds = parsedTimeComponents.milliseconds;
 var millisecondsProgressBarPercent = milliseconds/10;
 document.getElementById('lblMillisecondsCount').innerHTML = milliseconds;
 millisecondsProgressBar.setPercent(millisecondsProgressBarPercent);
}

历史记录

  • 1: 源代码文章更新为 Spike Spike
  • 18/06/2014: 初始版本

Server  Drive  Html5  进度  进度条  
相关文章