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

Question

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

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

现在我想实现以下目标。

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

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

在这种情况下执行的最佳操作过程是什么？

更新由于原始问题因未指定详细信息而被搁置，因此这里是我希望获得建议的详细信息。

我有一个运行在localhost:54603的asp.net mvc网站，下面是home controller的 Action

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

索引 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
Could not connect Error: Error during negotiation request.

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

Answer 1

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

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

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

至于身份验证，如果只有您的脚本需要访问身份验证，我认为这意味着您也可以使用您的域的身份验证(cookie 等)，不过我必须检查那个。最终，您会使用从包含的脚本向您的域发出 HTTP 请求来验证它们吗？

这里有一些有用的线索，可能有助于解决这个问题:

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