首先说明一下这个文章是自己在使用SignalR的时候做个记录，目的是怕以后忘记了，因为我也不常用，做这样一个简单的demo以后用到的时候可以翻翻看。
至于SignalR是个什么玩意呢请您去自行百度一下，这里不过多赘述。
下面直入主题！
场景：
我们有个网站，在登录界面有个二维码登录功能，用户打开我们的APP点击扫码登录扫描网页上的二维码，这个时候我想要在页面上（网站登录页）做点反应，当用户在APP端扫描完毕之后，网站登录页上提示 --用户扫描已完成，请在手机上确认-- 等字样。
为了实现这个功能，我第一个想到的就是WebSocket但是考虑到浏览器的兼容性，果断的选择了SignalR，据说这货是在客户端的浏览器支持WebSocket的时候就用WebSocket不支持的时候就用long polling
实现流程：
1、用户打开我们的网站（浏览器）在登录页面选择二维码登录；
2、用户打开我们的APP扫描网站登录页上面的二维码（前提是APP处于登录状态）；
3、用户扫描完成之后网站的登录页面做相应的提示信息显示。
下面是消息处理中心的实现，也是今天的主角
1、首先新建一个 .net MVC的项目MessageHub
2、然后添加SignalR的引用，直接NuGet搜索SignalR，有很多版本，我这里直接安装的是最新版的，你也可以选择安装2.2.1或者2.2.0
3、添加引用完成之后，建议你最好看看这个玩意：
4、然后在项目中添加一个文件夹，你可以命名为：SignalR，添加我们的第一个Hub，右键、添加、新建项、SignalR集线器类（v2）
5、修改类中的代码，如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Microsoft.AspNet.SignalR; 6 7 namespace MessageHub.SignalR 8 { 9 public class MyHub1 : Hub 10 { 11 /// <summary> 12 /// 用户的connectionID与用户名对照表 13 /// </summary> 14 private readonly static Dictionary<string, string> connections = new Dictionary<string, string>(); 15 16 public void Send(string name, string message) 17 { 18 message = string.Format("消息:{0} 时间:{1}", message, DateTime.Now.ToString()); 19 //调用所有客户端的addNewMessageToPage function 20 Clients.All.addNewMessageToPage(name, message); 21 } 22 23 public static void Show(string name, string content) 24 { 25 IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MyHub1>(); 26 27 //广播，所有连接到服务器的客户端都会收到该通知 28 string message = "服务器广播的消息：hello"; 29 context.Clients.All.hello(message); 30 31 //推送到某个用户 32 string toUserId = ""; 33 if (connections.ContainsKey(name)) 34 { 35 toUserId = connections[name]; 36 context.Clients.Client(toUserId).SendMessage(content == "" ? "服务器给你推送消息了" : content); 37 } 38 } 39 /// <summary> 40 /// 用户上线函数 41 /// </summary> 42 /// <param name="name"></param> 43 public void SendLogin(string name) 44 { 45 if (!connections.ContainsKey(name)) 46 { 47 //这里是将用户id和姓名联系起来 48 connections.Add(name, Context.ConnectionId); 49 } 50 else 51 { 52 //每次登陆id会发生变化 53 connections[name] = Context.ConnectionId; 54 } 55 } 56 } 57 }
6、在App_Start目录中添加一个Startup.cs 代码如下：
1 using Microsoft.Owin; 2 using Owin; 3 4 [assembly: OwinStartup(typeof(MessageHub.Startup))] 5 namespace MessageHub 6 { 7 public class Startup 8 { 9 public void Configuration(IAppBuilder app) 10 { 11 app.MapSignalR(); 12 } 13 } 14 }
7、在HomeController中添加两个Action Chat、Chat1，chat1就是为了简单省事的做个服务器定点推送 代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 7 namespace MessageHub.Controllers 8 { 9 public class HomeController : Controller 10 { 11 public ActionResult Index() 12 { 13 return View(); 14 } 15 16 public ActionResult About() 17 { 18 ViewBag.Message = "Your application description page."; 19 20 return View(); 21 } 22 23 public ActionResult Contact() 24 { 25 ViewBag.Message = "Your contact page."; 26 27 return View(); 28 } 29 30 public ActionResult Chat() 31 { 32 return View(); 33 } 34 35 public ActionResult Chat1() 36 { 37 SignalR.MyHub1.Show("c1", "你去干啥？"); 38 39 return Content("推送消息给客户端"); 40 } 41 } 42 }
8、添加Chat视图：
1 @{ 2 ViewBag.Title = "Chat"; 3 } 4 5 <h2>Chat</h2> 6 7 <div class="container"> 8 <input type="text" id="message" /> 9 <input type="button" id="sendmessage" value="Send" /> 10 <input type="hidden" id="displayname" /> 11 <ul id="discussion"></ul> 12 </div> 13 @section scripts { 14 <script src="~/Scripts/jquery-1.10.2.min.js"></script> 15 <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> 16 <!--signalr自动生成的脚本--> 17 <script src="~/signalr/hubs"></script> 18 <script> 19 20 $(function () { 21 //声明hub代理 22 var chat = $.connection.myHub1; 23 //创建后端要调用的前端function 24 chat.client.addNewMessageToPage = function (name, message) { 25 //将信息添加到页面上 26 $(‘#discussion‘).append(‘<li><strong>‘ + name + ‘</strong>:‘ + message + ‘</li>‘); 27 }; 28 //对应后端的SendMessage函数，消息接收函数 29 chat.client.sendMessage = function (message) { 30 $(‘#discussion‘).append(‘<li><strong>‘ + name + ‘</strong>:‘ + message + ‘</li>‘); 31 }; 32 chat.client.hello = function (message) { 33 $(‘#discussion‘).append(‘<li><strong>服务器广播的消息：hello</strong></li>‘); 34 } 35 //获取输入的名称 36 $(‘#displayname‘).val(prompt(‘Enter your name:‘, ‘‘)); 37 //将焦点定位在信息输入框中 38 $(‘#message‘).focus(); 39 //开启链接 40 $.connection.hub.start().done(function () { 41 var username = $(‘#displayname‘).val(); 42 43 //发送上线信息 44 chat.server.sendLogin(username); 45 46 $(‘#sendmessage‘).click(function () { 47 //调用后台hub的Send方法 48 chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val()); 49 //清除发送的内容，并将焦点定位到信息框 50 $(‘#message‘).val(‘‘).focus(); 51 }); 52 }); 53 }); 54 </script> 55 }
到此代码已经贴完了，需要注意的点就是当你做定点推送的时候请去看一下这几个东西：
用一个名为：c1的登录
刷新我们的Action：chat1
第一次发博客，也是希望自己能够多做记录，多做笔记，希望大家多多交流共同进步。
有不懂的欢迎留言
欢迎拍砖~
