Real-time sweg - Speaker Deck

Slide 1

Slide 1 text

sweg real-time

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

observe it

Slide 4

Slide 4 text

! 3rdeden " 3rd-eden with a dash

Slide 5

Slide 5 text

sweg what does it mean to have

Slide 6

Slide 6 text

sweg socket.io

Slide 7

Slide 7 text

sweg sockjs

Slide 8

Slide 8 text

sweg websocket

Slide 9

Slide 9 text

sweg engine.io

Slide 10

Slide 10 text

sweg google browserchannel

Slide 11

Slide 11 text

sweg why do you need

Slide 12

Slide 12 text

websocket dude all the things!

Slide 13

Slide 13 text

Chrome 20 Chrome for Android 18+ RFC

Slide 14

Slide 14 text

Chrome 4 older protocol

Slide 15

Slide 15 text

Firefox 12 Firefox for Android 15+ RFC

Slide 16

Slide 16 text

Firefox 4 older protocol

Slide 17

Slide 17 text

Opera 12.1 Opera Mobile 12+ RFC

Slide 18

Slide 18 text

Opera 11 older protocol behind flag

Slide 19

Slide 19 text

Safari 6

Slide 20

Slide 20 text

Safari 4.2 older protocol

Slide 21

Slide 21 text

Internet Explorer 10 finally

Slide 22

Slide 22 text

HTTP proxy settings in your network settings can cause a full browser crash.

Slide 23

Slide 23 text

Writing to a can cause a full browser crash

Slide 24

Slide 24 text

Pressing the WebSocket connection

Slide 25

Slide 25 text

Firefox can create when you connect during

Slide 26

Slide 26 text

4G, 3G, LTE, mobile providers WTF ARE YOU DOING?? —

Slide 27

Slide 27 text

Virus scanners such as AVG WebSockets.

Slide 28

Slide 28 text

User, network and server ﬁrewalls block

Slide 29

Slide 29 text

Load balancers don't understand and block

Slide 30

Slide 30 text

new WebSocket("wss://url.io"); doesn’t look so simple anymore

Slide 31

Slide 31 text

but it has its use cases

Slide 32

Slide 32 text

low latency binary low bandwidth don’t care about older browsers

Slide 33

Slide 33 text

polling.. they see me they hating

Slide 34

Slide 34 text

Removing spinners with for JSONP

Slide 35

Slide 35 text

Back/Forward & browse cache busting

Slide 36

Slide 36 text

Client -> Server Server -> Client heartbeats

Slide 37

Slide 37 text

Protocol invention

Slide 38

Slide 38 text

sweg choosing your

Slide 39

Slide 39 text

socket.io 0.9 http://github.com/automattic/socket.io multiple transports cross domain invested with bugs poorly / not maintained / left for dead no message order guarantee dies behind ﬁrewall/virusscanners

Slide 40

Slide 40 text

Cross domain Multiple transports Sending average amounts of data Not consumer facing

Slide 41

Slide 41 text

engine.io and socket.io 1.0 http://github.com/automattic/engine.io supports multiple transports cross domain upgrade instead of downgrade works behind ﬁrewalls & virusscanners not well battle tested yet no message order guarantee

Slide 42

Slide 42 text

Quick connections Don’t care much about latency Cross browser Binary needed

Slide 43

Slide 43 text

google’s browserchannel https://github.com/josephg/node-browserchannel https://code.google.com/p/closure-library/source/browse/closure/goog/net/browserchannel.js multiple transports client maintained by google message order guaranteed works behind ﬁrewalls & virusscanners not cross domain no websocket support coﬀeescript on the server for node ._. not well documented & relatively unknown

Slide 44

Slide 44 text

Sending real-time updates Cross browser No need for binary data Medium lived connections Stability required over latency

Slide 45

Slide 45 text

sockjs https://github.com/sockjs multiple transports   (tons of them) cross domain poor error handling no query string allowed for connect connection delay with ﬁrewalls poorly maintained in the way of developers

Slide 46

Slide 46 text

Sendings lots of data using the most optimal transport Cross domain Cross browser No need for binary Long lived connected sessions

Slide 47

Slide 47 text

yolo your only library option

Slide 48

Slide 48 text

npm install primus primus is yolo for sweg

Slide 49

Slide 49 text

Primus wraps real-time frameworks. So you can focus on building apps.

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

cd your-awesome-project! ! $ npm install --save primus ws! ! echo "??" ! echo “profit!”! ! vim index.js

Slide 52

Slide 52 text

'use strict';! ! var Primus = require("primus")! , server = require("http").createServer(fn)! , primus = new Primus(server, { transformer:"ws" });! ! primus.on("connection", function connection(spark) {! console.log("connection received", spark.id);! spark.write("ohai");! ! spark.on("data", function data(msg) {! console.log("received", msg);! });! });! ! server.listen(8080);

Slide 53

Slide 53 text

! ! 'use strict';! ! var primus = new Primus("http://localhost:8080");! ! primus.on("open", function connected() {! console.log("connection opened");! primus.write("ohai");! });! ! primus.on("data", function data(msg) {! console.log(“received", msg);! });!

Slide 54

Slide 54 text

var primus = new Primus(server, { ! transformer: “sockjs" // engine.io, socket.io etc! });

Slide 55

Slide 55 text

module.exports = require(“primus/transformer").extend({! server: function () {! // This is only exposed and ran on the server.! },! ! client: function () {! // This is stringified end send/stored in the client.! // Can be ran on the server, if used through Node.js! },! ! // Optional library for the front-end, assumes globals! library: fs.readFileSync(__dirname +"./yourclientlib.js")! });

Slide 56

Slide 56 text

primus.on("end", function disconnected() {! console.log("connection ended");! });! ! primus.end();! primus.write();! ! fs.createReadStream(__dirname + '/index.html').pipe(spark, {! end: false! });

Slide 57

Slide 57 text

var primus = new Primus(server, { ! parser: "JSON" // JSON by default! });

Slide 58

Slide 58 text

var primus = new Primus(server, { ! parser: "EJSON" // or binary-pack or a third party module! });

Slide 59

Slide 59 text

module.exports = {! encoder: function (data, fn) {! // encode data to a string.! },! ! decoder: function (data, fn) {! // decode data to an object! },! ! // Optional library for the front-end, assumes globals! library: fs.readFileSync(__dirname +"./yourclientlib.js")! };

Slide 60

Slide 60 text

primus.transform('incoming', function (packet) {! // This would transform all incoming messages to foo;! packet.data = 'foo';! });! ! primus.transform('outgoing', function (packet) {! // This would transform all outgoing messages to foo;! packet.data = 'foo';! });

Slide 61

Slide 61 text

var primus = new Primus("http://localhost:8080", {! strategy: "disconnect, online"! });

Slide 62

Slide 62 text

var Primus = require("primus")! , server = require("http").createServer(fn)! , primus = new Primus(server, { transformer:"ws" });! ! primus.write("message"); // send message to all users! ! primus.forEach(function (spark) {! // Or iterate over all connections, select the once you! // want and only write to those! ! spark.write("message");! });

Slide 63

Slide 63 text

// The long awaited Socket.IO 1.0 release with Primus:! ! var server = require("http").createServer(fn)! , primus = new Primus(server, { transformer:"engine.io" });! ! primus.use(“emitter","primus-emitter")! .use(“multiplex”, require(“primus-multiplex”))! .use(“primus-emitter”, "primus-rooms");

Slide 64

Slide 64 text

module.exports = {! server: function () {! // This is only exposed and ran on the server.! },! ! client: function () {! // This is stringified end send/stored in the client.! // Can be ran on the server, if used through Node.js! },! ! // Optional library for the front-end, assumes globals! library: fs.readFileSync(__dirname +"./yourclientlib.js")! };

Slide 65

Slide 65 text

var server = require("http").createServer(fn)! , primus = new Primus(server, { transformer:"sockjs" });! ! primus.before(“session”, require(“session-parse-module”))! .before(“middleware-name”, "middleware-module-name");

Slide 66

Slide 66 text

var server = require("http").createServer(fn)! , primus = new Primus(server, { transformer:"engine.io" });! ! primus.on(“connection”, function middlewarish(spark, next) {! // do async stuff, all other “connection” events will not! // be called until this one completes..! next();! });