asp.net - SignalR 可以与 asp.net WebForms 一起使用吗？

Question

我想SignalR在我的项目中使用实时更新。

我的项目是在WebForms.

我搜索了 3,4 天，但我发现的都是 MVC 示例。任何人都可以提出解决方案吗？

score 35 · Accepted Answer

@Stephen 提供的答案现在已经过时，因为它不适用于最新版本的 SignalR (v2.2.0)。此外，还有一些其他没有提到的事情，恕我直言，这些事情可能会帮助未来的读者使用 Good old Webforms 框架快速开始使用 SignalR。该解决方案可能看起来很乏味，但事实并非如此。我希望它可以帮助访问此页面的人寻求有关 SignalR for Webforms 的帮助。

先决条件：（ 我使用的版本在括号中）。我没有在其他版本上测试过这个解决方案

MS Visual Studio 2015/2013。(2015) 在 Win-7 x64 上
.Net FrameWork 4.5 或更高版本 (4.5.2)
NuGet 的 SignalR 版本 2.2.0（发布日期 01/13/2015）
jQuery 版本 1.6.4
Owin v1.0.0 和 Json、owin.Security 等少数其他...（参见 packages.config）
IIS v7.0 及更高版本。适用于 VS2015 附带的 IIS Express 10.0 版。

步骤：

按照以下步骤让 SignalR 在 WebForms 项目中工作。该项目的目的是使用 SignalR 定期向所有连接的客户端（浏览器会话）广播时间戳。只有第一个时间戳是由服务器端代码在代码隐藏文件中生成的。Rest 来自 SignalR HubClass，它负责定期生成时间戳并将它们广播到所有连接的会话。

在 Visual Studio (2015) 创建一个空 WebForms 项目。（选择空模板并检查“添加核心库和文件夹”下的 WebForms）。假设我们将其命名为“SignalR_WebForms”。
下载、安装和添加对 SignalR+jQuery+Owin 库的引用

2a。工具 --> NuGet 包管理器 --> 管理解决方案的 Nuget 包。

2b。在搜索中键入“Microsoft.ASPNet.SignalR”并选择“Microsoft.ASPNet.SignalR”（服务器组件）。

2c。在右侧面板现在选中“SignalR_WebForms”旁边的框。这将启用“安装”按钮。选择最新版本（截至今天为 2.2.0）并单击安装按钮。这将弹出一个“Review Changes”对话框，通知您将安装的所有包（共 10 个）。单击确定。然后单击“接受”以接受许可条款。这将开始下载和安装过程（非常快）。完成后打开 Packages.config 文件（位于 proj 文件夹的根目录下），它应该如下所示：

`

<-- Packages.config should look like this  -->

<?xml version="1.0" encoding="utf-8"?>
    <packages>
      <package id="jQuery" version="1.6.4" targetFramework="net452" />
      <package id="Microsoft.AspNet.SignalR" version="2.2.0" targetFramework="net452" />
      <package id="Microsoft.AspNet.SignalR.Core" version="2.2.0" targetFramework="net452" />
      <package id="Microsoft.AspNet.SignalR.JS" version="2.2.0" targetFramework="net452" />
      <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.0" targetFramework="net452" />
      <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="1.0.0" targetFramework="net452" />
      <package id="Microsoft.Net.Compilers" version="1.0.0" targetFramework="net452" developmentDependency="true" />
      <package id="Microsoft.Owin" version="2.1.0" targetFramework="net452" />
      <package id="Microsoft.Owin.Host.SystemWeb" version="2.1.0" targetFramework="net452" />
      <package id="Microsoft.Owin.Security" version="2.1.0" targetFramework="net452" />
      <package id="Newtonsoft.Json" version="6.0.4" targetFramework="net452" />
      <package id="Owin" version="1.0" targetFramework="net452" />
</packages>

`

添加一个网络表单并将其命名为 default.aspx（右键单击 Proj Add --> Webform --> 键入 default.aspx --> 单击确定。
将此代码复制粘贴到 default.aspx 文件中（标记）

`

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="SignalR_WebForms._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>SignalR Using webForms</title>

    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="signalr/hubs"></script>


    <script type="text/javascript">

        $(function() {

            var logger = $.connection.logHub;

            logger.client.logMessage = function(msg) {

                $("#logUl").append("<li>" + msg + "</li>");

            };

            $.connection.hub.start();

        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

    <h3>Log Items</h3>
    <asp:listview id="logListView" runat="server" itemplaceholderid="itemPlaceHolder" clientidmode="Static" enableviewstate="false">
        <layouttemplate>
            <ul id="logUl">
                <li runat="server" id="itemPlaceHolder"></li>
            </ul>
        </layouttemplate>
        <itemtemplate>
                <li><span class="logItem"><%#Container.DataItem.ToString() %></span></li>
        </itemtemplate>
    </asp:listview>



    </div>



    </form>
</body>
</html>

`

将下面的代码复制粘贴到代码隐藏文件（default.aspx.cs）中

`

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SignalR_WebForms
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var myLog = new List<string>();
            myLog.Add(string.Format("{0} - Logging Started", DateTime.UtcNow));

            logListView.DataSource = myLog;
            logListView.DataBind();
        }
    }
}

`

将 App_Code 文件夹添加到项目中。（右键单击 Proj --> 添加 --> 添加 ASP.Net 文件夹 --> 选择 App_Code ）。
添加一个 SignalR Hub 类并将其命名为 LogHub.cs 右键单击 App_Code 文件夹 --> 添加 --> Pick Class ..（在列表底部） --> 单击 Vsual C# 然后 Web 然后 SignalR --> Pick SignalR HubClass --> 输入 LogHub.cs 作为文件名。单击确定。
打开 LogHub.cs 类文件并删除现有代码并将下面的粘贴代码复制到其中。节省。

`

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalR_WebForms.App_Code
{
    public class LogHub : Hub
    {
        public static readonly System.Timers.Timer _Timer = new System.Timers.Timer();

        static LogHub()
        {
            _Timer.Interval = 5000;
            _Timer.Elapsed += TimerElapsed;
            _Timer.Start();
        }

        static void TimerElapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            var hub = GlobalHost.ConnectionManager.GetHubContext("LogHub");
            hub.Clients.All.logMessage(string.Format("{0} - Still running", DateTime.UtcNow));
        }
    }
}

`

添加一个 Owin Startup Class 文件并将其命名为 Startup1.cs。（右键单击 App_code --> 添加 --> 类 --> 单击 Vsual C#，然后单击 Web，然后单击常规 --> 选择 Owin 启动类。）删除现有代码并将下面的粘贴代码复制到此类文件中。保存。

`

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(WebApplication1.App_Code.Startup1))]

namespace WebApplication1.App_Code
{
    public class Startup1
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

`

构建并运行项目 (F5)。如果没有错误，您应该在本地浏览器上看到以下输出。

`

Log Items
•06/04/2016 09:50:02 PM - Logging Started
•06/04/2016 09:50:06 PM - Still running
•06/04/2016 09:50:11 PM - Still running
•06/04/2016 09:50:16 PM - Still running
•06/04/2016 09:50:21 PM - Still running
.....
.....
.....
.....
Keeps Going **without** having to refresh the Browser.

`

从远程 PC 访问同一站点，您应该获得完全相同的时间戳。这将验证该站点是否按预期工作。
要进一步验证右键单击浏览器并单击查看源代码。在 IE 上，这会打开一个带有页面 html 的记事本窗口。找到“logUL”，您应该只看到显示初始时间戳的标记。没有标记显示剩余更新，因为这些更新由 SignalR 集线器注入。这类似于 AJAX。

`

<div>
<h3>Log Items</h3>
        <ul id="logUl">

            <li><span class="logItem">06/04/2016 09:50:02 PM - Logging Started</span></li>

        </ul>

</div>

`

而已！。！

score 22 · Accepted Answer

您可以将 SignalR 与网络表单一起使用。请参阅下面的教程示例

创建面向 .NET Framework 4.5 或更高版本的新 ASP.NET WebForms 项目

更改主页以包含以下内容

<asp:content runat="server" id="BodyContent" contentplaceholderid="MainContent">


    <h3>Log Items</h3>
    <asp:listview id="logListView" runat="server" itemplaceholderid="itemPlaceHolder" clientidmode="Static" enableviewstate="false">
        <layouttemplate>
            <ul id="logUl">
                <li runat="server" id="itemPlaceHolder"></li>
            </ul>
        </layouttemplate>
        <itemtemplate>
            <li><span class="logItem"><%#Container.DataItem.ToString() %></span></li>
        </itemtemplate>
    </asp:listview>

</asp:content>

编辑 default.aspx.cs 代码隐藏文件以包含以下事件

protected void Page_Load(object sender, EventArgs e)
{

    var myLog = new List<string>();
    myLog.Add(string.Format("{0} - Logging Started", DateTime.UtcNow));

    logListView.DataSource = myLog;
    logListView.DataBind();

}

通过 NuGet 添加 SignalR 包。（尝试搜索“Microsoft ASP.Net SignalR JS”和“Microsoft ASP.Net SignalR JS”）

创建一个 Hub 类

public class LogHub : Hub
{

    public static readonly System.Timers.Timer _Timer = new System.Timers.Timer();

    static LogHub()
    {
        _Timer.Interval = 2000;
        _Timer.Elapsed += TimerElapsed;
        _Timer.Start();
    }

    static void TimerElapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
        var hub = GlobalHost.ConnectionManager.GetHubContext("LogHub");
        hub.Clients.All.logMessage(string.Format("{0} - Still running", DateTime.UtcNow));
    }

}

在页面底部设置以下脚本块（您的 jquery 和 jquery.signalr 版本可能会有所不同）

<script src="Scripts/jquery.1.7.1.min.js"></script>
<script src="Scripts/jquery.signalR-1.0.0-rc1.min.js"></script>
<script src="http://www.codeproject.com/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">

    $(function() {

        var logger = $.connection.logHub;

        logger.client.logMessage = function(msg) {

            $("#logUl").append("<li>" + msg + "</li>");

        };

        $.connection.hub.start();

    });

</script>

将以下内容添加到 global.asax.cs 中的 Application_Start 事件处理程序

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHubs();
}

score -2 · Accepted Answer

-2

在包管理器控制台中输入：

install-package Microsoft.AspNet.SignalR -Version 1.1.3

于 2013-12-11T12:17:12.687 回答

asp.net - SignalR 可以与 asp.net WebForms 一起使用吗？

3 回答 3

Related

Reference