SignalR 2入門

20480 ワード
このチュートリアルで使用するソフトウェアのバージョン
  • Visual Studio 2015
  • .NET 4.5
  • SignalRバージョン2
    • 概要
    このチュートリアルでは、簡単なブラウザベースのチャットアプリケーションを生成する方法を示すSignalR開発について説明します.SignalRライブラリを空のASPに追加する.NET Webアプリケーションは、クライアントにメッセージを送信し、ユーザーがチャットメッセージを送信および受信できるようにするHTMLページを作成する中心クラスを作成します.MVC 5で作成されたチャットアプリケーションでMVCビューを使用する方法を説明するチュートリアルについては、SignalR 2とMVC 5の入門を参照してください.
    SignalRは、Webアプリケーションを構築するために、リアルタイムのユーザ対話またはリアルタイムのデータ更新を必要とするオープンソースである.NETライブラリ.例には、ソーシャルアプリケーション、マルチユーザゲーム、ビジネスコラボレーション、ニュース、天気、または財務更新アプリケーションが含まれます.これらのテストは、通常、リアルタイムアプリケーションと呼ばれます.SignalRは、リアルタイムアプリケーションを構築するプロセスを簡略化します.ASPが含まれていますNETサーバライブラリとJavaScriptクライアントライブラリは、クライアント-サーバ接続を容易に管理し、コンテンツの更新をクライアントにプッシュします.既存のASPにSignalRライブラリを追加できます.NETアプリケーションは、リアルタイム機能を取得します.このチュートリアルでは、次のSignalR開発タスクについて説明します.
  • SignalRライブラリがASPに追加する.NET Webアプリケーション.
  • は、コンテンツをクライアントにプッシュするための中心クラスを作成する.
  • コンフィギュレーションアプリケーションのOWIN起動クラスを作成します.
  • SignalR jQueryライブラリを使用して、Webページにメッセージを送信し、センターからの更新を表示します.次のスクリーンショットは、ブラウザで実行されているチャットアプリケーションを示します.各新しいユーザーはコメントを発表し、チャットに参加した後にコメントを追加したことを確認できます.チャットインスタンス
    • プロジェクトの設定
    このセクションでは、Visual Studio 2013とSignalRバージョン2を使用して空のASPを作成する方法を示します.NET webアプリケーションは、SignalRでチャットアプリケーションを作成します.前提条件:
  • Visual Studio 2013+以下の手順Visual Studio 2015を使用してASPを作成する.NET空のWebアプリケーションとSignalRライブラリの追加:
  • Visual StudioでASPを作成する.NET Webアプリケーション.
  • にてASPを新規作成する.NETプロジェクトウィンドウでは、空のままにして「プロジェクトの作成」をクリックします.
  • 在中ソリューションエクスプローラで、プロジェクトを右クリックし、|SignalR Hubクラス(v 2)の追加を選択します.クラス名ChatHub.csをプロジェクトに追加します.この手順では、ChatHubクラスを作成し、スクリプトファイルのセットとSignalRをサポートするプログラムセット参照をプロジェクトに追加します.

    • プロジェクトツール>NuGetパッケージマネージャ>パッケージマネージャコンソールにSignalRを開き、コマンドを実行することもできます.
    install-package Microsoft.AspNet.SignalR

    コンソールを使用してSignalRを追加する場合、SignalR hubクラスは、個別のステップとして作成され、SignalRが追加されます.
    Visual Studio 2012を使用する場合、SignalR Hubクラス(v 2)テンプレートは使用できません.純粋なクラス呼び出しChatHubの反対を追加できます.のソリューションエクスプローラで、スクリプトノードを展開します.jQueryとSignalRに適用されるスクリプトライブラリがこのアイテムに表示されます.新しいコードをChatHubに置き換えるには、次のコードのクラスを使用します.
    using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}
}
  • ソリューションエクスプローラで、スクリプトノードを展開します.jQueryとSignalRに適用されるスクリプトライブラリがこのアイテムに表示されます.
  • は新しいコードでChatHub用の次のコードのクラスに置き換えられる.
    using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}

  • 在中ソリューションエクスプローラで、プロジェクトを右クリックし、「追加|OWIN起動クラス」をクリックします.新しいクラスはStartupと名付けられ、「OK」をクリックします.備考
  • Visual Studio 2012を使用する場合、OWIN起動クラステンプレートは使用できません.純粋なクラス呼び出しStartupの反対側を追加できます.新しい起動クラスの内容を以下に変更します.
    using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}

  • 在中ソリューションエクスプローラで、プロジェクトを右クリックし、「追加|HTMLページ」をクリックします.新しいページに名前を付けます.html.

    • メモ:JQueryおよびSignalRライブラリへの参照のバージョン番号を変更する必要がある場合があります
  • 在中ソリューションエクスプローラで作成したHTMLページを右クリックし、「開始ページとして設定」をクリックします.HTMLページのデフォルトコードを次のコードに置き換えます.

    • メモ:SignalRスクリプトのバージョンをパッケージマネージャでインストールすることができます.次のスクリプト参照バージョンに対応するスクリプトファイルがプロジェクトにあることを確認します(これとは異なり、hubを追加するSignalRではなくNuGetを使用する場合が追加されます).
    DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chattitle>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
style>
head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion">
ul>
div>


<script src="Scripts/jquery-3.1.1.min.js" >script>

<script src="Scripts/jquery.signalR-2.2.1.min.js">script>

<script src="signalr/hubs">script>

<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('
    ').text(name).html();
var encodedMsg = $('
    ').text(message).html();
// Add the message to the page.
$('#discussion').append('
    • ' + encodedName
+ ':  ' + encodedMsg + '');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
script>
body>
html>

    保存所有项目。

    运行示例

    按 F5 以在调试模式下运行该项目。 中的浏览器实例并提示输入用户名称的 HTML 页面加载。

    1. 输入用户名;输入用户名称。
    2. 从地址行中的浏览器复制 URL 并将其用于打开两个更多的浏览器实例。 在每个浏览器实例中，输入唯一的用户名称。
      在每个浏览器实例中，添加注释并单击发送。 注释应显示在浏览器的所有实例。

    下面的屏幕截图显示了在三个浏览器情况下，所有这些更新一个实例发送消息时运行的聊天应用程序：

    1. 在中解决方案资源管理器，检查脚本文档节点运行的应用程序。 没有名为的脚本文件中心在运行时动态生成 SignalR 库。 此文件管理的 jQuery 脚本和服务器端代码之间的通信。

    检查代码检查代码

    SignalR 聊天应用程序演示了两个基本的 SignalR 开发任务： 在服务器上的主要协调对象为创建中心和使用 SignalR jQuery 库来发送和接收消息。
    SignalR 集线器
    中的代码示例ChatHub类派生自Microsoft.AspNet.SignalR.Hub类。 派生自中心类是一种有用的方式来构建 SignalR 应用程序。 可以在中心类上创建的公共方法，然后通过调用从网页中的脚本中访问这些方法。
    在聊天代码中，客户端调用ChatHub.Send方法发送一封新邮件。 在中心反过来将消息发送给所有客户端，通过调用Clients.All.broadcastMessage。
    发送方法演示了多个中心概念：
    集线器上声明的公共方法，以便客户端可以调用它们。
    使用Microsoft.AspNet.SignalR.Hub.Clients动态属性来访问所有客户端连接到此中心。
    在客户端上调用的函数 (如broadcastMessage函数) 来更新客户端。

    public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}

    SignalRとjQuery
    HTMLページのコード例では、SignalR jQueryライブラリを使用してSignalRセンターと通信する方法を示します.コード内の基本タスク宣言のプロキシサーバはセンタを参照でき、宣言サーバはコンテンツをクライアントにプッシュし、呼び出された関数と起動された接続はメッセージをセンタに送信することができる.次のコードは、ハブエージェントへの参照を宣言します.
    var chat = $.connection.chatHub;

    次のコードは、スクリプトにコールバック関数を作成する方法です.サーバ上の中心クラスでは、この関数が呼び出され、各クライアントにコンテンツの更新がプッシュされます.HTML表示前にコンテンツをエンコードする2行はオプションで、スクリプト注入を阻止するための簡単な方法を表示します.
    chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('
    ').text(name).html();
var encodedMsg = $('
    ').text(message).html();
// Add the message to the page.
$('#discussion').append('
  • ' + encodedName + ':  ' + encodedMsg + '
    • '); };

    下面的代码演示如何在中心打开的连接。 代码启动连接，然后将其传递函数来处理单击事件上发送HTML 页中的按钮。

    $.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});

    GitHub:https://github.com/net-yuan-Moo/SignalR
    テキストリンク:https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr
    http://net-yuan.com
    転載先:https://www.cnblogs.com/net-yuan/p/SignalR-Start.html
    GraphQLの小さなdemoを書きます
    【剣指offer】ロボットの動き範囲――Python実現