如何将包含signalR的asp.net mvc页面与其他平台集成

Question

这个问题不是this 的重复问题，虽然提到的问题有一些非常有趣的答案并帮助我更好地理解我的问题，但它并不能满足我的需要。让我解释一下我的情况。

我有一个 asp.net mvc 网站，具有通知功能和通过 signalR 和 SQL 依赖的实时数据更新。用户身份验证是使用 Identity 2.0 完成的。 只允许授权用户查看更新的数据/通知。此外，通知/更新因用户而异。我通过实现自定义 UserId 提供程序并使用 Identity 的 UserId 实现了这一点。

现在我想实现以下目标。

• 简单部分：在其他网站中显示页面（仪表板）的内容，无论其开发语言如何。它可以注入现有页面或他们（其他网站）想要的任何地方。

• 困难部分：根据登录用户在集成部分显示实时通知和更新。

在这种情况下执行的最佳行动方案是什么？

更新 由于原问题因未详细说明而被搁置，所以这里是我想获得建议的细节。

我有一个asp.net mvc网站在localhost:54603运行，下面是home控制器的动作

public ActionResult Index()
{
   HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", "*");
   return View();               
}

索引视图上有一些 signalR 功能。下面是允许 CORS 的 signalR 的启动配置，因为我的目标是向客户端公开索引页面及其全部功能（运行 php 等）

app.Map("/signalr", map =>
{

  map.UseCors(CorsOptions.AllowAll);
  var hubConfiguration = new HubConfiguration
  {
       // You can enable JSONP by uncommenting line below.
       // JSONP requests are insecure but some older browsers (and some
       // versions of IE) require JSONP to work cross domain
       // EnableJSONP = true
   };

  map.RunSignalR(hubConfiguration);
});

我已经创建了notifcationHub，下面是我在前端的代码（使用代理）。

<script>
    $(function () {
        // Reference the auto-generated proxy for the hub.
        $.connection.notificationHub.url = 'http://localhost:54603/signalr';
        var notification = $.connection.notificationHub;

        // Client side method for receiving the list of notifications on the connected event from the server
        notification.client.refreshNotification = function (data) {
            $("#notificationTab").empty();
            $("#cntNotifications").text(data.length);
            for (var i = 0; i < data.length; i++) {
                $("#notificationTab").append("<tr> <td> " + data[i].Id + "</td> <td>" + data[i].Text + "</td> <td>" + data[i].CreatedDate + "</td></tr>");
            }
        }

        //Client side method which will be invoked from the Global.asax.cs file.
        notification.client.addLatestNotification = function (data) {       
            $("#cntNotifications").text($("#cntNotifications").text() + 1);
            $("#notificationTab").append("<tr> <td> " + data.Id + "</td> <td>" + data.Text + "</td> <td>" + data.CreatedDate + "</td></tr>");
        }

        // Start the connection.
        $.connection.hub.start().done(function () {

            //When the send button is clicked get the text and user name and send it to server.
            $("#btnSend").click(function () {
                notification.server.sendNotification($("#text").val(), $("#userName").val());
            });
            console.log($.connection.hub.id);

        }).fail(function (data) { console.log('Could not connect' + data); });

    });
</script>

Html 正在关注

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>

@*<script src="~/signalr/hubs"></script>*@

<div style="width: 70%; padding: 20px">
    <div class="panel panel-primary">
        <div class="panel-heading">

            <! &ndash; To show notification count-->
            <div style="float: left" class="panel-title">Notifications</div>
            <div style="float: right" class="badge" id="cntNotifications"></div>
            <div style="clear: both"></div>


        </div>
        <div class="panel-body">
            <! &ndash; To show All the notifications-->
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Text</th>
                        <th>Created Date</th>
                    </tr>
                </thead>

                <tbody id="notificationTab"></tbody>
            </table>
        </div>
    </div>

    <! &ndash; Add panel notification to send notification, Make sure that user enters the user id of the domain they are logged into -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Create Notifications</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label class="control-label" for="focusedInput">Notification Text</label>
                <input class="form-control" id="text" type="text" value="">
            </div>
            <div class="form-group">
                <label class="control-label" for="focusedInput">Send To</label>
                <input class="form-control" id="userName" type="text" value="">
            </div>
            <a id="btnSend" style="cursor: pointer" class="btn btn-primary">Send Notification</a>
        </div>
    </div>
</div>

页面运行正常，连接 ID 正在控制台中登录。

现在我创建了另一个 html 页面，下面是它的代码

<html>
<head>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  
    <script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"></script> 
</head>
<body>
    <aside>
         <div class="col-lg-2">
              <ul>
                  <li>this</li>
                  <li>is</li>
                  <li>aside</li>
              </ul>
              </div>
    </aside>
    <article>
        <div class="col-lg-10">
            <div id="something">

            </div>
        </div>
    </article>
    <script src="http://localhost:54603/signalr/hubs"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "http://localhost:54603/Home/Index",
                dataType: 'html',
                crossDomain: true,
                cache:true


            }).done(function (data) {
                $('#something').html(data);
            });
        });
    </script>
</body>
</html>

Ajax 请求正在返回 html，但 signalR 抛出错误。以下是控制台消息。

GET http://localhost:54603/Home/Index 200 OK 1.18s
无法连接错误：协商请求期间出错。

我做错了什么导致这个错误？

Answer 1

很难准确地确定您需要做什么，因为这个问题相当广泛，但我希望这些观点对您有所帮助：

SignalR cross-domain 在客户端使用 JavaScript，在服务器端使用 CORS，因此您可以在这方面进行介绍。您可以轻松创建一个 JavaScript 文件，该文件可以连接到 SignalR 通道，而无需对 PHP 代码进行任何更改，除了在客户端页面中包含 JavaScript。

您可以很容易地在您的服务器上创建一个脚本，客户端可以在其页面上引用该脚本，该脚本将所需的所有内容拉到客户端的页面上。因为脚本是从您自己的服务器执行的，所以我认为您不必担心 CORS，因为它不是真正的“跨站点脚本”，因为执行请求的代码将由您的服务器/域“拥有”。

至于身份验证，如果只有您的脚本需要访问身份验证，我认为这意味着您也可以使用您的域的身份验证（cookie 等）。不过，我必须检查那个。最终，您会使用包含的脚本中对您的域的 HTTPs 请求对它们进行身份验证？

以下是一些有用的线程，可能会对此有所帮助：

• Cross-Domain Cookies
• Creating a javascript cookie on a domain and reading it across sub domains