はじめに
Webソケットをクロスブラウザで使用するためのNode.js用の優れたSocket.ioライブラリがあります。
ただし、サーバーとクライアント間の双方向の対話には、メッセージモデルを使用する必要があります。
Now.jsライブラリを使用すると、サーバー側からクライアント関数を透過的に呼び出すことができ、その逆も可能です。
それはどのように見えますか
Now.js-Socket.io上のNode.jsモジュール。サーバー側からクライアント関数を呼び出したり、サーバー側からクライアント関数を呼び出したりすることができます。 また、クライアント側とサーバー側では、関数を呼び出すだけでなく、共有変数を使用することもできます。
最初に、リモートコールを機能させるために必要な最小限のコードについて説明します。
サーバー側
rpc = require " now "
rpc_channel = rpc . initialize httpServer
rpc_channel . now . myVariable = " some value "
rpc_channel . now . distribute = ( message ) - >
rpc_channel . now . receive @now . name , message
FractalizeR's HabraSyntax Source Code Highlighter .
ここで何が起こっていますか:
- Now.jsモジュールをダウンロードする
- 実行中のNode.jsサーバー(http.Server)のインスタンスをinitializeメソッドに渡すことで、メソッドを呼び出すためのチャネルを作成します
- 受信したチャネルには、クライアントとサーバー間の同期をとるオブジェクトがあります。 たとえば、変数myVariableはオブジェクトに配置され、クライアントに表示されます
- 配布関数をnowオブジェクトに配置し、クライアントが呼び出すことができるようになりました
- distribute関数では、クライアントでreceiveメソッドを呼び出します
クライアント部
console . log ( now . myVariable ) ;
now . receive = function ( message ) {
$ ( " #messages " ) . append ( " <br> " + message ) ;
}
$ ( " #send-button " ) . click ( function ( ) {
now . distribute ( $ ( " #text-input " ) . val ( ) ) ;
} ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
ここで何が起こっていますか:
- 何らかの方法で、サーバーで定義された変数を使用します
- サーバーが呼び出すことができる関数を定義します(現在のオブジェクトはサーバーオブジェクトのように見えます)
- ある場所(この場合、ボタンクリックイベントハンドラー)で、サーバー関数を呼び出します
Now.jsとKiss.jsを使用してチャットを書く
コントローラー
kiss = require " kiss.js "
rpc = kiss . controllers . rpc
class MyController
@on_app_started = ( app ) - >
app . rpc_channel . now . distributeMessage = ( message ) - >
gr = rpc . getGroup @now . room
gr . removeUser @user . clientId
gr = rpc . getGroup @now . new_room
gr . addUser @user . clientId
@now . room = @now . new_room
gr . now . receiveMessage @now . name , message
@ index = ( req , res ) - >
context = { template_ name : " chat.html " }
v = new kiss . views . TextViewer ( )
v . render req , res , context
exports . MyController = MyController
FractalizeR's HabraSyntax Source Code Highlighter .
インデックスでは、チャットページを生成するだけですが、最も興味深いのはon_app_startedで発生します。
このメソッドは、アプリケーションの起動時に実行されます。 ここで、クライアントが呼び出すdistributeMessage関数を定義します。 呼び出されると、ユーザーをnew_roomルームに移動し、全員にメッセージを送信します。
お客様
$ ( document ) . ready ( function ( )
{
now . name = " user " ;
now . room = " room 1 " ;
function send ( )
{
now . name = $ ( ' <div/> ' ) . text ( $ ( " #username " ) . val ( ) ) . html ( ) ;
now . new_room = $ ( ' <div/> ' ) . text ( $ ( " #room " ) . val ( ) ) . html ( ) ;
var html = $ ( ' <div/> ' ) . text ( $ ( " #text-input " ) . val ( ) ) . html ( ) ;
now . distributeMessage ( html ) ;
$ ( " #text-input " ) . val ( " " ) ;
}
$ ( " #send-button " ) . click ( send ) ;
$ ( " #text-input " ) . keypress ( function ( e )
{
if ( e . keyCode = = 13 ) send ( ) ;
} ) ;
now . receiveMessage = function ( name , message )
{
$ ( " <li><h3> " + name + " </h3><p><strong> " + message + " </strong></p></li> " ) . prependTo ( " #messages " ) ;
$ ( ' #messages ' ) . listview ( ' refresh ' ) ;
}
} ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
ドキュメントをロードするとき、デフォルトのユーザー名と部屋を指定し、ボタンがクリックされたときに呼び出される関数を作成します。 この関数では、名前、部屋、メッセージを取得し、すべてサーバーに送信します。
サーバーがメッセージを通知するために呼び出す関数も定義します。
結果はここで見ることができます 。
同じ名前の部屋にいる人はお互いのメッセージを見るでしょう。これは単なるテストケースであるため、メッセージはどこにも保存されません。
Now.jsを見るとわかるように、変数を同期し、サーバーとクライアントの両方から透過的に関数を呼び出すことができます。これは、リアルタイムアプリケーションを構築するときに便利です。
参照資料
デモ
チャットソースコード
Now.js
Socket.io
Kiss.js