一、前言
http://blog.jobbole.com/82746/
二、干货实战开始
在vs2013开发环境
1.创建ASP.NET空Web应用程序项目
2.右击SignalRTest项目添加新项,选择SignalR集线器(v2),并命名集线器名字为TestHub.cs
然后项目自动生成了Scripts文件夹和文件,下面的jquery-1.10.2.js和jquery.signalR-2.0.0.js比较重要的两个js库
3.还要添加一个OWIN Startup类
4.修改TestStartup里面代码,注册管道虚拟地址,为的是前端添加一个引用需要用到的配置地址,现在透露一些信息吧。就是这个<script src="signalr/hubs"></script>。这个文件是运行动态生成的,我们新建项目是看不到的,按照配置好路径就对了!
using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.TestStartup))] namespace SignalRTest { public class TestStartup { public void Configuration(IAppBuilder app) { // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888 //添加如下代码 //注册管道,使用默认的虚拟地址,根目录下的"/signalr",当然你也可以自己定义 app.MapSignalR(); } } }
5.在刚才新建的集线器里面就可以自己去写方法了,在方法体里可以通过 Clients.All.XXXXX 调用前端注册的js方法,实现了服务端调用客户端。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; namespace SignalRTest { //Hub的别名,方便前台调用 [HubName("testHHH")] public class TestHub : Hub { /// <summary> /// 自动生成的方法 /// </summary> public void Hello() { Clients.All.hello();//意思是调用所有客户端的集线器注册的方法 } /// <summary> /// 自定义一个方法发送给所有的客户端 /// </summary> /// <param name="msg"></param> public void SendToAllClients(string msg) { Clients.All.allMessage(msg);//意思是调用所有客户端的集线器注册的方法allMessage } } }
6.新建一个ChatTest.html 页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/jquery.signalR-2.0.0.js"></script> <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址--> <script src="signalr/hubs"></script> </head> <body> <div> <div>姓名:<input type="text" name="name" id="name" /></div> <div> <ul id="ul"> <li>开始群聊咯。。。。。。。。。。。。。</li> </ul> <input type="text" name="content" id="content" /><input type="button" name="btn" id="btn" value="发送" /> </div> </div> <script type="text/javascript"> $(function () { //1.声明一个代理引用集线器,如果集线器没有取别名,则要小写$.connection.testHub;如果有别名则直接写别名就好了 var chatClient = $.connection.testHHH; //2.注册服务端调用客户端的方法,就是刚才在TestHub中调用的方法 Clients.All.allMessage(msg); //注意是否有参数 chatClient.client.allMessage = function (msg) { //动态加载内容到ul中 $("#ul").append($("<li>" + msg + "</li>")); } //3. 必须启动连接 $.connection.hub.start().done(function () { $("#btn").click(function () { if ($("#name").val().length > 0) { var msg = $("#name").val() + "说:" + $("#content").val(); //4.客户端调用服务端方法,必须注意,很多时候自己掉坑了。。。调用服务端方法必须小写方法字母开头 chatClient.server.sendToAllClients(msg); } else { alert("请输入名字"); } }); }); }); </script> </body> </html>
7.运行结果
三、总结
服务端调用客户端js注册方法名字,名字大小写一致
客户端调用服务端方法,对应方法名字,客户端方的方法字母开头需小写
客户端声明一个代理引用集线器,如果集线器没有取别名,则要集线器类名字母开头小写$.connection.testHub;如果有别名则直接写别名就好了
客户端必须启动连接 $.connection.hub.start().done(function(){这里写调用服务端方法才能够起作用})