root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\nこのファイルは私たちのためにいくつかのことをします。メインアプリケーションモジュールAngularServicedAshboardをセットアップし、2つの外部參照（Ng.Epoch（Epoch.js Angular Directive）とN3-Pie-Chart（Angular Good Chart Library用に作成された構(gòu)造）を注入します。 <\/p>\n
気づいた場(chǎng)合は、もちろん他の場(chǎng)所でホストされているバックエンデルバルルに値を注入し、ここで使用する予定です。 <\/p>\n
サーバーのURLにバインドするサービスファクトリクラスを作成しましょう。これは、htmlで參照されるservices.jsファイルになります。これはアプリフォルダーに送られます。\n<\/p>\n
\n\n\n \n \n \n AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n\n<\/body>\n<\/html><\/pre>このコードは、人気のあるオンとオフ（ここでは必要ありません）サブスクリプションモードを使用し、Angular Factoryを使用してアプリケーションのSignalRとのすべての通信をカプセル化します。 <p>\n<\/p>このコードは一見すると少し圧倒されるかもしれませんが、コントローラーを構(gòu)築するときにそれをよりよく理解することができます。それが行うのは、バックエンドSignalRサーバーのURLおよびSignalRセンター名を取得することだけです。 （SignalRでは、同じサーバー內(nèi)の複數(shù)のハブを使用してデータをプッシュできます。）<p>\nさらに、このコードにより、SignalRサーバー（他の場(chǎng)所にあるボックスにある）がONメソッドを介してアプリケーションを呼び出すことができます。アプリケーションは、Invokeメソッドを介してSignalRサーバー內(nèi)の関數(shù)を呼び出すことができます。 <\/p>\n<p>次に、サービスからデータを範(fàn)囲にバインドするコントローラーが必要です。アプリフォルダーにcontrollers.jsという名前のファイルを作成しましょう。 <\/p>\n<p>\n<\/p>このコントローラーはここで何かをします。 Angular Serviceオブジェクトを作成し、サーバーがコントローラーに何かを呼び出すようにコールバック関數(shù)にバインドします。 <pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>\n<p>サーバーが私たちを呼び戻すたびに、サーバーによって返されるJSONアレイを反復(fù)することがわかります。次に、パフォーマンスタイプごとにスイッチステートメントがあります。次に、RAMを設(shè)定してから、戻って殘りを埋めます。 <\/p>\n<p>私たちの指示に関しては、実際に私たちには1つのエポックチャートが必要です。 index.htmlスタブファイルで參照したNg-Epoch.jsというオープンソースディレクティブを使用します。 <\/p>\n<p>これらすべてのチャートをさまざまな手順に分割し、いくつかのテンプレートを使用してUIルーターを使用できますが、このチュートリアルを簡(jiǎn)単にするために、すべてのビューをindex.htmlファイルに配置します。 <\/p>\n<p>index.htmlファイルにビューを追加しましょう。ボディタグの下に次のコンテンツを追加することでこれを行うことができます。\n<\/p>\n<p>これにより、サーバーがRAMデータを押し戻すことができる場(chǎng)所が作成されます。データは最初にサービスを入力し、次にコントローラーを入力し、最後にビューを入力します。 <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\napp.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', \n function ($rootScope, backendServerUrl) {\n\n function backendFactory(serverUrl, hubName) {\n var connection = $.hubConnection(backendServerUrl);\n var proxy = connection.createHubProxy(hubName);\n\n connection.start().done(function () { });\n\n return {\n on: function (eventName, callback) {\n proxy.on(eventName, function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n },\n invoke: function (methodName, callback) {\n proxy.invoke(methodName)\n .done(function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n }\n };\n };\n\n return backendFactory;\n}]);<\/pre>次のように見えるはずです：<p><p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002671842831.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/>次に、いくつかのチャートを追加しましょう。これはまさに私たちが本當(dāng)にやりたいことです。 Epoch.jsタイムラインにタイムスタンプという名前の変數(shù)を追加します。また、Chartentryというアレイを追加します。これをEpoch.ngディレクティブにバインドします。 <\/p>\n<pre><code>root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p>次に、Switchステートメントにデータをマップし、殘りの必要なEpoch.jsデータ項(xiàng)目を追加しましょう。もちろん、それをさらに分割することができます（たとえば、より多くの機(jī)能やフィルターを使用して）が、このチュートリアルを簡(jiǎn)単にするために、シンプルに保ちます。 <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">\n\n<\/body>\n<\/html><\/pre>\n<p>私たちのコントローラーはより完全に見えます。範(fàn)囲にRealtimeareafeeedを追加しました。これは、NG-Epochの指令を通じてビューにバインドし、範(fàn)囲にエリアアックスを追加して、エリアグラフのレイアウトを決定しました。 <\/p>\n<p>次に、index.htmlにディレクティブを追加し、著信CPU値データを表示しましょう。\n<\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>チャートクラスとは、D3.jsの配色を指し、チャートハイトはあなたが推測(cè)したものであり、チャートストリームはSignalRサーバーから返されたデータです。 <p>\n<\/p>それを使用して、チャートがリアルタイムで表示されるのを見る必要があります：<p>\n<\/p><p>ここで、多數(shù)のデータポイントをこのチャートに接続し、N3-PIEフレームワークから別のチャートを追加しましょう（パイチャートが気に入らないため！）。 <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002671985790.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/>\nN3-PIEフレームワークからパイチャートを追加するには、コントローラーに次のことを追加するだけです。\n<\/p>\n<p>もちろん、この値はSignalRサーバーによって更新されます。これは、コントローラーの完全なコードで確認(rèn)できます。 <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\napp.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', \n function ($rootScope, backendServerUrl) {\n\n function backendFactory(serverUrl, hubName) {\n var connection = $.hubConnection(backendServerUrl);\n var proxy = connection.createHubProxy(hubName);\n\n connection.start().done(function () { });\n\n return {\n on: function (eventName, callback) {\n proxy.on(eventName, function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n },\n invoke: function (methodName, callback) {\n proxy.invoke(methodName)\n .done(function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n }\n };\n };\n\n return backendFactory;\n}]);<\/pre>また、私たちの見解の完全なコードについて考える時(shí)間をとるべきです。 <p>\n<\/p>畫面に次のデータが表示されるはずです。\n<p><\/p>AngularがSignalRに非常に簡(jiǎn)単に接続できることがわかりました。AngularJSサービスまたは工場(chǎng)にエンドポイントを挿入するだけです。 Angularjs Factoryは、SignalRと通信するカプセル化メカニズムです。 「結(jié)合」後、AngularJと.NETが完全に一緒に機(jī)能することを誰が知っていますか？ <p>\nサーバーのコアアスペクト<\/p><p>\n<img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672079098.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/>バックエンドでのこの通信を許可する.NETコードを?qū)毪筏蓼埂?（こちらからソースコードを見つけることができます。）<\/p>\n<h2>最初に、サーバーコードの構(gòu)築を開始するには、Visual StudioソリューションでSignalRを?qū)g行する必要があります。これを行うには、ASP.NETの優(yōu)れたチュートリアルに従って、基本的なSignalRソリューションを?qū)g行してください。 （これが最も簡(jiǎn)単です。）<\/h2>\n<p>実行後、C＃HUBクラスを次のように変更します。\n<\/p>\n<p>ハブクラスを変更した後、Visual Studioはエラーを報(bào)告します。パフォーマンスモデルを追加する必要があります（json.netのため、サーバーがプッシュされたときに自動(dòng)的にjsonに変換されます）：<\/p><pre><code>root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p>JSonProperty Metadataは、このモデルのJSONに変換するときに、Json.netにプロパティ名を小文字に自動(dòng)的に変換するように指示するだけです。 JavaScriptは小文字が好きです。 <\/p>\n<p>signrrを介して実際のパフォーマンスデータをリスニングクライアントにプッシュするperformanceEngineクラスを追加しましょう。エンジンは、非同期背景スレッドを介してSignalRを介してリスニングクライアントにこれらのメッセージを送信します。 <\/p>\n<p>その長(zhǎng)さのため、GitHubリポジトリにコードを見つけることができます。 <\/p>\n<p>このコードは、基本的に、イテレーション中にそれぞれのサブスクライブされたクライアントに一連のパフォーマンスメトリックをプッシュします。これらのパフォーマンスメトリックは、コンストラクターに注入されます。サーバーからのプッシュ速度は、コンストラクターパラメーターPollintervalMillisに設(shè)定されています。 <\/p>\n<p>これは、signerをホストするために自己ホスティングとしてOWINを使用する場(chǎng)合にうまく機(jī)能することに注意してください。また、Webワーカースレッドを使用する場(chǎng)合はうまく機(jī)能するはずです。 <\/p>\n<p>最後に行うことは、もちろん、サービスのonstart（）またはスタートアップクラスのどこかでバックグラウンドスレッドを開始することです。 <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">\n\n<\/body>\n<\/html><\/pre>\n<p>バックグラウンドスレッドを開始するコードの2行（推測(cè)したように）は、PerformanceEngineをインスタンス化し、Onperformancemonitor（）を呼び出します。 <\/p>\n<p>今、私はあなたが私がサーバーからデータをランダム化していると思うかもしれないことを知っています。それが事実です。ただし、実際のメトリックをプッシュするには、System.DiagnosticsライブラリとWindowsが提供するPerformanceCounterを使用してください。私はそれをシンプルにしようとしていますが、これはコードがどのように見えるかです：<\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>\n<h2>結(jié)論<\/h2>\n<p>Angularを介してSignalRデータを使用する方法を?qū)Wび、そのデータをAngular側(cè)のリアルタイムチャートフレームワークに接続しました。 <\/p>\n<p>クライアントの最終バージョンのデモがここに表示され、そこからコードを取得できます。 <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672199955.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \">サーバーの最終バージョンのデモがここに表示され、ここからコードを取得できます。 <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672259072.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \">このウォークスルーを楽しんでいただければ幸いです。似たようなことを試したことがあるなら、コメントでお知らせください！ <\/p>\nAngularJSを使用してリアルタイムSignalR監(jiān)視パネルを構(gòu)築するための<h2>FAQ（FAQ）<\/h2>\n<h3> angularjsにSignalRを設(shè)定する方法は？ <\/h3>\nAngularJSのSignalRのセットアップには、いくつかのステップが含まれます。まず、NUGETまたはNPMを使用してSignalRライブラリをインストールする必要があります。インストール後、サーバーに新しいSignalRセンターを作成できます。このセンターは、メッセージの送信と受信を擔(dān)當(dāng)します。クライアントでは、SignalR JavaScriptライブラリを參照し、センターへの接続を作成する必要があります。その後、接続を開始し、著信メッセージを処理する関數(shù)を定義できます。 <p>\n<\/p> SignalRの接続エラーを処理する方法は？ <h3>\n<\/h3>SignalRは、接続エラーを処理するための組み込みメカニズムを提供します。中央接続で.error（）関數(shù)を使用して、エラーが発生したときに呼び出されるコールバック関數(shù)を定義できます。このコールバック関數(shù)は、ユーザーにエラーメッセージを表示するか、センターに再接続しようとすることができます。 <p><\/p>\n<h3>他のJavaScriptフレームワークでSignalRを使用できますか？ <\/h3>\n<p>はい、SignalRは、AjaxとWebSocketsをサポートするJavaScriptフレームワークで使用できます。これには、React、Vue.js、Angularなどの一般的なフレームワークが含まれます。 ProjectにSignalR JavaScriptライブラリを含めて、他のJavaScriptアプリケーションと同じように中心的な接続を作成する必要があります。 <\/p>\n<signr>\nサーバーからクライアントにメッセージを送信するには、センターのクライアントプロパティを使用できます。このプロパティは、すべての接続されたクライアント、特定のクライアント、またはクライアントグループにメッセージを送信する方法を提供します。サーバーコードの任意の部分からこれらのメソッドを呼び出して、クライアントにリアルタイムの更新を送信できます。 <p>\n<\/p>私の信號(hào)アプリケーションを保護(hù)する方法は？ <h3>\n<\/h3>Signalrは、アプリケーションを保護(hù)するためのいくつかのオプションを提供します。 [Authorize]プロパティを使用して、センターおよびセンターの方法へのアクセスを制限できます。 Global.asaxファイルでMaphubs（）メソッドを使用して、ハブのカスタムオーサイザーを指定することもできます。さらに、SSLを使用してSignalRトラフィックを暗號(hào)化し、盜聴を防ぐことができます。 <p>\n<\/p> SignalRの切斷に対処する方法は？ <h3>\n<\/h3>SignalRは、切斷を自動(dòng)的に処理し、再接続を試みます。ただし、中央接続の.disconnected（）関數(shù)を使用して、手動(dòng)で切斷を処理することもできます。この関數(shù)を使用すると、接続が失われたときに呼び出されるコールバック関數(shù)を定義できます。 <p>\n<\/p> non.netサーバーでSignalRを使用できますか？ <h3>\n<\/h3>SignalRは、.NETサーバーで使用するように設(shè)計(jì)された.NETライブラリです。ただし、互換性のあるWebSocketライブラリを使用して、SignalRを非.NETサーバーで使用できます。サーバーにSignalRプロトコルを?qū)g裝し、接続とメッセージングロジックを自分で処理する必要があります。 <p>\n<\/p>私のsignalRアプリケーションをテストする方法は？ <h3>\n<\/h3>PostmanやFiddlerなどのツールを使用してSignalRアプリケーションをテストし、HTTPリクエストをセンターに送信して応答を確認(rèn)できます。また、中央の方法やクライアント機(jī)能のユニットテストを作成することもできます。 <p>\n<\/p>モバイルアプリでSignalRを使用できますか？ <h3>\n<\/h3>はい、モバイルアプリでSignalRを使用できます。 SignalR JavaScriptライブラリは、CordovaまたはIonicで構(gòu)築されたハイブリッドモバイルアプリケーションで使用できます。ネイティブモバイルアプリの場(chǎng)合、iOSとAndroidの両方がSIGNRクライアントを提供します。 <p>\n<\/p>私のsignalアプリケーションを拡張する方法は？ <h3>\n<\/h3>Signalrは、アプリケーションを拡張するためのいくつかのオプションを提供します。 Azure SignalR Serviceを使用できます。これは、すべてのSignalR接続を処理する完全に管理されたサービスです。また、複數(shù)のサーバー間でメッセージを配布するためのソフトウェアレイヤーであるバックエンドを使用することもできます。 <p><\/p><\/signr>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://www.miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://www.miracleart.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://www.miracleart.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://www.miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://www.miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://www.miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://www.miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://www.miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://www.miracleart.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ja')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="検索" onclick="searchs('ja')"><img src="/static/imghw/find.png" alt="検索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">目次</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#キーポイント" title="キーポイント" >キーポイント</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#設(shè)定" title="設(shè)定" >設(shè)定</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#最初に-Angular-JavaScriptコードを保持するBasic-Index-htmlファイルを作成しましょう" title="最初に、Angular JavaScriptコードを保持するBasic Index.htmlファイルを作成しましょう。 " >最初に、Angular JavaScriptコードを保持するBasic Index.htmlファイルを作成しましょう。 </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#最初に-サーバーコードの構(gòu)築を開始するには-Visual-StudioソリューションでSignalRを?qū)g行する必要があります-これを行うには-ASP-NETの優(yōu)れたチュートリアルに従って-基本的なSignalRソリューションを?qū)g行してください-これが最も簡(jiǎn)単です" title="最初に、サーバーコードの構(gòu)築を開始するには、Visual StudioソリューションでSignalRを?qū)g行する必要があります。これを行うには、ASP.NETの優(yōu)れたチュートリアルに従って、基本的なSignalRソリューションを?qū)g行してください。 （これが最も簡(jiǎn)単です。）" >最初に、サーバーコードの構(gòu)築を開始するには、Visual StudioソリューションでSignalRを?qū)g行する必要があります。これを行うには、ASP.NETの優(yōu)れたチュートリアルに従って、基本的なSignalRソリューションを?qū)g行してください。 （これが最も簡(jiǎn)単です。）</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#結(jié)論" title="結(jié)論" >結(jié)論</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#FAQ-FAQ" title="FAQ（FAQ）" >FAQ（FAQ）</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#angularjsにSignalRを設(shè)定する方法は" title=" angularjsにSignalRを設(shè)定する方法は？ " > angularjsにSignalRを設(shè)定する方法は？ </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#他のJavaScriptフレームワークでSignalRを使用できますか" title="他のJavaScriptフレームワークでSignalRを使用できますか？ " >他のJavaScriptフレームワークでSignalRを使用できますか？ </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/js-tutorial.html"
class="phpgenera_Details_mainL1a">jsチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>AngularJSを使用してリアルタイムSignalRダッシュボードを構(gòu)築します</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">AngularJSを使用してリアルタイムSignalRダッシュボードを構(gòu)築します</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/1468497.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea80bad5190693.png" src="/static/imghw/default1.png" alt="William Shakespeare">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/1468497.html" class="author_name">William Shakespeare</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 20, 2025 pm 12:45 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>リアルタイムのサービス監(jiān)視パネルを構(gòu)築します！ </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671380592.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS ">サービス監(jiān)視パネルには、リアルタイムで実際のデータが表示されます。これは、ほぼリアルタイムで非同期の非ブロッキング方法でサーバーとマイクロサービスで何が起こっているかを示します。 </p>
<p>ここをクリックして、完全なクライアントの例を表示します。 </p>
<p> d3.jsを使用してデータを視覚化し、JavaScriptでデータを説明してください！ <img src="/static/imghw/default1.png" data-src="https://img.php.cn/editor.sitepoint.com/wp-content/themes/sitepoint/assets/svg/play-icon.svg" class="lazy" alt="">このコースを見るこのコースは、ここでサーバーのデモンストレーションを紹介します。 </p>
<p>AngularJSフレームワークと多くのクールなリアルタイムチャートと多くのリアルタイムデータを使用して、この監(jiān)視パネルの簡(jiǎn)略化されたバージョンを構(gòu)築します。また、.NET 4.5のSignalRおよびWeb APIライブラリを使用してサービスを構(gòu)築します。 </p>
<h2 id="キーポイント">キーポイント</h2>
<ul>
<li>AngularJSとSignalRを使用して、サーバーとマイクロサービスアクティビティを非同期および非ブロッキングを表示するリアルタイム監(jiān)視パネルを作成します。 </li>
<li>AngularJS、JQuery、Bootstrap、SignalR、D3.JSやEpochなどのさまざまなチャートライブラリを含む依存関係を備えたプレーンテキストファイルまたはVisual Studioでプロジェクトを設(shè)定します。 </li>
<li>リアルタイムのデータ送信を管理するためのサーバー側(cè)にSignalrセンターを?qū)g裝し、非同期要求を処理する.NETの機(jī)能を活用し、クライアントに通知をプッシュする能力。 </li>
<li>AngularJSサービスとコントローラーを開発して、SignalRセンターから受信したデータを処理し、サーバーパフォーマンスメトリックの変更を反映するためにUIをリアルタイムで更新します。 </li>
NG-EPOCHやN3-PIEなどの図を統(tǒng)合して、データを視覚的に表現(xiàn)し、監(jiān)視パネルのインタラクティブ性とユーザーエンゲージメントを強(qiáng)化します。 <li>
</li>
</ul>技術(shù)アーキテクチャ<h2>
</h2>クライアント<h3>
</h3>Angularjsは、適切なアプリケーション開発慣行を箱から出して実施します。すべてが注入されます。つまり、依存関係はカップリングが低いことを意味します。さらに、Angularには、ビュー、モデル、コントローラーの間に良好な分離があります。 <p>
</p>Angularはここに.NETを追加し、サーバー側(cè)のコードをコンパクトで管理しやすく、テスト可能に保つことができます。サーバー側(cè)のコードは、その利點(diǎn)を活用するためにのみ使用されます - 重い処理を?qū)g行します。 <p>
</p>サーバー側(cè)<h3>
.NET 4.5のWeb APIでSignalRを使用することは、socket.ioを使用してnode.jsを使用することに非常に似ており、サーバーからサブスクリプションクライアントへの同じタイプの非ブロッキング、非同期プッシュを許可します。 Signalrは下部にWebSocketsを使用しますが、通信を抽象化するため、Angular內(nèi)で実行すると、クライアントブラウザーがサポートするテクノロジーに戻ります。 （たとえば、古いブラウザーの場(chǎng)合、それは長(zhǎng)い投票に戻る可能性があります。）</h3>
さらに、ダイナミックタグとjson.netの魔法により、.NETフレームワークはJavaScriptを一流の市民と見なしています。実際、JavaScriptを使用してWeb APIとSignalRテクノロジーを使用することは、JavaScriptを念頭に置いて構(gòu)築されているため、ネイティブの.NETクライアントよりも簡(jiǎn)単です。 <p>
</p>コアコンテンツ<p>
</p>設(shè)定を開始<h2>
このチュートリアルで使用されているすべてのAngularJSコードは、こちらをご覧ください。 </h2>
<p>プロジェクトを作成するツールに応じて、お?dú)荬巳毪辘违匹攻去ē钎％咯`とプレーンフォルダー、およびVisual Studioを使用して作成する方法について説明します。 </p>
プレーンテキストファイルを使用して<h3 id="設(shè)定">設(shè)定</h3>
<p>フォルダーとファイル構(gòu)造は次のとおりです
</p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>主な依存関係<h3>
</h3>次のファイルをダウンロードする必要があります
<p>
</p> jQuery（リンクを選択します「圧縮生産をダウンロードjQuery 2.1.1」）<ul>
<li>AngularJS（大きな「ダウンロード」オプションをクリックして、Angular 1.3の最新バージョンをクリックします）</li>
<li>bootstrap（「bootstrapをダウンロード」オプションをクリックしてください）</li>
<li>signalr（右側(cè)の「zipをダウンロード」ボタンをクリックしてください）</li>
<li> d3.js（ページの中央にある「d3.zip」リンクをクリックしてください）</li>
<li>エポック（「v0.6.0 linkをダウンロード」をクリックしてください）</li>
<li>ng-epoch（右側(cè)の「zipをダウンロード」ボタンをクリックしてください）</li>
<li>n3-pie（右側(cè)の「zipをダウンロード」ボタンをクリックしてください）</li>
<li>
</li>スクリプトフォルダーでは、</ul>が必要です
<p>
</p>jQuery-2.1.1.min.js <ul>
<li>angular.min.js </li>
<li>bootstrap.min.js</li>
<li>jquery.signalr.min.js </li>
<li> d3.min.js</li>
<li>epoch.min.js </li>
<li>pie-chart.min.js</li>
<li>
コンテンツフォルダー：</li>
</ul>
<p>bootstrap.min.css</p>
<ul> epoch.min.css<li>
</li>
Visual Studioを使用した<li>設(shè)定</li>
</ul>テキストファイルが単純すぎると思われる場(chǎng)合は、Visual Studioを介してセットアップするのは非常に簡(jiǎn)単です。 <h3>
</h3>ファイルに移動(dòng)して、新しいWebアプリケーションを設(shè)定してください。 <p>
</p>
<p>その後、プロジェクトを右クリックして、Nugetパッケージの管理に移動(dòng)し、jQuery、Angularjs、Bootstrap、D3、Signalr JavaScriptクライアントを検索してダウンロードします。 </p>
<p>これらをダウンロードしてインストールした後、スクリプトとコンテンツフォルダーに表示されるはずです。また、インストールされているNugetパッケージの下で、次のことがわかります。
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671581952.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "></p>最後に、Nugetにはエポック、Ng-Epoch、およびN3チャートライブラリが含まれていないため、手動(dòng)で追加する必要があります。前のセクションで詳述されている手順に従って、これらのライブラリを取得してください。 <p>
</p>アプリケーションを書きましょう<p>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671658886.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS ">今、いくつかのコードを書く準(zhǔn)備ができました。 </p>
<h2 id="最初に-Angular-JavaScriptコードを保持するBasic-Index-htmlファイルを作成しましょう">最初に、Angular JavaScriptコードを保持するBasic Index.htmlファイルを作成しましょう。 </h2>
<p>
</p>注意すべきことがいくつかあります。まず、すべての依存関係を追加して、それらがロードされるようにしました。次に、まだ存在しない新しいファイル（アプリフォルダー內(nèi)のすべてのファイル）を參照します。これらのファイルを次に書きます。 <p>
</p>アプリフォルダーに移動(dòng)して、app.jsファイルを作成しましょう。これは非常に単純なファイルです。 <pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre><pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p>このファイルは私たちのためにいくつかのことをします。メインアプリケーションモジュールAngularServicedAshboardをセットアップし、2つの外部參照（Ng.Epoch（Epoch.js Angular Directive）とN3-Pie-Chart（Angular Good Chart Library用に作成された構(gòu)造）を注入します。 </p>
<p>気づいた場(chǎng)合は、もちろん他の場(chǎng)所でホストされているバックエンデルバルルに値を注入し、ここで使用する予定です。 </p>
<p>サーバーのURLにバインドするサービスファクトリクラスを作成しましょう。これは、htmlで參照されるservices.jsファイルになります。これはアプリフォルダーに送られます。
</p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>このコードは、人気のあるオンとオフ（ここでは必要ありません）サブスクリプションモードを使用し、Angular Factoryを使用してアプリケーションのSignalRとのすべての通信をカプセル化します。 <p>
</p>このコードは一見すると少し圧倒されるかもしれませんが、コントローラーを構(gòu)築するときにそれをよりよく理解することができます。それが行うのは、バックエンドSignalRサーバーのURLおよびSignalRセンター名を取得することだけです。 （SignalRでは、同じサーバー內(nèi)の複數(shù)のハブを使用してデータをプッシュできます。）<p>
さらに、このコードにより、SignalRサーバー（他の場(chǎng)所にあるボックスにある）がONメソッドを介してアプリケーションを呼び出すことができます。アプリケーションは、Invokeメソッドを介してSignalRサーバー內(nèi)の関數(shù)を呼び出すことができます。 </p>
<p>次に、サービスからデータを範(fàn)囲にバインドするコントローラーが必要です。アプリフォルダーにcontrollers.jsという名前のファイルを作成しましょう。 </p>
<p>
</p>このコントローラーはここで何かをします。 Angular Serviceオブジェクトを作成し、サーバーがコントローラーに何かを呼び出すようにコールバック関數(shù)にバインドします。 <pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>
<p>サーバーが私たちを呼び戻すたびに、サーバーによって返されるJSONアレイを反復(fù)することがわかります。次に、パフォーマンスタイプごとにスイッチステートメントがあります。次に、RAMを設(shè)定してから、戻って殘りを埋めます。 </p>
<p>私たちの指示に関しては、実際に私たちには1つのエポックチャートが必要です。 index.htmlスタブファイルで參照したNg-Epoch.jsというオープンソースディレクティブを使用します。 </p>
<p>これらすべてのチャートをさまざまな手順に分割し、いくつかのテンプレートを使用してUIルーターを使用できますが、このチュートリアルを簡(jiǎn)単にするために、すべてのビューをindex.htmlファイルに配置します。 </p>
<p>index.htmlファイルにビューを追加しましょう。ボディタグの下に次のコンテンツを追加することでこれを行うことができます。
</p>
<p>これにより、サーバーがRAMデータを押し戻すことができる場(chǎng)所が作成されます。データは最初にサービスを入力し、次にコントローラーを入力し、最後にビューを入力します。 </p>
<pre class='brush:php;toolbar:false;'>'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);</pre>次のように見えるはずです：<p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671842831.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " />次に、いくつかのチャートを追加しましょう。これはまさに私たちが本當(dāng)にやりたいことです。 Epoch.jsタイムラインにタイムスタンプという名前の変數(shù)を追加します。また、Chartentryというアレイを追加します。これをEpoch.ngディレクティブにバインドします。 </p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p>次に、Switchステートメントにデータをマップし、殘りの必要なEpoch.jsデータ項(xiàng)目を追加しましょう。もちろん、それをさらに分割することができます（たとえば、より多くの機(jī)能やフィルターを使用して）が、このチュートリアルを簡(jiǎn)単にするために、シンプルに保ちます。 </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p>私たちのコントローラーはより完全に見えます。範(fàn)囲にRealtimeareafeeedを追加しました。これは、NG-Epochの指令を通じてビューにバインドし、範(fàn)囲にエリアアックスを追加して、エリアグラフのレイアウトを決定しました。 </p>
<p>次に、index.htmlにディレクティブを追加し、著信CPU値データを表示しましょう。
</p>
<pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>チャートクラスとは、D3.jsの配色を指し、チャートハイトはあなたが推測(cè)したものであり、チャートストリームはSignalRサーバーから返されたデータです。 <p>
</p>それを使用して、チャートがリアルタイムで表示されるのを見る必要があります：<p>
</p><p>ここで、多數(shù)のデータポイントをこのチャートに接続し、N3-PIEフレームワークから別のチャートを追加しましょう（パイチャートが気に入らないため?。?<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671985790.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " />
N3-PIEフレームワークからパイチャートを追加するには、コントローラーに次のことを追加するだけです。
</p>
<p>もちろん、この値はSignalRサーバーによって更新されます。これは、コントローラーの完全なコードで確認(rèn)できます。 </p>
<pre class='brush:php;toolbar:false;'>'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);</pre>また、私たちの見解の完全なコードについて考える時(shí)間をとるべきです。 <p>
</p>畫面に次のデータが表示されるはずです。
<p></p>AngularがSignalRに非常に簡(jiǎn)単に接続できることがわかりました。AngularJSサービスまたは工場(chǎng)にエンドポイントを挿入するだけです。 Angularjs Factoryは、SignalRと通信するカプセル化メカニズムです。 「結(jié)合」後、AngularJと.NETが完全に一緒に機(jī)能することを誰が知っていますか？ <p>
サーバーのコアアスペクト</p><p>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672079098.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " />バックエンドでのこの通信を許可する.NETコードを?qū)毪筏蓼埂?（こちらからソースコードを見つけることができます。）</p>
<h2 id="最初に-サーバーコードの構(gòu)築を開始するには-Visual-StudioソリューションでSignalRを?qū)g行する必要があります-これを行うには-ASP-NETの優(yōu)れたチュートリアルに従って-基本的なSignalRソリューションを?qū)g行してください-これが最も簡(jiǎn)単です">最初に、サーバーコードの構(gòu)築を開始するには、Visual StudioソリューションでSignalRを?qū)g行する必要があります。これを行うには、ASP.NETの優(yōu)れたチュートリアルに従って、基本的なSignalRソリューションを?qū)g行してください。 （これが最も簡(jiǎn)単です。）</h2>
<p>実行後、C＃HUBクラスを次のように変更します。
</p>
<p>ハブクラスを変更した後、Visual Studioはエラーを報(bào)告します。パフォーマンスモデルを追加する必要があります（json.netのため、サーバーがプッシュされたときに自動(dòng)的にjsonに変換されます）：</p><pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p>JSonProperty Metadataは、このモデルのJSONに変換するときに、Json.netにプロパティ名を小文字に自動(dòng)的に変換するように指示するだけです。 JavaScriptは小文字が好きです。 </p>
<p>signrrを介して実際のパフォーマンスデータをリスニングクライアントにプッシュするperformanceEngineクラスを追加しましょう。エンジンは、非同期背景スレッドを介してSignalRを介してリスニングクライアントにこれらのメッセージを送信します。 </p>
<p>その長(zhǎng)さのため、GitHubリポジトリにコードを見つけることができます。 </p>
<p>このコードは、基本的に、イテレーション中にそれぞれのサブスクライブされたクライアントに一連のパフォーマンスメトリックをプッシュします。これらのパフォーマンスメトリックは、コンストラクターに注入されます。サーバーからのプッシュ速度は、コンストラクターパラメーターPollintervalMillisに設(shè)定されています。 </p>
<p>これは、signerをホストするために自己ホスティングとしてOWINを使用する場(chǎng)合にうまく機(jī)能することに注意してください。また、Webワーカースレッドを使用する場(chǎng)合はうまく機(jī)能するはずです。 </p>
<p>最後に行うことは、もちろん、サービスのonstart（）またはスタートアップクラスのどこかでバックグラウンドスレッドを開始することです。 </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p>バックグラウンドスレッドを開始するコードの2行（推測(cè)したように）は、PerformanceEngineをインスタンス化し、Onperformancemonitor（）を呼び出します。 </p>
<p>今、私はあなたが私がサーバーからデータをランダム化していると思うかもしれないことを知っています。それが事実です。ただし、実際のメトリックをプッシュするには、System.DiagnosticsライブラリとWindowsが提供するPerformanceCounterを使用してください。私はそれをシンプルにしようとしていますが、これはコードがどのように見えるかです：</p>
<pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>
<h2 id="結(jié)論">結(jié)論</h2>
<p>Angularを介してSignalRデータを使用する方法を?qū)Wび、そのデータをAngular側(cè)のリアルタイムチャートフレームワークに接続しました。 </p>
<p>クライアントの最終バージョンのデモがここに表示され、そこからコードを取得できます。 </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672199955.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS ">サーバーの最終バージョンのデモがここに表示され、ここからコードを取得できます。 </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672259072.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS ">このウォークスルーを楽しんでいただければ幸いです。似たようなことを試したことがあるなら、コメントでお知らせください！ </p>
AngularJSを使用してリアルタイムSignalR監(jiān)視パネルを構(gòu)築するための<h2 id="FAQ-FAQ">FAQ（FAQ）</h2>
<h3 id="angularjsにSignalRを設(shè)定する方法は"> angularjsにSignalRを設(shè)定する方法は？ </h3>
AngularJSのSignalRのセットアップには、いくつかのステップが含まれます。まず、NUGETまたはNPMを使用してSignalRライブラリをインストールする必要があります。インストール後、サーバーに新しいSignalRセンターを作成できます。このセンターは、メッセージの送信と受信を擔(dān)當(dāng)します。クライアントでは、SignalR JavaScriptライブラリを參照し、センターへの接続を作成する必要があります。その後、接続を開始し、著信メッセージを処理する関數(shù)を定義できます。 <p>
</p> SignalRの接続エラーを処理する方法は？ <h3>
</h3>SignalRは、接続エラーを処理するための組み込みメカニズムを提供します。中央接続で.error（）関數(shù)を使用して、エラーが発生したときに呼び出されるコールバック関數(shù)を定義できます。このコールバック関數(shù)は、ユーザーにエラーメッセージを表示するか、センターに再接続しようとすることができます。 <p></p>
<h3 id="他のJavaScriptフレームワークでSignalRを使用できますか">他のJavaScriptフレームワークでSignalRを使用できますか？ </h3>
<p>はい、SignalRは、AjaxとWebSocketsをサポートするJavaScriptフレームワークで使用できます。これには、React、Vue.js、Angularなどの一般的なフレームワークが含まれます。 ProjectにSignalR JavaScriptライブラリを含めて、他のJavaScriptアプリケーションと同じように中心的な接続を作成する必要があります。 </p>
<signr>
サーバーからクライアントにメッセージを送信するには、センターのクライアントプロパティを使用できます。このプロパティは、すべての接続されたクライアント、特定のクライアント、またはクライアントグループにメッセージを送信する方法を提供します。サーバーコードの任意の部分からこれらのメソッドを呼び出して、クライアントにリアルタイムの更新を送信できます。 <p>
</p>私の信號(hào)アプリケーションを保護(hù)する方法は？ <h3>
</h3>Signalrは、アプリケーションを保護(hù)するためのいくつかのオプションを提供します。 [Authorize]プロパティを使用して、センターおよびセンターの方法へのアクセスを制限できます。 Global.asaxファイルでMaphubs（）メソッドを使用して、ハブのカスタムオーサイザーを指定することもできます。さらに、SSLを使用してSignalRトラフィックを暗號(hào)化し、盜聴を防ぐことができます。 <p>
</p> SignalRの切斷に対処する方法は？ <h3>
</h3>SignalRは、切斷を自動(dòng)的に処理し、再接続を試みます。ただし、中央接続の.disconnected（）関數(shù)を使用して、手動(dòng)で切斷を処理することもできます。この関數(shù)を使用すると、接続が失われたときに呼び出されるコールバック関數(shù)を定義できます。 <p>
</p> non.netサーバーでSignalRを使用できますか？ <h3>
</h3>SignalRは、.NETサーバーで使用するように設(shè)計(jì)された.NETライブラリです。ただし、互換性のあるWebSocketライブラリを使用して、SignalRを非.NETサーバーで使用できます。サーバーにSignalRプロトコルを?qū)g裝し、接続とメッセージングロジックを自分で処理する必要があります。 <p>
</p>私のsignalRアプリケーションをテストする方法は？ <h3>
</h3>PostmanやFiddlerなどのツールを使用してSignalRアプリケーションをテストし、HTTPリクエストをセンターに送信して応答を確認(rèn)できます。また、中央の方法やクライアント機(jī)能のユニットテストを作成することもできます。 <p>
</p>モバイルアプリでSignalRを使用できますか？ <h3>
</h3>はい、モバイルアプリでSignalRを使用できます。 SignalR JavaScriptライブラリは、CordovaまたはIonicで構(gòu)築されたハイブリッドモバイルアプリケーションで使用できます。ネイティブモバイルアプリの場(chǎng)合、iOSとAndroidの両方がSIGNRクライアントを提供します。 <p>
</p>私のsignalアプリケーションを拡張する方法は？ <h3>
</h3>Signalrは、アプリケーションを拡張するためのいくつかのオプションを提供します。 Azure SignalR Serviceを使用できます。これは、すべてのSignalR接続を処理する完全に管理されたサービスです。また、複數(shù)のサーバー間でメッセージを配布するためのソフトウェアレイヤーであるバックエンドを使用することもできます。 <p></p></signr><p>以上がAngularJSを使用してリアルタイムSignalRダッシュボードを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫像を無料で</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード寫真を作成する AI 搭載アプリ</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>寫真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國(guó)語版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國(guó)語版</h3>
</a>
<p>中國(guó)語版、とても使いやすい</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強(qiáng)力な PHP 統(tǒng)合開発環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796836217.html" title="node.jsでHTTPリクエストを作成する方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234432058757.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="node.jsでHTTPリクエストを作成する方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796836217.html" title="node.jsでHTTPリクエストを作成する方法は？" class="phphistorical_Version2_mids_title">node.jsでHTTPリクエストを作成する方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡(jiǎn)潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡(jiǎn)素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796836292.html" title="JavaScriptデータ型：プリミティブ対參照" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptデータ型：プリミティブ対參照" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796836292.html" title="JavaScriptデータ型：プリミティブ対參照" class="phphistorical_Version2_mids_title">JavaScriptデータ型：プリミティブ対參照</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796832745.html" title="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/173914572643912.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796832745.html" title="JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。" class="phphistorical_Version2_mids_title">JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭(zhēng)、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭(zhēng)は、論爭(zhēng)を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書を提出しました。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796832618.html" title="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191380054750.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796832618.html" title="キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？" class="phphistorical_Version2_mids_title">キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場(chǎng)合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796832608.html" title="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191360175213.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796832608.html" title="ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ" class="phphistorical_Version2_mids_title">ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796831296.html" title="JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175174058098308.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796831296.html" title="JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します" class="phphistorical_Version2_mids_title">JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 06, 2025 am 02:36 AM</span>
<p class="Articlelist_txts_p">.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡(jiǎn)素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796832563.html" title="JSラウンドアップ：JavaScriptイベントループに深く潛り込む" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175191266081499.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JSラウンドアップ：JavaScriptイベントループに深く潛り込む" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796832563.html" title="JSラウンドアップ：JavaScriptイベントループに深く潛り込む" class="phphistorical_Version2_mids_title">JSラウンドアップ：JavaScriptイベントループに深く潛り込む</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします。空の場(chǎng)合、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796832598.html" title="JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191340168611.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796832598.html" title="JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解" class="phphistorical_Version2_mids_title">JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:36 AM</span>
<p class="Articlelist_txts_p">イベントの泡は、ターゲット要素から祖先ノードに外側(cè)に伝播し、イベントキャプチャは外側(cè)の層からターゲット要素に內(nèi)側(cè)に伝播します。 1。イベントバブル：子要素をクリックした後、イベントは親要素のリスナーを上向きにトリガーします。たとえば、ボタンをクリックした後、最初に保育を出してから、親クリックしました。 2。イベントキャプチャ：3番目のパラメーターをtrueに設(shè)定して、リスナーが[親子要素のキャプチャリスナー]をクリックする前に[親要素のキャプチャリスナーをトリガーするなど、キャプチャステージで実行されるようにします。 3.実用的な用途には、子どもの要素イベントの統(tǒng)一された管理、傍受前処理、パフォーマンスの最適化が含まれます。 4. DOMイベントストリームは、キャプチャ、ターゲット、バブルの3つの段階に分割され、デフォルトのリスナーはバブルステージで実行されます。</p>
</div>
</div>
<a href="http://www.miracleart.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長(zhǎng)を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://www.miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a>
<a href="http://www.miracleart.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="4nbfp" class="pl_css_ganrao" style="display: none;"><legend id="4nbfp"></legend><address id="4nbfp"></address><sup id="4nbfp"><thead id="4nbfp"><input id="4nbfp"><em id="4nbfp"></em></input></thead></sup><font id="4nbfp"></font><td id="4nbfp"><form id="4nbfp"></form></td><em id="4nbfp"><pre id="4nbfp"><form id="4nbfp"><p id="4nbfp"></p></form></pre></em><big id="4nbfp"></big><optgroup id="4nbfp"><meter id="4nbfp"><th id="4nbfp"><tbody id="4nbfp"></tbody></th></meter></optgroup><tt id="4nbfp"><object id="4nbfp"><tt id="4nbfp"></tt></object></tt><strike id="4nbfp"></strike><sup id="4nbfp"><table id="4nbfp"><em id="4nbfp"></em></table></sup><thead id="4nbfp"><i id="4nbfp"><dfn id="4nbfp"><i id="4nbfp"></i></dfn></i></thead><tt id="4nbfp"></tt><th id="4nbfp"></th><ruby id="4nbfp"></ruby><font id="4nbfp"></font><acronym id="4nbfp"><u id="4nbfp"></u></acronym><dfn id="4nbfp"></dfn><pre id="4nbfp"><var id="4nbfp"><font id="4nbfp"><object id="4nbfp"></object></font></var></pre><form id="4nbfp"><progress id="4nbfp"><small id="4nbfp"><tfoot id="4nbfp"></tfoot></small></progress></form><th id="4nbfp"></th><label id="4nbfp"><center id="4nbfp"></center></label><legend id="4nbfp"></legend><strong id="4nbfp"><em id="4nbfp"><input id="4nbfp"><dfn id="4nbfp"></dfn></input></em></strong><nobr id="4nbfp"></nobr><style id="4nbfp"><ins id="4nbfp"></ins></style><sub id="4nbfp"></sub><font id="4nbfp"></font><thead id="4nbfp"><i id="4nbfp"></i></thead><pre id="4nbfp"><mark id="4nbfp"><listing id="4nbfp"><dfn id="4nbfp"></dfn></listing></mark></pre><em id="4nbfp"><pre id="4nbfp"><b id="4nbfp"><p id="4nbfp"></p></b></pre></em><p id="4nbfp"><kbd id="4nbfp"><p id="4nbfp"></p></kbd></p><font id="4nbfp"></font><dfn id="4nbfp"><td id="4nbfp"><form id="4nbfp"></form></td></dfn><form id="4nbfp"></form><small id="4nbfp"><legend id="4nbfp"><ruby id="4nbfp"><dl id="4nbfp"></dl></ruby></legend></small><address id="4nbfp"><strong id="4nbfp"><address id="4nbfp"><s id="4nbfp"></s></address></strong></address><menuitem id="4nbfp"></menuitem><samp id="4nbfp"><tbody id="4nbfp"><output id="4nbfp"></output></tbody></samp><pre id="4nbfp"></pre><thead id="4nbfp"></thead><b id="4nbfp"></b><ul id="4nbfp"><code id="4nbfp"><video id="4nbfp"></video></code></ul><dfn id="4nbfp"></dfn><th id="4nbfp"></th><p id="4nbfp"><mark id="4nbfp"></mark></p><var id="4nbfp"><font id="4nbfp"><object id="4nbfp"><tt id="4nbfp"></tt></object></font></var><th id="4nbfp"><form id="4nbfp"><optgroup id="4nbfp"><sub id="4nbfp"></sub></optgroup></form></th><thead id="4nbfp"></thead><strike id="4nbfp"></strike></div>
</html>