по стопам webkill'а » html5 http://blog.lukmus.ru это наш химический дом для печальных жителей Земли Sat, 21 Oct 2023 19:10:13 +0000 ru-RU hourly 1 http://wordpress.org/?v=3.4.2 Ruby WS-сервер под HTML5 WebSockets http://blog.lukmus.ru/2011/06/16/ruby-ws-server-pod-html5-websockets/ http://blog.lukmus.ru/2011/06/16/ruby-ws-server-pod-html5-websockets/#comments Thu, 16 Jun 2011 01:15:41 +0000 lukmus http://blog.lukmus.ru/?p=1009 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 тем быстрее люди перейдут на него.

]]> http://blog.lukmus.ru/2011/06/16/ruby-ws-server-pod-html5-websockets/feed/ 2