WebSocket

2013/05/09 06:07

WebSocketとは?

WebSocketとはサーバとクライアントを双方向で通信するためのプロトコルです。
要はWebSocketを使わない場合はクライアントからサーバにこれこれ頂戴って言わないとサーバからデータが飛ばせなかったのが、クライアントからの要求なくサーバから一方的にデータが飛ばせる仕組みです。
これを実装するため em-websocket というGEMファイルを使用した方法と PUSHER というクラウドサービスを利用した方法の2通りを紹介します。

em-websocketとは?

rubyでwebsocketサーバを作るためのGEMです。
下記にrubyでWebSocketを使用したチャットアプリを書いています。

Gemfile
source 'https://rubygems.org'

gem 'em-websocket'
Ruby(websocketサーバ)
require 'em-websocket'

connections = Array.new

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 51234) do |ws|
  ws.onopen {
    connections.push(ws)
  }
  ws.onmessage { |msg|
    connections.each {|con| con.send(msg)}
  }
  ws.onclose {
    connections.delete(ws)
  }
end
HTML

JavaScript
$(function(){
  ws = new WebSocket("ws://serverhost:51234");
  // メッセージの受信時イベント処理
  ws.onmessage = function(evt) {
    $("#msg").append("

"+evt.data+"

"); }; // websocketサーバ接続時イベント処理 ws.onopen = function() { alert("接続しました"); }; // websocketサーバ切断時イベント処理 ws.onclose = function() { alert("切断されました"); }; // メッセージ入力処理 $("#input").keypress(function(e){ if(e.keyCode ==13){ var val = $("#input").val() ws.send(val) // メッセージ送信 $("#input").val("") } }); });

後はrubyプログラムを実行した状態でHTMLから確認すれば簡単なチャットアプリの完成です!
ただしem-websocketを使用した場合はrubyのプロセスを常駐する必要があり自前のサーバを持っていないと難しいです。
そんなときにはPUSHERクラウドを利用すれば簡単に使用できます。

PUSHERとは?

websocketサーバを専門に担ってくれるクラウドサービスです。
Webを作成した場合通常80番ボートを使用しHTTPのみでの通信を行うのが一般的です。
ただしwebsocketを使用する際はwebsocketサーバ用のポートを開ける必要があります。
PUSHERを使用すると自前サーバからクライアントへのWebSocket専用ポートを開ける必要がなくなります。

» 詳しくは

下記のPUSHER+Railsのサンプルを記述します。

Gemfile
source 'https://rubygems.org'

gem 'rails', '3.2.13'

-- 中略(Rails用) --

# pusher
gem 'pusher'
config/initializers/pusher.rb
Pusher.app_id = 'your-pusher-app-id'
Pusher.key = 'your-pusher-key'
Pusher.secret = 'your-pusher-secret'

Pusher.logger = Rails.logger
app/controllers/samples_controller.rb
class SamplesController < ApplicationController
  def create
    Pusher['sample-channel'].trigger('sample-event', {:message => params[:text]})
    render :text => 'success'
  end
end
app/views/samples/index.html.erb



と足早にサンプルを書いてみました。
また細かなことについては追々書いていきたいと思います。