Tweet
Tweet

Slide 1

Slide 1 text

WEBSOCKETS Embracing the real-time Web Rob Hawkes

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Created by Phil Banks (@emirpprime)

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What are WebSockets? Nothing to do with plugs

Slide 6

Slide 6 text

Why use WebSockets? They’re pretty cool

Slide 7

Slide 7 text

Multiplayer Web gaming Communicating between players

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Live streaming content Live and instant updates

Slide 10

Slide 10 text

Draft-76, Draft-06 & Draft-07 Knowing the difference is important

Slide 11

Slide 11 text

Browser support Pretty decent, but not ideal

Slide 12

Slide 12 text

Using WebSockets is easy You gotta love a simple JavaScript API

Slide 13

Slide 13 text

var ws = new WebSocket("ws://127.0.0.1:8080");

Slide 14

Slide 14 text

var ws = new MozWebSocket("ws://127.0.0.1:8080");

Slide 15

Slide 15 text

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); };

Slide 16

Slide 16 text

var ws = new WebSocket("ws://127.0.0.1:8080"); ... ws.send(“Hello, world!”);

Slide 17

Slide 17 text

var ws = new WebSocket("ws://127.0.0.1:8080"); ... ws.close();

Slide 18

Slide 18 text

WebSockets on the server You need something to connect to

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

npm install websocket

Slide 21

Slide 21 text

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 });

Slide 22

Slide 22 text

... 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"); }); });

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Fallback for old browsers Now you can support everyone

Slide 25

Slide 25 text

var io = require("socket.io").listen(8080); io.sockets.on("connection", function (socket) { socket.on("message", function (data) { socket.emit(data); }); });

Slide 26

Slide 26 text

Socket.IO is just awesome It goes beyond the basics

Slide 27

Slide 27 text

WebSockets gotchas These tripped me up the first time

Slide 28

Slide 28 text

Using external services You don’t always have to roll your own

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

What WebSockets needs The future is bright-ish

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

DEV DERBY Experimenting with the latest Web technologies Manipulate video with canvas DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY Every month This month is HTML5 video Win prizes (like an Android) Next month is all about touch

Slide 34

Slide 34 text

THANK YOU Any questions? Rob Hawkes @robhawkes