Question

我正在尝试实现用户上传文件，服务器处理该文件并向客户端显示关于处理状态的实时通知的功能。验证，导入等。有些示例客户端将文本框中的数据发送到javascript代理。

 $("#btnTest").click(function () {
                myHub.testMethodOnHub($("#txtEmail").val());
            });

我需要通过signalR将二进制数据发送到服务器，以便服务器可以处理该数据并使用SignalR通知客户端。

编辑： - 我能够从aspx.cs调用JS方法来设置状态客户端 - 实时。但是，页面完成加载后消息将消失。

我尝试过： -

ASPX： -

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="MultipleStepsUsingSignalR._Default" %>

<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-0.5.2.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<body>

    <form id="Form1" runat="server">
    <p>
        <asp:FileUpload ID="fileUpload" runat="server" />
        <asp:Button ID="btnProcessFile" runat="server" Text="Process File" 
            onclick="btnProcessFile_Click" />
        <asp:HiddenField ID="hdnConnectionId" runat="server"/>
        <%--<asp:Label Text="" ID="lblStatus" runat="server" />--%>
        <span id="lblStatus"></span>
    </p>

  </form>
    <script type="text/javascript">
        $(document).ready(function () {
            var multipleStepsHub = $.connection.multipleStepsHub;

            multipleStepsHub.MethodInJavascript = function (status) {
                $('#lblStatus').append(status);
            };

            $.connection.hub.start().done(function () {
                $('#<%= hdnConnectionId.ClientID %>').val($.connection.hub.id);
                alert($('#lblStatus').text());
            });
        });
    </script>
  </body>

集线器

[HubName("multipleStepsHub")]
    public class MultipleStepsHub : Hub
    {
        public void ExecuteMultipleSteps(string status)
        { 

        }
    }

aspx的代码隐藏

   protected void btnProcessFile_Click(object sender, EventArgs e)
        {
            string connectionId = hdnConnectionId.Value;
            var context = GlobalHost.ConnectionManager.GetHubContext<MultipleStepsHub>();

            byte[] dataFromPostedFile = GetDataFromUploadedFile(fileUpload.PostedFile.InputStream);
            context.Clients[connectionId].MethodInJavascript("<br>File updloaded.");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step1");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step2");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step3");

        }

我期待什么： - 状态文本更改为“处理步骤1”，然后“处理步骤2”，然后“处理步骤3”

结果是什么： -

a）状态周期性变化（在Thread.Sleep之后），但是，当页面完成时，状态消失。正如您在下面注意到的那样，“处理步骤1”和“处理步骤2”确实出现，但后来消失了。

enter image description here

Answer 1

您的JavaScript方法有误：

multipleStepsHub.MethodInJavascript = function (status) {
            ("#lblStatus").val(status);
};

应该是

multipleStepsHub.MethodInJavascript = function (status) {
            $('#<%= lblStatus.ClientID %>').text(status);
};

请注意ASP.NET auto-generates HTML element identifiers。

编辑：如果您不想在上传完成后重新加载页面，那么您需要异步上传文件。在HTML5中，it's pretty easy to achieve。有关如何操作的另一个示例，请参阅this question。

Answer 2

您无法将常规文件发送到集线器方法。您可以使用常规的http处理程序或mvc或任何其他框架来发布文件并使用signalr来显示更新。

Answer 3

protected void btnProcessFile_Click是对服务器的完整回发，这意味着您正在重新加载页面，此时SignalR尚未（重新）加载。在页面加载完成后尝试使用Ajax请求。

SignalR实时通知不会持久存储在客户端上

3 个答案: