首页 > 代码库 > 使用SignalR更新页时时面动态
使用SignalR更新页时时面动态
最近的新项目中有个需求,要求用户在用户抢先体验中参加了活动,在其他的页面中的动态滚动栏中可以立刻显示,最新的活动参与信息。
以前可以用Javascript在前台使用长轮询的方法,这次使用了微软的一个开源库SignalR,SignalR可以在ASP .NET 的Web项目中实现实时通信。
一般情况下,SignalR会使用Javascript的长轮询( long polling),实现客户端和服务端通信。在WebSockets出现以后,SignalR支持WebSockets通信。SignalR使用了服务端的任务并行处理技术以提高服务器的扩展性。
看看我是如何实现这个功能的,注意项目一定要选择.net Framework4.5及以上
1.首先使用NuGet获取 Microsoft ASP.NET SignalR,项目中就会自动引入相关的dll和js
2.创建数据模型类(这里我使用一个自定义的MessageRepertory类模拟数据仓库)
public class MessageRepertory { public string Name { get; set; } public string Msg { get; set; } public static List<MessageRepertory> m = new List<MessageRepertory>();//模拟数据源 public static List<MessageRepertory> getMessage() { if (m != null) return m; else return null; } public static List<MessageRepertory> AddMessage() { Random r = new Random(); MessageRepertory A = new MessageRepertory { Name = "用户" + r.Next(1, 100).ToString(), Msg = "随机数" + r.Next(1, 100).ToString() }; m.Add(A); return m; } }}
3.创建MessageHub类
public class MessageHub : Hub { public List<MessageRepertory> Send() { List<MessageRepertory> m = MessageRepertory.getMessage(); string messages = JsonConvert.SerializeObject(m); return m; } }
4创建控制器MessageController
public class MessageController : Controller { // // GET: /Chat/ public ActionResult Index() { return View(); } public ActionResult Add()//模拟抢先体验 { return View(); } public ActionResult Update() { var a= MessageRepertory.AddMessage(); GlobalHost.ConnectionManager.GetHubContext<MessageHub>().Clients.All.updateInfo(); return Content("发送成功"); } }
5.创建一个启动类,映射SignalR
[assembly: OwinStartupAttribute(typeof(SignalRTest.Startup))]namespace SignalRTest{ public partial class Startup { public void Configuration(IAppBuilder app) { ConfigureAuth(app); app.MapSignalR();//映射 } }}
6.创建相关视图
A index视图
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script> <script src="/signalr/hubs"></script><!--由SignalR动态载入.-->
<style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } </style> <script type="text/javascript"> $(function () { var message= $.connection.messageHub function showmessage() { message.server.send().done(function (messages) { var dis = $("#discussion"); dis.html(""); $.each(messages, function (index,item) { dis.append(‘<li><strong>‘ + item.Name + ‘</strong>: ‘ + item.Msg + ‘</li>‘); }); }); } $.extend(message.client, { updateInfo: function () { return showmessage(); } }); $.connection.hub.start().pipe(showmessage);//开启客户端SignalR,并首次运行init }); </script></head><body> <div class="container">
<ul id="discussion"></ul> </div></body></html>
B Add视图
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Add</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function () { $("#up").click(function () { $.get("Update", function (data) { alert(data); }); }); }); </script></head><body> <div> <input id="up" type="button" value="update" /> </div></body></html>
运行效果:
使用SignalR更新页时时面动态
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。