Ruby WS-сервер под HTML5 WebSockets
WebSockets – новая и очень крутая штука в HTML5. В большинстве случаев WS быстрее, легче и эффективнее всяких там AJAX’ов, не говоря уже о Flash. Подробнее о WebSockets в HTML5 на википедии. Но речь здесь не о HTML5, а больше о сервере под веб-сокеты т.к. они работают не по протоколу HTTP/HTTPS, а по WS/WSS. Разумеется для всяких там апачей есть вагон модулей для работы с WS на том же порте что и HTTP, однако, может возникнуть ситуация что нужно будет иметь код-сервер (а-ля webrick) реализованный скажем в как cron через rake, я имею ввиду Ruby on Rails разумеется.
суть
WS-сервер, который рассмотрен здесь, вовсе не сервер типа Apache, а простая библиотека Ruby, которая берет всю заботу о соблюдении норм протокола на себя.
установка
Для начала нужно установить компилятор g++, именно его т.к. последующие гемы пользуются им, а не gcc. Не знаю как других дистрах, а в Fedora’е gcc и g++ 2 разных пакета.
yum install gcc-c++ |
Теперь надо установить несколько гемов:
gem install eventmachine em-websocket em-http-request |
Официальная страница библиотеки – https://github.com/igrigorik/em-websocket
пример
серверная часть
Я взял пример с офстраницы и чуть-чуть его видо изменил, добавив вывод в консоль клиентского сообщения:
1 2 3 4 5 6 7 8 9 10 | require 'em-websocket' EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws| ws.onopen { ws.send "Hi!"} ws.onmessage do |msg| ws.send "Pong: #{msg}" puts msg end ws.onclose { puts "WebSocket closed" } end |
Этот код будет слушать порт 8080 на localhost. Когда к нему присоединяется клиент, то он ему отправляет ‘Hi!’, далее на каждое клиентское сообщение он отвечает эхо-ответом "Pong: #{msg}".
клиентская часть
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>ХТМЛ5</title>
<script>
function log(e){
lg=document.getElementById('log');
lg.innerHTML=lg.innerHTML+(e+"\r\n");
}
w=new WebSocket'ws://localhost:8080'); //создаем сокет
// при открытии соединения выводим 'open' и
// отправляем 'client open'</span>
w.onopen=function(){ log("open"); w.send('client open'); }
// полученное сообщение выводим
w.onmessage=function</span>(e){ log(e.data);}
// при закрытии выводим 'client closed'
w.onclose=function(e){ log("client closed");}
// по нажатию на клавишу отправляем содержимое поля,
// выводим и чистим поле
function oncl(){
txt=document.getElementById('txt');
w.send(txt.value); log('-'+txt.value); txt.value=''; }
</script>
</head>
<body>
<input type='button' id='btn' value='ok' onClick='oncl();'>
<input type='text' id='txt' />
<div id='log'
style='border:1px solid black; width:400px; height:500px;'>
</div>
</body>
</html> |
Разметка представляет из себя поле, кнопку и div 400×500 с черной рамкой, что касается кода, то тут собственно все росписано в комментариях, а если по серьезному то нужно читать специализацию HTML5 по WebSockets.
P.S. чем больше будет сайтов на HTML5 тем быстрее люди перейдут на него.
Спасибо огромное!
Очень помогло в разработке!
Если вы поднимали WS-сервер на Rails-приложении как вы это делали, WS был в rake-файлых(где обычно cron-задания прописывают) и просто постоянно висел?