SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
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.
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.
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!
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.
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.
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.
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.
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
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.
-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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
...


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");
    });
});
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.
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.
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.
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.
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.
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.
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.
Joyent’s Node cloud servers

Provides a remotely hosted Node server that allows you to quickly get a WebSocket server up
and running.
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.
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
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
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

Mais conteúdo relacionado

Destaque

Majalah INFO-UFO no 01
Majalah INFO-UFO no 01Majalah INFO-UFO no 01
Majalah INFO-UFO no 01Nur Agustinus
 
Sexologia: Repaso para el final
Sexologia: Repaso para el finalSexologia: Repaso para el final
Sexologia: Repaso para el finalJohalmy Espaillat
 
υπολογιστέςκαι ιστορία
υπολογιστέςκαι ιστορίαυπολογιστέςκαι ιστορία
υπολογιστέςκαι ιστορίαguest388821
 
Inside Rawkets - onGameStart
Inside Rawkets - onGameStartInside Rawkets - onGameStart
Inside Rawkets - onGameStartRobin Hawkes
 
E write writing for the web 1-2 june2011
E write writing for the web 1-2 june2011E write writing for the web 1-2 june2011
E write writing for the web 1-2 june2011LeslieOflahavan
 
020615 Jewish Networking Congress
020615 Jewish Networking Congress020615 Jewish Networking Congress
020615 Jewish Networking CongressDov Winer
 
E write - loc advanced writing for the web 23 may2011
E write - loc advanced writing for the web 23 may2011E write - loc advanced writing for the web 23 may2011
E write - loc advanced writing for the web 23 may2011LeslieOflahavan
 
Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Airkatmoore
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
 
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Robin Hawkes
 
Session4 pl online_course_30_september2011
Session4  pl online_course_30_september2011Session4  pl online_course_30_september2011
Session4 pl online_course_30_september2011LeslieOflahavan
 
780 吴冠中画 3(Hys 2009)
780 吴冠中画 3(Hys 2009)780 吴冠中画 3(Hys 2009)
780 吴冠中画 3(Hys 2009)yangbqada
 
Wilfreda - Oscar
Wilfreda - OscarWilfreda - Oscar
Wilfreda - Oscarmeroga
 
影像紀錄區開發歷程
影像紀錄區開發歷程影像紀錄區開發歷程
影像紀錄區開發歷程Toomore
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies GenealogyDov Winer
 
FY12 Pre-Incubator Workshop
FY12 Pre-Incubator WorkshopFY12 Pre-Incubator Workshop
FY12 Pre-Incubator Workshopjvielman
 

Destaque (19)

Majalah INFO-UFO no 01
Majalah INFO-UFO no 01Majalah INFO-UFO no 01
Majalah INFO-UFO no 01
 
Sexologia: Repaso para el final
Sexologia: Repaso para el finalSexologia: Repaso para el final
Sexologia: Repaso para el final
 
test
testtest
test
 
υπολογιστέςκαι ιστορία
υπολογιστέςκαι ιστορίαυπολογιστέςκαι ιστορία
υπολογιστέςκαι ιστορία
 
Inside Rawkets - onGameStart
Inside Rawkets - onGameStartInside Rawkets - onGameStart
Inside Rawkets - onGameStart
 
E write writing for the web 1-2 june2011
E write writing for the web 1-2 june2011E write writing for the web 1-2 june2011
E write writing for the web 1-2 june2011
 
020615 Jewish Networking Congress
020615 Jewish Networking Congress020615 Jewish Networking Congress
020615 Jewish Networking Congress
 
E write - loc advanced writing for the web 23 may2011
E write - loc advanced writing for the web 23 may2011E write - loc advanced writing for the web 23 may2011
E write - loc advanced writing for the web 23 may2011
 
Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Air
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
Rawkets - A Massively Multiplayer HTML5 Game [Mozilla GameOn10]
 
Session4 pl online_course_30_september2011
Session4  pl online_course_30_september2011Session4  pl online_course_30_september2011
Session4 pl online_course_30_september2011
 
780 吴冠中画 3(Hys 2009)
780 吴冠中画 3(Hys 2009)780 吴冠中画 3(Hys 2009)
780 吴冠中画 3(Hys 2009)
 
Wilfreda - Oscar
Wilfreda - OscarWilfreda - Oscar
Wilfreda - Oscar
 
Keaksaraan sebagai fondasi pendidikan nasional
Keaksaraan sebagai fondasi pendidikan nasional Keaksaraan sebagai fondasi pendidikan nasional
Keaksaraan sebagai fondasi pendidikan nasional
 
影像紀錄區開發歷程
影像紀錄區開發歷程影像紀錄區開發歷程
影像紀錄區開發歷程
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy
 
FY12 Pre-Incubator Workshop
FY12 Pre-Incubator WorkshopFY12 Pre-Incubator Workshop
FY12 Pre-Incubator Workshop
 
Ettore
EttoreEttore
Ettore
 

Semelhante a WebSockets - Embracing the real-time Web

MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside RawketsRobin Hawkes
 
Open Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectOpen Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
 
Awesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorAwesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorRobin Hawkes
 
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...Avalon Media System
 
HTML5 & JavaScript: The Future Now
HTML5 & JavaScript: The Future NowHTML5 & JavaScript: The Future Now
HTML5 & JavaScript: The Future NowRobin Hawkes
 
Browserscene: Creating demos on the Web
Browserscene: Creating demos on the WebBrowserscene: Creating demos on the Web
Browserscene: Creating demos on the WebRobin Hawkes
 

Semelhante a WebSockets - Embracing the real-time Web (7)

MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Open Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectOpen Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps project
 
Awesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorAwesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen Accelerator
 
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
 
HTML5 & JavaScript: The Future Now
HTML5 & JavaScript: The Future NowHTML5 & JavaScript: The Future Now
HTML5 & JavaScript: The Future Now
 
Browserscene: Creating demos on the Web
Browserscene: Creating demos on the WebBrowserscene: Creating demos on the Web
Browserscene: Creating demos on the Web
 
Cvs
CvsCvs
Cvs
 

Mais de Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone cameraRobin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Robin Hawkes
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldRobin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTCRobin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersRobin Hawkes
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSRobin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSRobin Hawkes
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationRobin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersRobin Hawkes
 

Mais de Robin Hawkes (20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for Gamers
 

Último

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Último (20)

Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

WebSockets - Embracing the real-time Web

  • 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