rubyでwebsocketを試してみる #Ruby

何かと耳にするwebsocketを簡易チャットアプリとして触ってみたときのメモ

環境

VirtualBox 4.3
ubuntu 14.04
ruby 2.2.0
em-websocket 0.5.1

websocketサーバをインストールする

$ gem install em-websocket

websoketサーバを起動する

websocket.rb

require 'em-websocket'
require 'pp'

connnections = []

EM::WebSocket.start({:host => "0.0.0.0", :port => 8888}) do |ws_conn|
  ws_conn.onopen do
    connnections << ws_conn
  end

  ws_conn.onmessage do |message|
    pp message
    connnections.each{|conn| conn.send(message) }
  end
end

※ポートを8888で起動します
※pp messageでサーバに送られてきたメッセージを標準出力します
※connnectionsに接続を格納し、connnections.eachで接続されたクライアント全てに
　メッセージを返すようにしています

$ ruby websocket.rb

クライアント(HTML)

websocket.html

<html>
<head><meta charset="UTF-8" />
<title>websocket ruby test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script type="text/javascript">
$(function(){
    var ws = new WebSocket('ws://localhost:8888/');                                                                                                
    $("#send").on('click', function(){
        ws.send($('#message').val());
    });

    ws.onmessage = function(event){
        var message_li = $('<li>').text(event.data);
        $("#msg-area").append(message_li);
    };
});
</script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="send"/>
<ul id="msg-area" />
</body>
</html>

※HTMLが読み込まれると同時に、new WebSocket('ws://localhost:8888/')で
　websocket接続を確立します

異なる複数のブラウザを立ち上げ、片方でメッセージを入力し、ボタンをクリックすると
もう片方のブラウザ側にメッセージが表示されると思います。