利用SignalR（持久链接模式）跨域，从WebApi传送消息到Web程序

一，环境

1，vs2015, .net4.6  

2，NuGet（WebApi，Web均引用）添加引用，

Install-Package Microsoft.AspNet.SignalR、Install-Package Microsoft.Owin.Cors（跨域）

二，WebApi端

1，新建文件TyConnection.cs文件，继承持久连接类，用于注册事件，由于是WebApi，没有对应前端，顾为空

 

using Microsoft.AspNet.SignalR;

namespace PersistentApi
{
    public class TyConnection: PersistentConnection
    {

          protected Task OnConnected(……)

            ……

    }

}

 

 

 

2，App_Start文件加下添加Startup.cs文件

 

using Microsoft.Owin;
using Owin;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;

[assembly: OwinStartup(typeof(PersistentApi.Startup))]

namespace PersistentApi
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //Cros跨域声明
            app.UseCors(CorsOptions.AllowAll);
            //注册
            app.MapSignalR<TyConnection>("/server", new ConnectionConfiguration()
            {
                //jsonp跨域设定（兼容老版本浏览器）
                EnableJSONP = true
            });
        }
    }
}

 

3，在WebApi，某接口中调用持久链接的广播方法

 /// <summary> 
        /// PersistentConnection上下文 
        /// </summary> 
        private static IPersistentConnectionContext connectionContext = GlobalHost.ConnectionManager.GetConnectionContext<TyConnection>();      

        /// <summary>
        /// 供调用测试
        /// </summary>
        /// <returns></returns>
        [Route("Logout")]
        public IHttpActionResult Logout()
        {           
            connectionContext.Connection.Broadcast("跨域跨域");          
            return Ok();
        }

至此，WebApi配置结束，大体流程如上所述

三，Web端配置

1，前两步与WebApi一样

2，增加前台代码

3，前台代码如下

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
@Scripts.Render("~/Scripts/jquery.signalR-2.2.1.min.js")

<input type="text" id="testParme" />
<input type="button" id="test" value="测试" />
<div id="testContent">

</div>
<script type="text/javascript">
    jQuery.support.cors = true;
    $(function () {
        var connection = $.connection("/server");
        //开始
        connection.start();
        //接受服务端发来的消息
        connection.received(function (data) {            
            $('#testContent').append(data + "</br>");

        });
        $('#test').click(function () {
            
            $.ajax({
                type: "POST",
                url: "Test",
                data: { value: $('#testParme').val() }
            });


        });
        //路径为WebApi运行路径
        var connectionFormCross = $.connection("http://localhost:38679/server");
        
        connectionFormCross.start({jsonp:true});
        //接受服务端发来的消息
        connectionFormCross.received(function (data) {
            $('#testContent').append("<span style='color:red;'>" + data + "</span> </br>");

        });
    });

</script>

　　

 

 正式的第一篇，以后会慢慢补充，下一篇写Hub模式的跨域