Rob Hawkes gives a presentation on WebSockets and why they are amazing. He explains that WebSockets allow for bi-directional communication between a client and server without having to constantly poll for updates. This saves bandwidth and allows data to be handled immediately. WebSockets are perfect for multiplayer games, live data feeds, and other real-time applications. Hawkes demonstrates how easy WebSockets are to implement on both the client-side using JavaScript and the server-side using Node.js. He also discusses tools like Socket.IO that simplify building applications with WebSockets.

1. T S
KE
C eb
O W
S me
B -ti
E al
W he re Ro
bH
aw
kes
g t
cin
bra
Em
Hi, I’m Rob Hawkes and I’m here tonight to talk a little about WebSockets and why they’re
amazing.

2. If you don’t already know, I work at Mozilla.
My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says
on my business card.
Part of my job is to engage with developers like you and me about cool new technologies on
the Web.

3. Created by Phil Banks (@emirpprime)
Aside from that I spend most of my time experimenting with HTML5 and other cool
technologies.
If you’ve met me before then you probably already know about my slight addiction to canvas
and visual programming.
It’s fun!

4. Unfortunately I’m still in jet-lag mode at the moment. I flew back on Saturday after spending
a week in the US with Mozilla and talking about HTML5 gaming.
On Saturday night I slept a total of 2 hours, and last night I managed to squeeze in a good 7.
So I apologise in advance if we find that having 9 hours of sleep in the past 60 turns me in a
gibbering wreck.

5. ts ?
e
ck ugs
So
e b ith
pl
W to do w
are hing
at ot
Wh N
Who already knows what WebSockets are?
Bi-directional communication, created by upgrading a standard HTTP connection.
Allows for data to be sent back and forth at the same time and without having to request it.
To clarify; once a WebSockets connection is made, data is pushed across it without either side
having to ask for it.

6. ts ?
e
ck ool
S o
eb retty
c
e W ey’re p
us Th
hy
W
This way of doing things is much better than the AJAX way of doing things, by constantly
polling a source for new data every so often.
It saves bandwidth, which in turn saves everyone time and money.
It allows you to handle data immediately, literally the moment it has been created on the
other end of the connection.

7. ing
g am rs
W eb een playe
r
ye ting b etw
ipla ica
ult mm
un
M Co
WebSockets is perfect for multiplayer gaming.

8. Rawkets is a multiplayer space game that allows you to shoot your friends in the face with
HTML5 technologies.
Still not really at a beta release level yet, hence the bugs you might notice in this video.
http://rawkets.com

9. n t
nte
co es
g
in tant u pd
at
am ins
stre e and
ive Liv
L
It’s also perfect for subscribing to a live feed of data.
News, stocks, Twitter, etc.

10. -07
ft
ra rtant
& Dpo
-06 is im
raft ifferen
ce
6, D d
the
ft-7 ow
ing
Dra Kn
Right now there are a growing number of specifications relating to WebSockets.
The current versions getting popular are Draft-06 and -07, which include changes to the old
Draft-76 that had potential security issues.
Most browsers up until now supported the older drafts, like -76, and the problem is that
Draft-06 and -07 aren’t compatible with -76.
This means that any browser that upgrades to the newer drafts won’t be able to communicate
with WebSockets connections that are running the older Draft-76. Nightmare!

11. o rt
p p
s u al
ser no
tide
row nt,but
B ce
de
retty
P
I’m pleasantly surprised by the level of browser support for WebSockets.
Chrome, Safari, iOS, and Firefox (from the latest beta), support it out of the box.
It was disabled in a previous version of Firefox for security reasons, but the ability to enable
it through a preference was left in. The latest beta (version 6), is the first to fully support
WebSockets, although it has been prefixed until a later version. I’ll show you what I mean by
this in a moment.
Opera has disabled WebSockets for now, and both IE and Android do not support WebSockets
at all. IE is experimenting with WebSockets in an experimental release, but it’s not ready for
public use yet.
The browser situation is by no means ideal, but there’s certainly enough support to start
thinking about using the technology.

12. easy
is PI
kets rip
tA
oc vaSc
b S ple
Ja
e
W love a sim
ing tta
Us ou
go
Y
When I first started looking at WebSockets the first thing that I noticed was how easy it is to
use.
This sort of sums up how I feel about most of the new JavaScript APIs.

13. var ws = new WebSocket("ws://127.0.0.1:8080");
Connecting to a WebSocket server is as simple as calling a single constructor in JavaScript.
By calling WebSocket and passing in the address of the server, the connection will be
attempted automatically for you.
If the connection is successful then a WebSocket object will be returned for you to use later
on.

14. var ws = new MozWebSocket("ws://127.0.0.1:8080");
In the latest Firefox beta (version 6) you’ll need to use the prefixed constructor to connect to
a WebSocket server.
As of right now the latest Aurora build doesn’t require a prefix, but I cannot guarantee that
things will stay that way.

15. var ws = new WebSocket("ws://127.0.0.1:8080");
ws.onopen = function() {
console.log("Connected to WebSocket server");
};
ws.onclose = function() {
console.log("Disconnected");
};
ws.onmessage = function(msg) {
console.log("Message received: "+msg.data);
};
The returned WebSockets object has some events that you can subscribe to.
onopen is fired when you have successfully connected to the WebSocket server.
onclose is fired when you have disconnected from the WebSocket server.
onmessage is fired when a new message is received from the WebSocket server.
You also have on onerror event to deal with issues with the WebSockets connection.

16. var ws = new WebSocket("ws://127.0.0.1:8080");
...
ws.send(“Hello, world!”);
Use the send method to transmit a message to to WebSocket server.

17. var ws = new WebSocket("ws://127.0.0.1:8080");
...
ws.close();
To close the WebSocket connection you just call the close method.
And that’s really about as complicated as it gets on the client side of things.

18. ve r
ser
t he ne
ct to
on oc
on
e ts ingt
ock om
eth
bS eeds
We Yo
un
To get any proper mileage out of WebSockets you probably want to set up a server that can
send and receive data to clients connected through WebSockets.

19. My favourite way to do anything on the server right now is with Node.js.
I like Node because it’s powered by JavaScript and it’s supremely easy to use.
It isn’t the only option available though; most server-side platforms support the ability to
communicate through WebSockets.

20. npm install websocket
There are a variety of WebSockets modules around at the moment, but for full support of the
new drafts I’ve begun using the Node-Websocket module.
If you already have NPM installed then you can get the module with little effort.

21. var WebSocketServer = require("websocket").server;
var http = require("http");
var server = http.createServer(function(request, response) {});
server.listen(8080, function() {
console.log("Server is listening on port 8080");
});
var ws = new WebSocketServer({
httpServer: server,
autoAcceptConnections: true
});
This is how we can set up a simple WebSockets echo system. Anything that is sent to the
server will be sent back again. It’s useful for testing.

22. ...
ws.on("connect", function(conn) {
console.log("Connection accepted");
conn.on("message", function(message) {
if (message.type === "utf8") {
console.log("Received Message: "+message.utf8Data);
conn.sendUTF(message.utf8Data);
};
});
conn.on("close", function(conn) {
console.log("Client "+conn.remoteAddress+" disconnected");
});
});

23. Socket.IO is a Node module that provides powerful real-time communication through
WebSockets.
Don’t be fooled by how much you can do with it though, it’s surprisingly simple to use.

24. sers
row ne
ld ev
b eryo
r o ort
fo can supp
ack you
allb ow
F N
The great thing about Socket.IO is that it falls back to Flash for socket communication in
browsers that don’t support WebSockets.
You can also let Socket.IO fallback from WebSockets to other methods of communication, like
long-polling, etc.

25. var io = require("socket.io").listen(8080);
io.sockets.on("connection", function (socket) {
socket.on("message", function (data) {
socket.emit(data);
});
});
This is a simple Socket.IO version of the echo server.
I’d show you it working, but I kind of broke it on the train over here and I didn’t get a chance
to fix it up.
The cool thing about Socket.IO is that you can set it up in one line, rather than 4 in the other
method.

26. m e
eso ics
aw e bas
st ond th
ju bey
is
t.IO goes
ocke It
S
Socket.IO does much more than just simple WebSockets communication.
Automatically packages up messages and deals with JSON messages.
Volatile messages that can be dropped if the client is busy.
The ability to split a single connection into channels so you can have different things
happening across the same stream.
This is great for concepts like chat rooms, or splitting functionality in multiplayer games.

27. as
o tch e
g
ets e first tim
ock th
bS e up
e
W e trippe
dm
es
Th
There are a few key issues that may trip you up with WebSockets.
The main one is to be aware that you’re using TCP, which means that you may get times
where sent packets are having to be resent so the stream can catch up.
This is most noticeable with multiplayer gaming as the amount of data being sent is pretty
intensive.

28. ce s
ervi
al s ro
wn
rn o roll y
te ve t
ou
ex
ing ys
ha
Us alw
a
on’t
ud
Yo
There are a whole host of solutions available if you just want to use WebSockets and not have
to worry about all the underlying functionality.
Here are a few of my favourites.

29. Pusher is for real-time communication and uses WebSockets.
Remotely hosted.
Quite a lot of services are starting to use Pusher now.
I believe some of the Pusher guys are in the room tonight as well.

30. Joyent’s Node cloud servers
Provides a remotely hosted Node server that allows you to quickly get a WebSocket server up
and running.

31. d s
ee
s n
et t-ish
ock e is bri gh
bS ur
We ef
ut
t Th
ha
W
Non-text-based communication, which will help for compression and other cool stuff.
UDP support, which is possible but doubtful for now. I know that people are looking into this
for media streaming, so perhaps it will move across.

32. ROB HAWKES
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Mozilla Technical Evangelist
Delving into your soul. My job
Rawkets.com ExplicitWeb.co.uk
HTML5 & WebSockets game. Web development podcast.
Twitter - @robhawkes
Rawkes - http://rawkes.com

33. DEV DERBY
Experimenting with the latest Web technologies
Every month
This month is HTML5 video
Manipulate video with canvas
Win prizes (like an Android)
Next month is all about touch
DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY
Also, you should definitely take part in the Dev Derby, which is a monthly competition run by
the Mozilla Developer Network to see what can be done with the latest Web technologies.
This month the focus is on HTML5 video, which is pretty interesting considering that you can
manipulate it using the canvas.
The winners get cool prizes, like an Android phone. It’s a great excuse to play around with
these technologies.
https://developer.mozilla.org/en-US/demos/devderby

34. O U
Y s?
K tion
N ues
A yq
TH An R b
es
wk es
Ha wk
ob ha
ro
@
Thank you.
If you have any questions feel free to grab me on Twitter (@robhawkes), or email
rob@rawkes.com