一切福田，不離方寸，從心而覓，感無不通。

SignalR 跨域解决方案全面

SignalR 分：PersistentConnection和Hub 2种模式。

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

所以例子写了4种。

核心代码：

UseCors

1
2
3
4
5
6
7
8
9
10
11
12
//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

1
2
3
4
5
6
7
8
9
//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 前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 建立对应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 前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 建立对应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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

from: https://www.cnblogs.com/shikyoh/p/6272679.html

Copyright © 2024 Longsheng All rights reserved.