January 11 2012, 3:02 PM by David Parry
EventMachine + WebSockets
This is the notes from a talk I gave at #rorosyd on the 10th of January 2012.
The demo code is available at: [https://github.com/suranyami/socket_demo][]
So, what’s EventMachine?
- Reactor pattern
- Extremely high performance
- Doesn’t need threads, concurrency
- Addresses the C10K problem
- Callbacks
- Fast, low memory overhead
EventMachine supports lots of protocols!
There is a great list of currently implemented protocols at https://github.com/eventmachine/eventmachine/wiki/Protocol-Implementations which includes:
- HeaderAndContent
- SMTPServer
- Stomp
- Socks4
- ObjectProtocol
- SASLauth
- LineAndText
- LineText2
- HTTPClient
- HTTPClient2
- AMQP
- MySQL
- SMTP
- Postgres
- MemCache
- XMPP
- DNS
- PowerDNS
- ICMP
- XML Push Parser
- Redis
- MongoDB
- CouchDB
- Beanstalk
- SNMP
- HTTPRequest
- HTTPServer
- PubSubHubbub
- Proxy
- WebSocket
- SMPP
- RPC
- IRC
- Spec
- Cassandra
- Thrift
- Solr
- Syslog
- Amazon S3
- OSCAR (AIM, ICQ)
- RServe
- SSH
How to learn about EventMachine?
PeepCode
EventMachine Introduction
Example of a Trivial Telnet Server
require 'eventmachine'
class Echo < EM::Connection
def receive_data(data)
send_data(data)
end
end
EM.run do
EM.start_server(“0.0.0.0”, 10000, Echo)
end
So, what’s a WebSocket?
- Used for “push”, real-time bidirectional updates
- HTML 5, proposed RFC, too.
- In all modern browsers Chrome Safari, Safari Mobile Firefoxx but NOT Android browser (FFS! Why?) ** IE 10, but not IE 6-9 (who cares!)
- iOS native library + elsewhere
- Combining EventMachine + WebSocket = em-websocket
Where would I use it?
- Chat
- Multiplayer Games
- Real-time dataviz
- Real-time news feeds
- Real-time anything
Trivial WebSocket server
require 'eventmachine'
require 'em-websocket'
conf = {:host => “0.0.0.0”, :port => 8080}
EM.run {
EventMachine::WebSocket.start(conf) do |ws|
ws.onopen {ws.send "Hello Client"}
ws.onclose { puts "Connection closed" }
ws.onmessage {|msg| ws.send "Echo: #{msg}"}
end }
A Less Trivial example
So, I wanted something to demo that wasn’t trying to do to much but demonstrated the real-time nature of WebSockets, so I built this little socket_demo site:
- Sinatra serves HTML, JS (CoffeeScript), CSS
- Running an EM-WebSocket server
- Each guest decides whether a block is green or red (default’s white)
- Joining/leaving adds/removes blocks
- New guest gets snapshot of world
Useless, but non-trivial!
CoffeeScript
Assign an id to socket/guest
EM-Websocket Server:
class Demo constructor: –>
if WebSocket?
window.socket = new WebSocket("ws://192.168.1.3:7070")
else
window.socket = new MozWebSocket("ws://192.168.1.3:7070")
Register ourselves
CoffeeScript:
window.socket.onopen = –>
window.socket.send JSON.stringify({kind: “register”})
EM-Websocket Server:
socket.onmessage do |msg|
puts "Server Received #{msg}"
id = @sockets[socket][“id”]
incoming = ActiveSupport::JSON.decode(msg)
case incoming[“kind”]
when "register"
socket.send(register_message(id).to_json)
broadcast(id)
else
## Send “add” event to everyone
EM-Websocket Server:
def send_to_all(message) @sockets.each do |destination|`
destination.send(message.to_json)
end
CoffeeScript:
```coffeescript
window.socket.onmessage = (mess) –>
data = jQuery.parseJSON(mess.data)
switch data[“kind”]
when "add"
window.add_player data["id"], data["color"]
Send click events
$(“#red”).click (e) => window.socket.send JSON.stringify {kind: “update”, color: “red”}
$(“#green”).click (e) => window.socket.send JSON.stringify {kind: “update”, color: “green”}
Server gets a message
socket.onmessage do |msg|
id = @sockets[socket][“id”] incoming = ActiveSupport::JSON.decode(msg)
case incoming[“kind”]
when “register”
socket.send(register_message(id).to_json)
broadcast(id)
else
if incoming["color"]
color = incoming["color"]
message = {"kind" => "update", "id" => id, "color" => color}
@sockets[socket]["color"] = color
send_to_all(message)
end
end
end
Live Demo
Then I gave a live demo where I used my laptop as an unsecured base station, and people connected to it with their iPhones and started clicking on the red/green buttons:
wifi: suranyami
(no password)
url: test.local:4567
How to do testing with EventMachine?
em-spec
https://github.com/joshbuddy/em-spec
This demo code viewable here: [https://github.com/suranyami/socket_demo][]
September 11th, 2013 2:19pm
Discuss...