sails.io.js
)このドキュメントのセクションでは、ブラウザ用の Sails Socket クライアント SDK について説明します。JavaScript で記述されており、サーバーでも使用できます。
ネイティブ iOS、Android、Windows Phone 用の Sails/Socket.IO クライアントを実装する、いくつかのコミュニティプロジェクトもあります。
Sails Socket クライアント (sails.io.js
) は、新しい Sails アプリケーションにデフォルトでバンドルされている、小さなブラウザライブラリです。これは、Socket.IO クライアントの上に配置された軽量のラッパーであり、Sails バックエンドとのメッセージの送受信をできるだけシンプルにすることを目的としています。
sails.io.js
の主な役割は、WebSockets/Socket.IO を使用して Sails アプリケーションと通信するための、使い慣れた Ajax ライクなインターフェースを提供することです。つまり、リアルタイム機能を活用しながら、アプリの他の部分で使用しているのと同じバックエンドルートを再利用できる、.get()
、.post()
、.put()
、.delete()
メソッドを提供することを意味します。言い換えれば、ブラウザで io.socket.post('/user')
を実行すると、同じルートへの HTTP POST リクエストとまったく同じ方法で、Sails アプリケーション内でルーティングされます。
ブラウザでは、sails.io.js
を使用するのに必要なのは、<SCRIPT>
タグにライブラリを含めるだけです。Sails はすべての新しいアプリの assets/js/dependencies
フォルダにライブラリを追加するため、次のように記述できます。
<!--
This will import the sails.io.js library bundled in your Sails app by default.
The bundled version embeds minified code for the Socket.io client as well.
One tick of the event loop after importing this script, a new "eager" socket
will automatically be created begin connecting unless you configure it not to.
-->
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
その後、後続のインラインスクリプトまたは外部スクリプトで io.socket
をグローバル変数として使用できます。日常的な使用方法の詳細な手順と例については、io.socket
を参照してください。
Node.js スクリプトで Sails Socket クライアント SDK を使用するには、sails.io.js
と socket.io-client
ライブラリの両方をインストールして require する必要があります。
// Initialize the sails.io.js library with the socket.io-client module,
// which will automatically create and connect a new socket as io.socket
// unless you configure it not to.
var io = require('sails.io.js')( require('socket.io-client') );
sails.io.js GitHub リポジトリ を参照して、Node.js から Sails Socket クライアントを使用する方法の詳細を確認してください。
sails.io.js
ライブラリの構成このセクションでは、JavaScript Socket クライアントの最も一般的なランタイム環境であるブラウザに焦点を当てています。Node.js スクリプトで使用するための Socket クライアントの構成については、
sails.io.js
GitHub リポジトリ を参照してください。
ブラウザで Sails の Socket クライアントを構成するには、<script>
タグで HTML 属性を使用する方法と、io.sails
オブジェクトをプログラムで変更する方法の 2 つの方法があります。
Socket クライアントの最も一般的な 4 つの設定(autoConnect
、environment
、headers
、url
)を構成する最も簡単な方法は、スクリプトタグに 1 つ以上の HTML 属性を付けることです。
<script src="/js/dependencies/sails.io.js"
autoConnect="false"
environment="production"
headers='{ "x-csrf-token": "<%= typeof _csrf !== 'undefined' ? _csrf : '' %>" }'
></script>
この例では、積極的なソケット接続を無効にし、クライアント環境を「production」に強制し(ログが無効になります)、すべてのソケットリクエストで送信される x-csrf-token
ヘッダーを設定します(上書きされない限り)。headers
ディクショナリのような複合値は、シングルクォートで囲まれていることに注意してください。これは、このように指定された複合値はJSON エンコードする必要があるため、キー名と値の文字列はダブルクォートで囲む必要があります(同様の理由で、値文字列内の文字列はシングルクォートで囲まれています)。
HTML 属性として提供できる構成は、data-
を接頭辞として付けることによっても提供できます(例:data-autoConnect
、data-environment
、data-headers
、data-url
)。これは、非標準の HTML 属性に問題のあるブラウザをサポートする必要がある場合(または非標準の HTML 属性を使用するという考え方が単に嫌な場合)のためです。標準の HTML 属性と data-
を接頭辞とした HTML 属性の両方が提供されている場合、後者が優先されます。
注:この方法を使用して Socket クライアントを構成するには、デフォルトの Grunt アセットパイプライン(スクリプトタグを自動的に挿入する)を使用している場合、
pipeline.js
ファイルからsails.io.js
を削除し、代わりにそれをインポートする明示的な<script>
タグを含める必要があります。
io.sails
を使用したプログラムによる構成Sails v0.12.x 以降、HTML 属性を使用して設定できるのは、最も基本的な構成オプションのみです。上記以外の他のオプションを構成する場合は、io.sails
とプログラムでやり取りする必要があります。幸いなことに、上記で説明した方法は、まさにそれを行うための便利なショートカットです!その仕組みを説明します。
<script>
タグでページにロードすると、sails.io.js
ライブラリはイベントループの 1 サイクルを待ってから、自動的にソケットに接続します(io.sails.autoConnect
が有効になっている場合、下記参照)。これにより、io.sails
で指定したプロパティは、ソケットが接続を開始する前に設定できます。ただし、接続前に io.sails
プロパティが読み取られるようにするには、sails.io.js
を含む <script>
タグの直後に、それらのプロパティを設定するコードを配置する必要があります。
<script src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript">
io.sails.url = 'https://myapp.com';
</script>
<!-- ...other scripts... -->
通常、Socket クライアントは常に、スクリプトが提供されているサーバーに接続します。上記の例では、積極的な(自動接続)ソケットは、代わりに https://myapp.com
で実行されている Sails サーバーへの(クロスドメイン)ソケット接続を試行します。
注:デフォルトの Grunt アセットパイプライン(スクリプトタグを自動的に挿入する)を使用している場合、
pipeline.js
ファイルからsails.io.js
を除外し、代わりに明示的に<script>
タグを追加することをお勧めします。これにより、プログラムによる構成(例:io.sails.url = 'https://myapp.com';
の設定)に使用しているインライン<script>
タグがソケットクライアントの直後に実行されるため、構成が「積極的な」自動接続ソケットが接続を開始する前に適用されることが保証されます。
io.sails.connect
を使用して、クライアントソケットを手動で作成および接続することもできます。これにより、SailsSocket
のインスタンスが返されます。複数のソケットの接続など、あまり一般的ではなく、より高度なユースケースの詳細については、SailsSocket を参照してください。
sails.io.js
ライブラリとその個々のクライアントソケットには、いくつかの構成オプションがあります。グローバル構成はio.sails
にあり、これにより、「積極的な」ソケットと新しいソケットのデフォルト設定を無効にすることができます。個々のソケットは、手動で接続された場合にも構成できます。io.sails.connect()
を参照して、詳細を確認してください。
はい。Sails Socket クライアントは、Angular、React、Ember、Backbone、Knockout、jQuery、FishBerry など、あらゆるフロントエンドフレームワークで効果的に使用できます。
いいえ。Sails Socket クライアントは、ブラウザベースのUIでリアルタイム/チャット機能を構築する場合に非常に役立ちますが、assets/
ディレクトリの他の部分と同様に、ネイティブAndroidアプリ やユーザーインターフェースのないAPIを構築する場合には、あまり役に立たない可能性があります。
幸いなことに、Sails の他のすべてのボイラープレートファイルやフォルダと同様に、Socket クライアントは完全にオプションです。削除するには、assets/js/dependencies/sails.io.js
を削除するだけです。
内部的には、Socket クライアント(sails.io.js
)は、予約済みの名前を持つ Socket.IO メッセージを発行し、Sails によって解釈されると、アプリのルートとブループリント構成に従って、適切なポリシー/コントローラーなどにルーティングされます。
デフォルトでは、ソケット接続は、最初のソケットハンドシェイクで送信される cookie
ヘッダーを使用して、現在のブラウザセッション(存在する場合)にリンクされます。この動作をオフにするには、接続する前にソケットのquery
プロパティにnosession=true
を追加します。例えば
<script src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript">io.sails.query='nosession=true';</script>
Sails アプリのリクエストインタープリターをバイパスして、Socket.IO と直接通信することは可能です。ただし、フレームワークの他の場所で使用する規約優先設定の哲学を破るため、お勧めしません。Sails Socket クライアント(sails.io.js
)は非侵入型です。ネイティブ Socket.IO クライアントをラップし、Sails の仮想リクエストインタープリターを利用してシミュレートされた HTTP リクエストを送信するより高レベルのAPIを公開することによって機能します。これにより、バックエンドコードの再利用性が向上し、WebSockets/Socket.IO の使用に慣れていない開発者の参入障壁が低くなり、アプリの理解が容易になります。
注:非常にまれな状況(例:Socket.IO を直接使用する既存の/レガシーフロントエンドとの互換性)では、リクエストインタープリターのバイパスが必須です。このような状況に遭遇した場合は、Socket.IO クライアント、SDK を使用し、バックエンドで
sails.io
を使用して生の Socket.IO インスタンスにアクセスできます。この道に乗り出すのは、Socket.IO を直接使用した豊富な経験があり、まずsockets
フックの内部(特に、「admin bus」の実装、@sailshq/socket.io-redis の上にあり、Sails の複数サーバーサポートのルームへの参加/脱退を可能にする Redis 統合)を確認した場合のみにしてください。