web-dev-qa-db-ja.com

SignalRをasp.netWebFormsで使用できますか？

プロジェクトでSignalRを使用してリアルタイムで更新したいと思います。

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

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

asp.netvisual-studio-2010signalrreal-time-updates
16
Vikas Rana

SignalRはWebフォームで使用できます。チュートリアルの例については、以下を参照してください ここ

  1. .NET Framework4.5以降を対象とする新しいASP.NETWebFormsプロジェクトを作成します

  2. 以下を含むようにホームページを変更します

    <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>

  3. Default.aspx.cs codebehindファイルを編集して、次のイベントを含めます

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

}

  4. NuGetを介してSignalRパッケージを追加します。 （「MicrosoftASP.NetSignalRJS」および「MicrosoftASP.NetSignalRJS」を検索してみます）

  5. ハブクラスを作成する

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

}

  6. ページの下部に次のスクリプトブロックを設定します（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>

  7. Global.asax.csのApplication_Startイベントハンドラーに以下を追加します

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

@Stephenによって提供された回答は、SignalRの最新バージョン（v2.2.0）には適用されないため、現在では古くなっています。また、IMHOが将来の読者に役立つ可能性のある言及されていないものが他にもいくつかありますすばやく古き良きWebフォームフレームワークを使用してSignalRを使い始める。解決策は退屈に見えるかもしれませんが、そうではありません。このページにアクセスして、SignalR forWebformsのヘルプを探している人々に役立つことを願っています。

前提条件：（私が使用するバージョンは括弧内にあります）。私は[〜＃〜] not [〜＃〜]他のバージョンでこのソリューションをテストしました

  1. MS Visual Studio2015/2013。 （2015）Win-7x64の場合
  2. .Net FrameWorkバージョン4.5以降（4.5.2）
  3. NuGetのSignalRバージョン2.2.0（リリース日2015年1月13日）
  4. jQuery ver 1.6.4
  5. Owin v1.0.0およびJson、owin.Securityなどの他のいくつか（packages.configを参照）
  6. IISv7.0以降。 VS2015に同梱されているIIS Expressバージョン10.0で動作します。

ステップ：

以下の手順に従って、SignalRをWebFormsプロジェクトで機能させます。このプロジェクトの目的は、SignalRを使用して、接続されているすべてのクライアント（ブラウザーセッション）に定期的にタイムスタンプをブロードキャストすることです。最初のタイムスタンプのみが、コードビハインドファイルのサーバー側コードによって生成されます。残りは、定期的な間隔でタイムスタンプを生成し、接続されているすべてのセッションにブラッドキャストするSignalRHubClassから取得されます。

  1. Visual Studio（2015）で空のWebFormsプロジェクトを作成します（空のテンプレートを選択し、[コアライブラリとフォルダーの追加]でWebFormsを確認します）。「SignalR_WebForms」という名前を付けます。

  2. SignalR + jQuery + Owinライブラリへの参照をダウンロード、インストール、追加するには

    2a。ツール-> NuGetパッケージマネージャー->ソリューションのNugetパッケージを管理します。

    2b。検索に「Microsoft.ASPNet.SignalR」と入力し、「Microsoft.ASPNet.SignalR」（サーバーコンポーネント）を選択します。

    2c。右側のパネルで、[SignalR_WebForms]の横のチェックボックスをオンにします。これにより、「インストール」ボタンが有効になります。最新バージョン（今日の2.2.0）を選択し、[インストール]ボタンをクリックします。これにより、インストールされるすべてのパッケージ（合計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>

`

  1. Webフォームを追加し、default.aspxという名前を付けます（[プロジェクトの追加]を右クリック-> [Webフォーム]-> default.aspxと入力-> [OK]をクリックします。

  2. このコードをコピーして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>

`

  1. 以下のコードをコピーして分離コードファイル（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();
        }
    }
}

`

  1. App_Codeフォルダーをプロジェクトに追加します。 （[プロジェクト]-> [追加]-> [ASP.Netフォルダーの追加]-> [App_Codeの選択]を右クリックします）。

  2. SignalRハブクラスを追加し、LogHub.csという名前を付けます。これを行うには、[App_Codeフォルダー]-> [追加]-> [クラスの選択]を右クリックします。（リストの下部にあります）-> [Vsual C＃]、[Web]、[SignalR]の順にクリックします。 -> SignalRHubClassを選択します->ファイル名としてLogHub.csと入力します。 [OK]をクリックします。

  3. 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));
        }
    }
}

`

  1. Owin Startup Classファイルを追加し、Startup1.csという名前を付けます。 （App_code-> Add-> Class-> Vsual C＃、Web、General-> Pick Owin Startupクラスを右クリックします。）既存のコードを削除し、以下のコードをこのクラスファイルにコピーして貼り付けます。保存します。

    `

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

`

  1. プロジェクトをビルドして実行します（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.

`

  1. リモートPCから同じサイトにアクセスすると、まったく同じタイムスタンプを取得する必要があります。これにより、サイトが期待どおりに機能することが確認されます。

  2. さらに確認するには、ブラウザを右クリックして[ソースの表示]をクリックします。 I.Eでは、これにより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 !!

20
objectNotFound