首页 > 代码库 > SignalR初体验

SignalR初体验

2024-07-20 08:24:06   231人阅读

简介

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页面

//Controllerpublic 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="http://www.mamicode.com/广播消息" 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="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.signalR-1.0.1.min.js")" type="text/javascript"></script>//此处需要注意，在application_start方法内部，必须先注册RouteTable.Routes.MapHubs()，不然//将/signalr/hubs将提示资源未找到错误<script src="http://www.mamicode.com/@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="http://www.mamicode.com/@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

SignalR初体验


联系
我们