首先说明一下这个文章是自己在使用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 : Hub10 ????{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 ????????????else51 ????????????{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 : Controller10 ????{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 ????????????//创建后端要调用的前端function24 ????????????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
第一次发博客,也是希望自己能够多做记录,多做笔记,希望大家多多交流共同进步。
有不懂的欢迎留言
欢迎拍砖~
在Asp.Net MVC中实现SignalR的广播与定向推送
原文地址:http://www.cnblogs.com/cpf166/p/8046743.html