SignalR跨域解決方案全面

傑克.陳發表於2018-10-18
SignalR跨域
原文:SignalR 跨域解決方案全面

SignalR 分：PersistentConnection和Hub 2種模式。

跨域又分：UseCors和JsonP  2種方法

所以例子寫了4種。

核心程式碼：

UseCors

 //PersistentConnection Mode

            app.UseCors(CorsOptions.AllowAll);

            //PersistentConnection Mode
            app.MapSignalR<MyConnection>("/server", new ConnectionConfiguration()
            {
            });
            // 有關如何配置應用程式的詳細資訊，請訪問 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


相關文章