通過Timer和UpdatePanel控件實現(xiàn)NBA比賽的文字直播

文字直播是滿足一些觀看視頻直播而條件不足的球迷所設定的比賽直播方式，例如在長途車上為了能夠了解比賽的實時賽況但又限于流量和網(wǎng)速等問題，就出現(xiàn)了文字直播的方式。無論是擁有無線上網(wǎng)卡的筆記本電腦或者手機等終端設備都可以通過訪問文字直播滿足用戶需求，本實例將通過預先定義好的直播數(shù)據(jù)來模擬文字直播效果，具體實現(xiàn)步驟如下：
（1）新建一個網(wǎng)站并創(chuàng)建一個Default.aspx頁面，在頁面將使用div標簽進行直播窗口的布局，除了要實時更新的數(shù)據(jù)信息外，還包含一個控制復選框，用于啟用或停止自動更新。頁面源中要更新的布局標簽如下：
01 <divclass="livecontent">
02 <divclass="livecontenttitle"><span>球隊</span><span>時間</span>
03 <span>解說</span><span>比分</span></div>
04 <asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
05 <asp:UpdatePanelID="UpdatePanel1"runat="server">
06 <ContentTemplate>
07 <divclass="livecontentbody"id="livecontentbody"runat="server"></div>
08 <asp:TimerID="Timer1"runat="server"
09 Interval="10000"OnTick="Timer1_Tick"></asp:Timer>
10 </ContentTemplate>
11 </asp:UpdatePanel>
12 </div>
（2）為了模擬直播員錄入的比賽信息，在實例中將通過程序填充一些比賽數(shù)據(jù)，并且需要定義數(shù)據(jù)容器來承載這些數(shù)據(jù)，代碼如下：
01 publicstaticStringBuilder str = newStringBuilder();//比賽內(nèi)容數(shù)據(jù)綁定容器
02 publicstaticList<string[]> result = newList<string[]>();//直播員輸入的比賽數(shù)據(jù)容器
03 publicstaticint Index = -1;//比賽信息數(shù)據(jù)索引
04 protectedvoid Page_Load(object sender, EventArgs e)
05 {
06 if (!IsPostBack)
07 {
08 //首次加載時填充數(shù)據(jù)容器
09 result.Add(newstring[] { "cl", "11:48", "特里斯坦湯普森兩分球進", "0-0" });
10 result.Add(newstring[] { "ov", "00:00", "第一節(jié)結(jié)束", "30-30" });
11 //頁面加載設置友好提示信息
12 this.livecontentbody.InnerHtml =
13 "<div class=\"start\">各位觀眾大家好,比賽已經(jīng)正式開始!</div>";
14 }
15 }
注意：
由于篇幅的限制所以代碼中只給出了開始數(shù)據(jù)和結(jié)束數(shù)據(jù),實際數(shù)據(jù)總數(shù)為20條。
（3）再來實現(xiàn)啟用或暫停的復選框功能，代碼如下：
01 protectedvoid CheckBox1_CheckedChanged(object sender, EventArgs e)
02 {
03 this.Timer1.Enabled = ((CheckBox)sender).Checked;//用于啟用或暫停比賽直播
04 }
（4）最后定義Timer定時器定時觸發(fā)方法的功能，該處理方法將每隔10秒鐘進行一次調(diào)用，然后在方法中隨機生成1到3條數(shù)據(jù)并填充到容器，最后綁定到頁面上，代碼如下：
01 protectedvoid Timer1_Tick(object sender, EventArgs e)
02 {
03 Random ran = newRandom();//創(chuàng)建隨機類
04 int r = ran.Next(1, 4);//生成1-3隨機數(shù)
05 //根據(jù)生成的隨機數(shù)進行循環(huán)，并判斷總的數(shù)據(jù)量沒有超出循環(huán)范圍
06 for (int i = 0; i < r && Index < 20; i++)
07 {
08 Index++;//從0開始
09 string[] arr = result[Index];//獲取指定索引的數(shù)據(jù)
10 //向綁定容器中第0個位置插入比賽信息，此方式確保最新的數(shù)據(jù)永遠排在最上面
11 str.Insert(0, "<div class=\"livecontentbodylist\">" +
12 "<span><img src=\"images/" + arr[0] + ".png\"/></span>" +
13 "<span>" + arr[1] + "</span>" +
14 "<span>" + arr[2] + "</span>" +
15 "<span>" + arr[3] + "</span>" +
16 "</div>");
17 }
18 this.livecontentbody.InnerHtml = str.ToString();//綁定到頁面div容器中
19 if (Index > 19)//判斷索引值是否超出數(shù)據(jù)總數(shù)
20 {
21 this.Timer1.Enabled = false;//如果超出則本節(jié)結(jié)束，停止更新
22 }
23 }
執(zhí)行程序，頁面加載時將提示友好信息，如圖13.6所示，比賽開始后效果如圖13.7所示，最后第一節(jié)比賽結(jié)束后效果如圖13.8所示。

圖13.6 直播前友好提示信息

圖13.7 直播時的賽況信息

圖13.8 結(jié)束時停止更新