WebSocket – DECODE X NET

ここ最近、ディスプレイサーバの話題が続きましたが、Webでこれらのような使い方を考えてみました。
変わった使い方からもしれませんが、”Minecraft Pi Server”のようなリモートから表示するものを作成したり操作したりするものをWebSocketを使って試してみます。
ブラウザを立ち上げておいて、そこにリモートから描画するイメージです。
ブラウザはサーバのコンテンツを表示するのではなく、ファイルから立ち上げたものを使うというのもポイントです。
WebSocketサーバ、クライアントはRubyで実装します。

環境 : Ruby 2.3.1 / Ubuntu 16.04

Web画面

<html>
<head><meta charset="UTF-8" />
<title>websocket test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script type="text/javascript">
var conn = false;
$(function(){

    var ws = new WebSocket('ws://localhost:8888');                                                                                                
    $("#send").on('click', function(){
        ws.send($('#message').val());
    });

    ws.onopen = function(e){
     var msg = $('<li>').text("open!");
        $("#msgs").append(msg);
    }
    ws.onclose = function(e){
     var msg = $('<li>').text("close!");
        $("#msgs").append(msg);
    }
    ws.onmessage = function(e){
     var msg = $('<li>').text(e.data);
        $("#msgs").append(msg);
    };


});
</script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="send"/>
<ul id="msgs" />
</body>
</html>

<html>

<title>websocket test</title>

var conn = false;

$(function(){

var ws = new WebSocket('ws://localhost:8888');

$("#send").on('click', function(){

ws.send($('#message').val());

});

ws.onopen = function(e){

var msg = $('<li>').text("open!");

$("#msgs").append(msg);

}

ws.onclose = function(e){

var msg = $('<li>').text("close!");

$("#msgs").append(msg);

}

ws.onmessage = function(e){

var msg = $('<li>').text(e.data);

$("#msgs").append(msg);

};

});

</script>

</head>

<body>

</body>

</html>

WebSocketクライアント

require 'em-websocket-client'

EM.run do
  conn = EventMachine::WebSocketClient.connect("ws://localhost:8888/")

  conn.callback do
    ARGV.each_with_index do |arg, i|
      conn.send_msg "#{arg}"
    end
    conn.send_msg "---"
  end

  conn.errback do |e|
    puts "error: #{e}"
  end

  conn.stream do |msg|
    puts "#{msg}"
    if msg.data == "---"
      conn.close_connection
    end
  end

  conn.disconnect do
    puts "disconnect!"
    EM::stop_event_loop
  end
end

require 'em-websocket-client'

EM.run do

conn = EventMachine::WebSocketClient.connect("ws://localhost:8888/")

conn.callback do

ARGV.each_with_index do |arg, i|

conn.send_msg "#{arg}"

end

conn.send_msg "---"

end

conn.errback do |e|

puts "error: #{e}"

end

conn.stream do |msg|

puts "#{msg}"

if msg.data == "---"

conn.close_connection

end

conn.disconnect do

puts "disconnect!"

EM::stop_event_loop

end

WebSocketサーバ

#http://qiita.com/duke-gonorego/items/a4374c2e1d76d255ceb9

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

#http://qiita.com/duke-gonorego/items/a4374c2e1d76d255ceb9

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

実行画面

画面のsendは、接続テスト用で使いません。
ディスプレイサーバという考え方からすると、RubyのWebSocketサーバより先に、ブラウザ画面を立ち上げておく必要があります。これは課題としておきたいと思います。

参考:
http://qiita.com/duke-gonorego/items/a4374c2e1d76d255ceb9
https://github.com/mwylde/em-websocket-client
https://github.com/igrigorik/em-websocket