通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能

文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式，例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题，就出现了文字直播的方式。无论是拥有无线上网卡的笔记本电脑或者手机等终端设备都可以通过访问文字直播满足用户需求，本实例将通过预先定义好的直播数据来模拟文字直播效果，具体实现步骤如下：

（1）新建一个网站并创建一个Default.aspx页面，在页面将使用div标签进行直播窗口的布局，除了要实时更新的数据信息外，还包含一个控制复选框，用于启用或停止自动更新。页面源中要更新的布局标签如下：

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）为了模拟直播员录入的比赛信息，在实例中将通过程序填充一些比赛数据，并且需要定义数据容器来承载这些数据，代码如下：

01  publicstaticStringBuilder str = newStringBuilder();//比赛内容数据绑定容器
02  publicstaticList<string[]> result = newList<string[]>();//直播员输入的比赛数据容器
03  publicstaticint Index = -1;//比赛信息数据索引
04  protectedvoid Page_Load(object sender, EventArgs e)
05   {
06  if (!IsPostBack)
07      {
08  //首次加载时填充数据容器
09          result.Add(newstring[] { "cl", "11:48", "特里斯坦汤普森两分球进", "0-0" });
10          result.Add(newstring[] { "ov", "00:00", "第一节结束", "30-30" });
11  //页面加载设置友好提示信息
12  this.livecontentbody.InnerHtml=
13  "<divclass=\"start\">各位观众大家好,比赛已经正式开始!</div>";
14     }
15   }

注意：

由于篇幅的限制所以代码中只给出了开始数据和结束数据,实际数据总数为20条。

（3）再来实现启用或暂停的复选框功能，代码如下：

01  protectedvoidCheckBox1_CheckedChanged(object sender, EventArgs e)
02  {
03  this.Timer1.Enabled = ((CheckBox)sender).Checked;//用于启用或暂停比赛直播
04   }

（4）最后定义Timer定时器定时触发方法的功能，该处理方法将每隔10秒钟进行一次调用，然后在方法中随机生成1到3条数据并填充到容器，最后绑定到页面上，代码如下：

01  protectedvoid Timer1_Tick(object sender, EventArgs e)
02  {
03  Random ran = newRandom();//创建随机类
04  int r = ran.Next(1, 4);//生成1-3随机数
05  //根据生成的随机数进行循环，并判断总的数据量没有超出循环范围
06  for (int i = 0; i < r&& Index < 20; i++)
07      {
08          Index++;//从0开始
09  string[] arr =result[Index];//获取指定索引的数据
10  //向绑定容器中第0个位置插入比赛信息，此方式确保最新的数据永远排在最上面
11          str.Insert(0, "<divclass=\"livecontentbodylist\">" +
12  "<span><imgsrc=\"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)//判断索引值是否超出数据总数
20      {
21  this.Timer1.Enabled = false;//如果超出则本节结束，停止更新
22      }
23  }

执行程序，页面加载时将提示友好信息，如图13.6所示，比赛开始后效果如图13.7所示，最后第一节比赛结束后效果如图13.8所示。

图13.6 直播前友好提示信息

图13.7 直播时的赛况信息

图13.8 结束时停止更新

感谢读者朋友对明日科技的支持，如果您对图书中的讲解及光盘源码有任何问题，可以直接登录http://www.mingrisoft.com上的社区进行发贴，把您的问题详细的说明一下，我们的技术人员会在那里给您回复！

本文摘自明日科技出版的《零基础学asp.net》，转载请注明出处！！！

通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能相关推荐

基于ASP.NET AJAX技术开发在线RSS阅读器（下篇）
五.逻辑层设计 (一)添加RSS频道在展开真正的逻辑层设计之前,先让我们简单地浏览一下下面的草图4.图4展示了我对于两个重要ASP.NET AJAX客户端控件-ListView和DataSource ...
动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术
这是突击一个星期的菜鸡作业,提供给大家进行分享学习,是基于ASP.VBScript的旅客主题动态网站,有登录注册.在线留言功能,连接了本地数据库,需要配置好IIS环境,然后把文件夹放到IIS文件夹中, ...
java实现掼蛋分组小游戏_基于Ajax技术的掼蛋比赛自动裁判系统设计与实现
掼蛋比赛时下流行,能丰富人们的生活,受众面广.工会每次组织此项活动参与率都很高,但几百人的比赛,给计分.裁判工作带来困难.传统的手工登分,计算,排名,常常容易出错.掼蛋比赛自动裁判系统能改变这一现状, ...
asp之ajax技术：responstext中文乱码
用ajax(动态网站静态化)来GET回一个页面时,RESPONSETEXT里面的中文多半会出现乱码,这是因为xml(标准化越来越近了)http在处理返回的responseText的时候,是把respo ...
ThinkPHP5整合原生Swoole实现NBA比赛图文直播以及聊天室功能
Github地址 https://github.com/duiying/swooleNBA 欢迎给个star 转载于:https://www.cnblogs.com/lwn007/p/10541858 ...
ASP.NET 第八季 ajax技术-胡延亮-专题视频课程
ASP.NET 第八季 ajax技术-2015人已学习课程介绍主讲内容: 第一讲 asp.net ajax简介第二讲 ScriptManager脚本管理控件第三讲 Script ...
用ASP.NET AJAX框架扩展HTML Map控件
[摘要]在本文中,我将向你展示如何使用ASP.NET AJAX框架对添加可点击的热点的HTML Map控件进行扩展.经扩展后,当我们的鼠标移动到这些热点上后,即弹出关于这些热点的详细信息;但是,这些详 ...
MSDN Webcast“深入浅出ASP.NET AJAX系列”
课程: ASP.NET AJAX深入浅出系列课程(1):ASP.NET AJAX 概述(3月13日):对于ASP.NET AJAX的大致功能进行概述和演示,通过简单的演示让听众了解到ASP.NET A ...
Msdn 杂志 asp.net ajax 文章汇集
asp.net ajax 充分利用客户端 JavaScript.DHTML 和 XMLHttpRequest 对象.其目的是帮助开发人员创建更具交互性的支持 AJAX 的 Web 应用程序 ASP.N ...

通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能

通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能相关推荐

最新文章

热门文章