backbone.jsとsocket.ioを使用してWebアプリを作成します

キーテイクアウト

• backbone.jsは、キー価値のバインディングとカスタムイベントを備えたモデル、列挙性関数を備えたコレクション、イベント処理を備えたビュー、およびRESTFUL JSONインターフェイスを介した既存のAPIへの接続を提供することにより、Webアプリケーションに構造を提供します。
socket.ioは、Webクライアントとサーバー間の双方向通信を可能にすることにより、リアルタイムのWebアプリケーションを有効にするJavaScriptライブラリです。ユーザーのブラウザとサーバーの間にインタラクティブな通信セッションを作成するために使用されます。
• PubSubパターンは、カップリングを回避し、コードをより柔軟で拡張可能、保守可能にするのに役立つ非同期メッセージングパラダイムです。 BackBone.jsは、このイベントシステムを簡単に実装します 提供された例では、backbone.jsとsocket.ioを使用して、ユーザー間でリアルタイムでデータが同期されるグラフ視覚化ツールを作成します。コードは、他のライブラリまたはデータベースへの簡単なカスタマイズと移行を可能にするために構成されています。
この例をローカルに実行するには、GitHubリポジトリのクローニング、依存関係のインストール、アプリケーションの開始、http：// localhost：5000に向かい、実行中のアプリケーションを確認することが含まれます。
この記事は、Thomas GrecoとMarc Towlerによって査読されました。 SetePointコンテンツを最高にしてくれたSitePointのすべてのピアレビュアーに感謝します！多くの人が知っているように、backbone.jsは有名なMV*フレームワークです。 GitHubでホストされており、キー価値のバインディングとカスタムイベントをモデルに提供し、列挙機能の豊富なAPIを備えたコレクション、宣言的なイベント処理を伴うビューを提供し、既存のAPIに接続することにより、Webアプリケーションに構造を提供します。 RESTFUL JSONインターフェイス この記事では、カップリングを避けるために非同期メッセージングパラダイムを実装するために、イベント
• と呼ばれるバックボーンの組み込み機能を使用します。アイデアは、互いに大きく依存しているコードのグループを分離することです。
私が表示する例は、データがクロスユーザーを美しく同期するグラフ視覚化ツールです。 WebSocketを使用すると、ユーザーのブラウザとサーバーの間でインタラクティブな通信セッションを開くことができます。

目標は、例を可能な限りシンプルに保つことです。ここで学んだ概念は、カップリングを減らすのに大いに役立ちます。さらに、これは、拡張可能で柔軟な、保守可能なコードを構築するための非常に役立つアプローチです。実験の最後に、次の結果が得られます。

backbone.js

backbone.jsは、モデル、、ビュー、、コントローラー、コレクション、およびコレクションを提供することにより、単一ページアプリケーションを構築するためのフレームワークです。 カスタムイベント

。その構造は、ユーザーインターフェイスをビジネスロジックから分離するのに役立ちます。この記事では、これらの要素のいくつかについてのみ紹介しますが、より詳細なガイドが必要な場合は、「backbone.jsの基本：モデル、ビュー、コレクション、テンプレート」という記事を読むことをお勧めします。 🎜>

モデルはデータを表し、backbone.modelを拡張することで作成できます。

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

ビューは、モデルに裏打ちされたユーザーインターフェイスを論理ビューに整理する方法です。 HTMLマークアップは含まれていませんが、モデルのデータをユーザーに表示する背後にあるロジックだけです。ビューを作成するには、backbone.viewを次のように拡張する必要があります。

イベントは、任意のオブジェクトに混合できるモジュールであり、オブジェクトにカスタムという名前のイベントをバインドおよびトリガーする機能を提供します。モデル<span>var MyView = Backbone.<span>View</span>.extend({ </span> <span>el: 'div#my-view-container', </span> <span>initialize: function (options) { </span> <span>this.model = new MyModel() </span> <span>console.log('view initialized') </span> <span>} </span><span>})</span>との両方のモジュールがありますイベントモデルまたはviewにイベントをバインドできるようにします。一般的なパターンは、モデルの変更を聞くビューを作成することです。この手法は通常、基礎となるデータが変更されたときにビューが自動的に再レン​​ダリングできるようにすることを目的としています。 これらの要素がどのように連携するかの例を提供するために、Codepenでデモを作成しました。 入力を変更するたびに、view モデル

を変更します。 OKボタンを押すと、ビューは新しいID値をレンダリングします。 サーバーとクライアントの間のリアルタイム通信

WebSocketsは、ユーザーのブラウザとサーバーの間でインタラクティブな通信セッションを開くことを可能にする高度な方法です。このAPIを使用すると、ユーザーはサーバーにメッセージを送信し、回答のためにサーバーにポーリングすることなくイベント駆動型の応答を受信できます。この契約は、ルールと予想される行動を説明し、両側からの行動を伴う契約です。これらの2つのピースがAPIを介してリンクすると、サーバーとクライアントを統合するための接着剤として機能します。

橋の類推では、一度所定の位置にあると、データと命令が橋を渡ることができます。たとえば、サーバーは命令を受信し、アクションを実行し、命令を処理した後、情報をWebアプリケーションに返します。パーティー間のギブアンドゲット。この抽象化レイヤー（API）を使用すると、サーバーがどのようにアクションを実行したかについての詳細を理解する必要はありません。

Socket.ioは、リアルタイムWebアプリケーション用のJavaScriptライブラリです。これにより、Webクライアントとサーバー間の双方向通信が可能になります。両側には同一のAPIがあり、node.jsのようにイベント駆動型です。ブラウザとサーバー間のこのインタラクティブな通信セッションを開くには、リアルタイム通信を有効にするためにHTTPサーバーを作成する必要があります。これにより、メッセージを放出して受信できます。ソケットは、Webクライアントとサーバー間のこの通信を処理するオブジェクトです。

以下のコードは、Expressフレームワークを使用してSocket.ioを使用してそのサーバーを作成します。

そのサーバーを作成した後、ソケットをパラメーターとして使用するコールバックをセットアップできるIOクラスがあります。このソケットオブジェクトを使用すると、ユーザーのブラウザとサーバーの間に接続を作成できます。

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

ブラウザでは、クライアントは、接続のソケットを返すIO関数を呼び出すサーバーにリンクします：

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

言った、データと指示が橋を渡ることができるという簡単なコミュニケーションを作成しましょう。

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

このコードを整備していると、次のデモを構築できます。

CodepenのSitePoint（@SitePoint）のペンMVRYMWを参照してください。

io.on('connection', function(socket) { console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); });

平均スタックの紹介

Express 4

を使用してRESTFUL APIを作成します

node.js-PoweredチャットルームWebアプリを作成：ノード、MongoDB、Socket

Socket.io

を使用したチャットアプリケーション
Socket.io
• を使用した
backbone.js このセクションでは、backbone.jsでsocket.ioを使用する方法の例を紹介します。
そしてこれが結果です：
CodepenのSitePoint（@SitePoint）のペンQydxwoを参照してください Backbone.js

を備えた

pubsub

pubsubは非同期メッセージングパラダイムです。結合を避けるために私たちを提供する機能を提供します。カップリングとは、コードのグループが互いに大きく依存している場合です。つまり、コードの一部が変更された場合、このコードを使用するすべての更新が必要です。

pubsubは、同期分離を持つパターンです。ラジオの仕組みのようなイベントシステムを使用します。ラジオ局の放送（

公開var socket = io("http://pubsub-example-with-backbone.herokuapp.com/");）と誰でも聞くことができます（

を購読します）。さらに、他のオブジェクトと直接話し合うのではなく、共有ラジオ局にメッセージを公開できます。そのイベントシステムにより、サブスクライバーが必要とする値を含む引数を渡すことができるイベントを定義できます。 Backbone.jsは、このイベントシステムの実装を非常に簡単にします。このようにして、バックボーンを空のオブジェクトに混ぜる必要があります：

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

この時点で、標準トリガーを使用し、メソッドを使用してメッセージを公開および購読できます。

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

それを行うと、バックボーンビューからsocket.ioを削除できるようになりました。

目標は、モジュール間の依存関係を回避することです。各モジュールには、イベント（パブリッシャー）を起動するラジオ局のようなチャネルを持つことができます。他のモジュールは、通知を受信したいイベント（購読者）を聴くことができます。

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

得られた結果は次のとおりです

CodepenのSitePoint（@SitePoint）のペンgpgnpzを参照してください。

グラフの視覚化例

グラフの視覚化では、クライアント側に2つのモジュールを使用します。1つは指示されたグラフを描画するため、もう1つはデータを保存および取得するためです。グラフ描画モジュールは、Force Editorという名前のツールを使用します。このモジュールは、コードのForceViewと呼ばれ、グラフのノードを2次元空間にシンプルで直感的な方法で配置できます。 DBAASと呼ばれるストレージモジュールは、socket.ioを使用して、Webクライアントとサーバー間のリアルタイムの双方向通信を有効にします。それらのどれも、

forceview

および

dbaas

、他のいずれについても知りません。それらの行動はすべて孤立しています。 両方のモジュールは、依存関係を避けるためにsubpribscribe

スタイルでセットアップされています。彼らは、ラジオの動作と同じ方法でイベントシステムを使用し、ラジオ局の放送（パブリッシュ）とラジオレシーバーのリスニング（購読）を使用します。各モジュールは、他のモジュールと直接話すのではなく、共有された「

ラジオ局」でメッセージを公開します。独自のチャンネルでイベントを発射し、他のイベントのために他のチャンネルを聞くこともできます。 ここでの唯一の依存関係は、非常に小さなAPIを持つ各ラジオチャネルの依存関係です。重要なのは、どのメッセージがトリガーしているか、システムがイベントに正しく反応することを保証することです。イベントをトリガーして正しいことをすると、システム全体が機能します。以下の画像を見て、これらの各モジュールからどのイベントが放出されているかを確認してください。

バックボーンビューは、フォースビューとDBAAの間のメディエーターとして機能します。これにより、すべてを使用可能な小片に分解し、それらの小さな断片を美しく機能させることができます。このようにして、コードの理解がより簡単になり、簡単に維持可能になります。たとえば、

特定の味に合わせて少しカスタマイズしたい場合は、モジュールを簡単に拾い上げて、好きなように変更できます。グラフの視覚化を他のグラフライブラリ、例えば置き換えることができます。 JQPlot、Dracula、Arborjs、Sigmajs、Raphaeljsなど。または、Firebase、Appbase、Neo4J、TitandBなどのリアルタイムデータベースを使用することもできます。良いニュースは、別のライブラリに移行するために単一のファイルを変更するだけであることです。以下の画像は、バックボーンビューとこれら2つのモジュール間の相互作用を示しています。

データベースを使用していないことに注意してください。データはメモリに保存されています。コードを分離する方法により、あらゆる種類のデータベースに接続できます。

グラフの視覚化の例をローカルに実行する

コード全体がGitHubで利用可能です。リポジトリをクローンするか、コードをダウンロードできます。

その後、コンソールからnpmインストールを実行して、すべての依存関係をインストールします。 次に、node server.jsを実行して、アプリケーションを開始します。

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

ブラウザを使用してhttp：// localhost：5000にアクセスして、実行中のアプリケーションを確認します。アプリケーションが実行中に表示されたい場合は、こちらからデモを見つけることができます。

結論

終了！ Backboneの組み込み機能を使用して、PubSubパターンを実装しました。さらに、このパターンを使用して、ユーザー間でデータが美しく同期されたリアルタイムでグラフデータを表現および保存しました。ご覧のとおり、デカップルされたコードが一緒に動作するのを見るために、素晴らしい例に興味深い概念がほとんど混ざり合っています。

次のステップは、メモリではなくデータベースにデータをカスタマイズして保存することです。ただし、おそらく今後の投稿の1つでカスタマイズについて説明します。

以下のセクションでコメントをお気軽に共有してください。

backbone.jsとsocket.io

を使用してWebアプリの構築に関するよくある質問（FAQ）

Webアプリの構築におけるbackbone.jsの役割は何ですか？ backbone.jsは、キー価値のバインディングとカスタムイベント、コレクションをモデルに提供することにより、Webアプリケーションに構造を提供する軽量のJavaScriptライブラリです。列挙可能な関数の豊富なAPI、宣言的なイベント処理を備えたビューを使用し、Restful JSONインターフェイスを介して既存のAPIにすべてを接続します。コードを整理するのに役立ち、管理が容易になります。複雑なユーザーインターフェイスと大量のデータを処理する場合に特に便利です。 socket.ioは、ブラウザとサーバー間のリアルタイム、双方向、およびイベントベースの通信を可能にするJavaScriptライブラリです。ブラウザで実行されるクライアント側ライブラリとnode.jsのサーバー側ライブラリの2つの部分で構成されています。両方のコンポーネントには同一のAPIがあります。 Socket.ioは、チャットアプリケーション、リアルタイム分析、バイナリストリーミング、インスタントメッセージング、ドキュメントコラボレーションなどのリアルタイムアプリケーションの作成に非常に役立ちます。

backbone.jsは、カスタムイベントをモデルにバインドできるイベント処理システムを提供します。 「ON」メソッドを使用して、イベントをモデルにバインドし、「トリガー」メソッドを使用してイベントをトリガーできます。 「オフ」方法を使用してイベントを削除することもできます。このイベントシステムにより、アプリケーションの変更を管理し、ユーザーインターフェイスをデータと同期させることができます。 node.jsの人気のあるWebアプリケーションフレームワークであるExpress.jsと簡単に統合できます。 Express.jsアプリケーションを作成してから、socket.ioサーバーを添付できます。その後、socket.ioを使用して、クライアントとサーバー間のリアルタイム通信を処理できます。 Express.jsとsocket.ioのこの組み合わせは非常に強力であり、複雑なWebアプリケーションを作成するために使用できます。 Restful APIで動作するように設計されています。 「フェッチ」メソッドを使用してサーバーからデータを取得し、「保存」メソッドをサーバーに保存できます。 「破壊」メソッドを使用して、サーバーからデータを削除することもできます。 backbone.jsは、サーバーに送信するときにモデルデータをJSON形式に自動的に変換し、サーバーから受信するときにモデルデータに戻します。 >

socket.ioは、ブロブやアレイバッファなどのバイナリデータをサポートしています。クライアントからサーバー、またはサーバーからクライアントにバイナリデータを送信できます。 socket.ioは自動的にバイナリデータのエンコードとデコードを処理します。エラーを処理します。 「ON」メソッドを使用してエラーハンドラーをモデルにバインドし、「トリガー」メソッドを使用してエラーイベントをトリガーできます。エラーハンドラーはモデルとエラーを引数として呼び出します。クライアントが切断されると、サーバー上で「切断」イベントが放出されます。クライアントが再接続されると、クライアントに「再接続」イベントが放出されます。これらのイベントを使用して、アプリケーションの切断と再接続を処理できます。backbone.jsを使用すると、モデルとビューを拡張して独自のカスタムモデルとビューを作成できます。 「拡張」方法を使用して、モデルまたはビューのサブクラスを作成できます。その後、独自のメソッドとプロパティをサブクラスに追加できます。 。 「socket.io-redis」アダプターを使用して、複数のsocket.ioノード間の通信を有効にできます。 「スティッキーセッション」モジュールを使用して、クライアントからのすべてのリクエストが常に同じノードに送信されるようにすることもできます。

以上がbackbone.jsとsocket.ioを使用してWebアプリを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。