SignalR初体验

简介

ASP .NET SignalR^[1]  是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。

1、环境部署

首先新建一个mvc项目，通过Nuget获取相应SignalR包。使用Nuget的命令模式，直接输入

Install-Package Microsoft.AspNet.SignalR -Version 1.0.1

由于最新版本需要Net Framework 4.5支持， 本文所使用的环境是SignalR v1.0.1版本。该版本依赖于Jquery 1.6、Microsoft.AspNet.SignalR.Core 等。

具体环境：Vs2010 + AspNet Mvc 3.0 +SignalR v1.0.1

2、应用场景

　　服务器端需要推送消息群发所有的客户端提示”卤鸽发布了新的博客《SignalR 初体验》“

那么接下来就来模拟实现下这这个场景

3、具体实现

　　服务器推送消息通知所有客户端

　3.1 新建一个hub

public class PushHub:hub
{
         
}

   3.2 新建一个广播的Push页面

//Controller
public class HomeController:Controller
{
      public  ActionResult Push()
      {
            return View();
      }
       [HttpPost]
       public  ActionResult Push(string message)
       {
            IHubContext  chat=GlobalHost.ConnectionManager.GetHubContext<PushHub>();
            chat.Clients.All.notice(message);
            return Json(new{Result=true},JsonRequestBehavior.AllGet);
       }      
}

//View
<form>
    <input type="text" id='message' name='message' />
    <input type="submit" value="广播消息" onclick="return onSubmit()" />
</form> 
<script>
    function onSubmit() {
        $.ajax({
            url: '@Url.Action("Push")',
            data: { message: $("#message").val() },
            type: 'post',
            dataType: 'json',
            success: function (result) {
                 alert(result); 
            }
        });
        return false;
    }
</script>       

  3.3 接收信息的页面

//引入SignalR脚本库
<script src="@Url.Content("~/Scripts/jquery.signalR-1.0.1.min.js")" type="text/javascript"></script>
//此处需要注意，在application_start方法内部，必须先注册RouteTable.Routes.MapHubs()，不然
//将/signalr/hubs将提示资源未找到错误
<script src="@Url.Content("~/Signalr/Hubs")"></script>
<script >
    //连接服务端的Hub,此处pushHub上面定义的hub
    var pushHub= $.connection.pushHub;
    //定义服务端（HomeController)中调用notice方法（chat.Clients.All.notice(message);
   pushHub.client.notice=function(message){
       alert(message);
   }
    //将连接打开
    $.connection.hub.start();
</script>

 

 效果如下所示

至此应用场景效果已经实现，显示的方式有点土。当然你也可以将提示消息从右下角滚动输出，就像平常收到邮件提醒一样。这只是实用SignalR的简单应用。

4  延伸

　　我们也可以实现实时聊天（包含：两个客户端用户之间的通信，客户端群发消息等等）。针对实时聊天的功能的实现，我们可以通过扩展PushHub类。

　　首先定义一个字典类型当前在线的用户Dictionary<string,string> userDic=new Dictionary<string,string>() ;//key 表示用户id,value表示用户名

　　其次在PushHub类中实现Login(userid,userName)方法，每次登陆上来的用户，进行添加到UserDic字典中（客户端可以通过 调用push.server.login(userid,username)触发服务端的Login方法 )

　　再次在PushHub类中实现发送到固定的用户消息SendMessage(toUserId,message)方法（调用方法如上所示）

　　最后客户端页面实现消息显示的交互

　　对于实时聊天的实现具体可以参考《猛点这里》

5 总结

• 在客户端使用hub是一定注意第一个字母小写如本文$.connection.pushHub
• 在Application_Start方法一定要注册RouteTable.Routes.MapHubs()，不然脚本<script src="@Url.Content("~/SignalR/Hubs")" />将无法找到
• 客户端调用服务端的Hub方法可以通过使用 pushHub.server.method进行调用
• 服务端调用客户端的方法（如controller中调用客户端notice方法），需在客户端做如下定义 pushHub.client.method=function(){};

本文源码下载

 参考

http://www.dotblogs.com.tw/jasonyah/archive/2013/05/30/chatroom-with-signalr-realtime-web-application.aspx