SignalR入门之小试身手
建立好持久性连接类TestConnection之后,现在为我们的SignalR程序配置持久性连接类以及访问路径。
进入刚刚建立的Startup类,进入Configuration这个方法里来配置:
1 using System;
2 using System.Threading.Tasks;
3 using Microsoft.Owin;
4 using Owin;
5
6 [assembly: OwinStartup(typeof(Startup))]
7
8 public class Startup
9 {
10 public void Configuration(IAppBuilder app)
11 {
12 app.MapSignalR<TestConnection>("/test");//配置指定持久性连接类,同时映射访问路径后面有用,这里可以进行其他配置,后面再说
13 }
14 }
配置好后,再来进行客户端调用。
首先,在项目中建一个html的静态网页。
代码如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <script src="Scripts/jquery-1.10.2.min.js"></script> <!--引入jquery库-->
7 <script src="Scripts/jquery.signalR-2.1.2.min.js"></script> <!--这个js是signalR客户端所需要的js,利用 get-package microsoft.aspnet.signalr 安装时会自动生成 -->
8 <script type="text/javascript">
9 $(function () {
10 var connection = $.connection("/test");//根据之前配置好的连接路径来创建连接,/test 就是在Startup类中配置好的持久性连接访问路径
11 connection.start(function () {//开始连接,进行开始连接后,在TestConnection类中,会执行OnConnected方法
12 connection.send("你好");//向服务端发送一段数据,那么服务端就会执行OnRecevied方法,同时可以看到从客户端发送过来的数据
13 });
14 connection.received(function (data) {//接收服务端传过来的数据,注意这个方法只需要写一遍,他会默认不停地监听从服务端传过来的数据,data就是从服务端发送过来的数据,字符串格式的。
15 alert(data);
16 });
17 });
18 </script>
19 <meta charset="utf-8" />
20 </head>
21 <body>
22
23 </body>
24 </html>
在TestConnection类中,
Connection.Broadcast(data);这个方法还可以传另外的一个参数,就是发送给所有给客户端但是不包括发送给XX。可以给这个方法加另外的拒绝发送给谁的列表,以connectionId为标准
如 Connection.Broadcast("你好",new string[]{connectionId}); 这句话的意思就是把你好发送给所有客户端,但不包括connectionId的这个。正好与Connection.Send 相反,它表示发送给指定的connectionId的客户端。
若需要自己创建的SignalR程序支持跨域或jsonp可以如下设置:
1 app.MapSignalR<TestConnection>("/test", new ConnectionConfiguration() { EnableJSONP = true });//在Startup的Configuration方法中配置持久性连接映射路径添加配置
或
1 app.Map("/test", map =>
2 {
3 map.UseCors(CorsOptions.AllowAll);//允许使用Cors方式
4 map.RunSignalR<TestConnection>();
5 }
6
7 );
不过上面中的UseCors和CorsOptions这几个成员需要用到microsoft.owin.cors中提供的扩展方法,那么就需要安装相对应的库了
命令如下:
1 install-package microsoft.owin.cors
静态页面中这样写:
$(function () {
var connection = $.connection("http://127.0.0.2/test");
connection.start({jsonp:true},function () {
connection.send("你好");
});
connection.received(function (data) {
console.log(data);
});
});