SignalR 跨域解决方案全面

简介: 原文:SignalR 跨域解决方案全面SignalR 分:PersistentConnection和Hub 2种模式。 跨域又分:UseCors和JsonP  2种方法 所以例子写了4种。 核心代码: UseCors //PersistentConnection Mode app.
原文: SignalR 跨域解决方案全面

SignalR 分:PersistentConnectionHub 2种模式。

跨域又分:UseCorsJsonP  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

目录
相关文章
|
3月前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
|
5月前
|
Web App开发 JSON 前端开发
前端跨域解决方案-汇总
前端跨域解决方案-汇总
77 0
|
8月前
|
移动开发 前端开发 JavaScript
前端跨域的解决方案?
前端跨域的解决方案?
72 0
|
8月前
|
移动开发 前端开发 安全
【前端跨域的解决方案?】
【前端跨域的解决方案?】
|
9月前
|
缓存 前端开发 JavaScript
跨域问题详解及解决方案
跨域问题详解及解决方案
377 0
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
745 0
|
Web App开发 前端开发 JavaScript
前端跨域解决方案
前后端分离开发给我带来很多的便利,无论是前端同学还是后端同学对于此种开发方式都是举双手赞成的。因为这样我们后端同学不用被css js这一大堆的前端代码折磨了,前端也不用改个样式要开个后台服务。虽然如此方便,但对于前端还是有些问题需要解决的。比如跨域问题,今天在项目中本地局域网测试移动端,手机浏览器打开会出现跨域(pc端跨域已通过chrome设置解决了)。
|
JSON JavaScript 前端开发
跨域的原因以及解决方案
跨域的原因以及解决方案
跨域的原因以及解决方案
|
运维 前端开发 应用服务中间件
开发中遇到跨域我选择这么做
开发中遇到跨域我选择这么做
158 0
开发中遇到跨域我选择这么做
|
负载均衡 JavaScript 前端开发
跨域几种解决方案(一)
跨域几种解决方案(一)
220 0
跨域几种解决方案(一)