SignalR 跨域解決方案全面
阿新 • • 發佈:2018-11-11
原文:
SignalR 跨域解決方案全面
SignalR 分:PersistentConnection和Hub 2種模式。
跨域又分:UseCors和JsonP 2種方法
所以例子寫了4種。
核心程式碼:
UseCors
//PersistentConnection Mode app.UseCors(CorsOptions.AllowAll); //PersistentConnection Mode app.MapSignalR<MyConnection>("/server", newConnectionConfiguration() { }); // 有關如何配置應用程式的詳細資訊,請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 //Hub Mode app.MapSignalR("/lcc", new HubConfiguration());
Use JsonP
//PersistentConnection Mode app.MapSignalR<MyConnection>("/server", new ConnectionConfiguration() { EnableJSONP = true }); // 有關如何配置應用程式的詳細資訊,請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 //Hub Mode app.MapSignalR("/lcc", new HubConfiguration() { EnableJSONP = true });
Cross HUb 前端
// 建立對應server端Hub class的物件,請注意geffChat的第一個字母要改成小寫 var chat = $.connection.myHub; $.connection.hub.url = 'http://localhost:2001/lcc'; //把connection開啟 $.connection.hub.start().done(function () { chat.server.hello(); }); // 定義client端的javascript function,供server端hub,通過dynamic的方式,呼叫所有Clients的javascript function chat.client.sendMessage = function (message) { //當server端呼叫sendMessage時,將server push的message資料,呈現在wholeMessage中 $('#messages').append('<li>' + message + '</li>'); }; $("#broadcast").click(function () { chat.server.sendMessage($('#msg').val()); $('#msg').val(""); }); $("#btnStop").click(function () { $.connection.hub.stop(); });
Cross Connection 前端
var connection = $.connection("http://localhost:2001/server"); connection.received(function (data) { $('#messages').append('<li>' + data + '</li>'); }); connection.start(); $("#broadcast").click(function () { connection.send($('#msg').val()); }); $("#btnStop").click(function () { connection.stop(); });
JsonP HUb
// 建立對應server端Hub class的物件,請注意geffChat的第一個字母要改成小寫 var chat = $.connection.myHub; $.connection.hub.url = 'http://localhost:16727/lcc'; //把connection開啟 $.connection.hub.start({ jsonp: true }).done(function () { chat.server.hello(); }); // 定義client端的javascript function,供server端hub,通過dynamic的方式,呼叫所有Clients的javascript function chat.client.sendMessage = function (message) { //當server端呼叫sendMessage時,將server push的message資料,呈現在wholeMessage中 $('#messages').append('<li>' + message + '</li>'); }; $("#broadcast").click(function () { chat.server.sendMessage($('#msg').val()); $('#msg').val(""); }); $("#btnStop").click(function () { $.connection.hub.stop(); });
JsonP connection
var connection = $.connection("http://localhost:16727/server"); connection.received(function (data) { $('#messages').append('<li>' + data + '</li>'); }); connection.start({ jsonp: true }); $("#broadcast").click(function () { connection.send($('#msg').val()); }); $("#btnStop").click(function () { connection.stop(); });
程式碼下載:http://download.csdn.net/detail/shikyoh/9734460