asp.net - SignalR は asp.net WebForms で使用できますか?

Question

SignalRプロジェクトでリアルタイムの更新に使用したい。

私のプロジェクトはで開発されていWebFormsます。

3、4日検索しましたが、見つかったのはMVCの例だけでした。誰でも解決策を提案できますか?

score 35 · Accepted Answer

@Stephen が提供する回答は、最新バージョンの SignalR (v2.2.0) には適用されないため、現在は古くなっています。また、私見が将来の読者が古き良き 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 (リリース日 2015 年 1 月 13 日)
jQuery バージョン 1.6.4
Owin v1.0.0 および Json、owin.Security などのその他のいくつか... (packages.config を参照)
IIS v7.0 以降。VS2015 に同梱されている IIS Express バージョン 10.0 で動作します。

手順:

WebForms プロジェクトで SignalR を機能させるには、次の手順に従います。このプロジェクトの目的は、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 個) が通知されます。[OK] をクリックします。次に、[同意する] をクリックしてライセンス条項に同意します。これにより、ダウンロードとインストールのプロセスが開始されます (非常に迅速です)。完了したら、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>

`

Web フォームを追加し、default.aspx という名前を付けます (Proj Add を右クリック --> Webform --> default.aspx と入力 --> [OK] をクリックします。
このコードをコピーして、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 フォルダーを右クリックします --> 追加 --> クラスを選択 .. (リストの一番下) --> Vsual C#、Web、SignalR の順にクリックします。 --> SignalR HubClass を選択 --> ファイル名として LogHub.cs と入力します。[OK] をクリックします。
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 スタートアップクラスファイルを追加し、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>

`

それでおしまい！。HTH !!

score 22 · Accepted Answer

Web フォームで 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」で検索してみる)

ハブクラスを作成する

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();
}
```

asp.net - SignalR は asp.net WebForms で使用できますか?

3 に答える 3

Related

Reference