一,环境
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模式的跨域