Nihitok BLOG: rubyのgem「em-websocket」を使ったらいとも簡単にwebsocketを導入できた。

とても簡単です。 10分もかからずに試せるのでよかったらどうぞ。

一応githubにソースも置いてますので、興味があるかたはそちらも見てみて下さい。(❍ʻ◡ʻ❍)

https://github.com/nihitok/Kantan-websocket

作るもの

websocketで動くチャット

最初に、gemでem-websocketをインストールします。em-websocketの詳細はこちら。https://github.com/igrigorik/em-websocket

$ gem install em-websocket

環境によっては依存するライブラリがなくて怒られたりするかもしれませんが、その場合はエラーメッセージでググッて見て下さい。

次に、適当なHTMLで「index.html」を作ります。

<html>
  <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script src='main.js'></script>
  </head>
  <body>
    <input id="input" type="text" />
    <div id="msg"></div>
  </body>
</html>

そして、クライアント側の動きを実装するmain.jsファイルがこちら

$(function(){
    ws = new WebSocket("ws://localhost:51234");
    ws.onmessage = function(evt) {
        $("#msg").append("<p>"+evt.data+"</p>");
    };

    ws.onclose = function() {
        console.log("閉じたよ")
    };

    ws.onopen = function() {
        ws.send("繋がったよ！(❍ʻ◡ʻ❍) ");
    };

    $("#input").keypress(function(e){
        if(e.keyCode ==13){
            var val = $("#input").val()
            ws.send(val)
            $("#input").val("")
        }
    });
});

ここで注意点が一つ。localの環境で試す場合は"ws:localhost:{好きなポート番号}"で大丈夫ですが、VPSなどで試す場合は、localhostの部分をそのVPSのIPアドレスか、ホスト名に変えて下さい。よく考えれば分かることなんですが、僕はこれで1時間ほどハマりましたw

そして、気になるサーバーの動きを実装するserver.rbがこちら。

#coding:utf-8
require 'em-websocket'

Process.daemon(nochdir=true) if ARGV[0] == "-D"
connections = Array.new

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 51234) do |ws|
  ws.onopen {
    ws.send "繋がった〜(❍ʻ◡ʻ❍) "
    connections.push(ws) unless connections.index(ws)
  }
  ws.onmessage { |msg|
    puts "received "+msg
    ws.send msg #to myself
    connections.each {|con|
      #to other people
      con.send(msg) unless con == ws
    }
  }
  ws.onclose   { puts "閉じます〜" }
end

補足ですが、下記の部分はdaemonとして動かすために入れてます。rubyではたった１行加えるだけでそのスクリプトをdaemonにできるのですごく便利です。(daemon化するっていうのはバックグラウンドでずっと起動しぱなしにできるっていうことだよ(❍ʻ◡ʻ❍) )

Process.daemon(nochdir=true) if ARGV[0] == "-D"

これで、後はサーバーを起動するだけです。とりあえず、普通に起動します。(rubyのversionは1.9.2で試してます。多分、1.8.7とかだと動きません。)

$ cd {server.rbがあるディレクトリ}
$ ruby server.rb

index.htmlをブラウザで開いて、windowを２つ並べてこんな感じに動作すれば成功です。

daemonとして起動したい場合は下記のようにします。

$ ruby server.rb -D

プロセスを終了したい時はちょっと面倒ですが下記のようにしてください。

$ ps ax |grep ruby
74583   ??  S      0:00.10 ruby server.rb -D
76807 s003  R+     0:00.00 grep ruby

みたいな感じでpidが確認できるので、"ruby server.rb -D"とかいてある方のpidを確認して

$ kill -9 74583
$ ps ax |grep ruby
76807 s003  R+     0:00.00 grep ruby
↑プロセスがなくなってたらちゃんと終了してます。

websocketの動きなどは筆者も説明出来るほど理解できてないのですが、みたらなんとなくピンとくるようなシンプルな構成です。サーバー側もクライアント側も同じメソッド名なので分かりやすいですね。

あと、今、これを更にいじってゲームっぽいものも作ってます。公開できるようにがんばります〜〜。(いつも中途半端な状態で放り出すので期待するべからずw)では(❍ʻ◡ʻ❍)

Nihitok BLOG

2011年8月4日木曜日

rubyのgem「em-websocket」を使ったらいとも簡単にwebsocketを導入できた。

作るもの

0 件のコメント:

コメントを投稿