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);
            });
        });

 

posted @ 2016-12-13 16:13  hapgaoyi  阅读(585)  评论(0编辑  收藏  举报