An introduction to WebSockets and why Primus might be a better fit for your project. This presentation was given at WebRebels

1. TransformingTransformingTransforming
WebSocketsWebSocketsWebSockets

2. !
3rdEden
"
3rd-Eden
fb
arnout.kazemier

5. the good partsthe good parts
WebSocketsWebSockets
the good parts
WebSockets

6. Chrome 20
Firefox 12
Opera 12.1
Safari 6
Internet Explorer 10

7. Chrome 4
Firefox 4
Opera 11
Safari 4.2
Internet Explorer 10

8. oh, it’s bi-directional
&
supports binary
oh, it’s bi-directional
&
supports binary
oh, it’s bi-directional
&
supports binary

9. The EndThe EndThe End

10. that nobody told youthat nobody told youthat nobody told you
The partsThe partsThe parts

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

12. user agent sniff
if (!
// Target safari browsers!
$.browser.safari!
!
// Not chrome!
&& !$.browser.chrome!
!
// And correct WebKit version!
&& parseFloat($.browser.version, 0) < 534.54!
) {!
// Don’t use WebSockets!
return;!
}

13. Writing to a closed WebSocket can
cause a full browser crash

14. write crash
var ws = new WebSocket("wss://localhost:8080/");!
!
ws.onmessage = function message(event) {!
// Wrap sends in a setTimeout out to allow the!
// readyState to be correctly set to closed. But!
// Only have this delay on mobile devices!
if (mobile) return setTimeout(function () {!
ws.send("Sup Oslo");!
}, 0);!
!
ws.send("Sup Oslo");!
};

15. Pressing ESC in Firefox closes the
WebSocket connection

16. connection end
$('body').keydown(function (e) {!
// make sure that you capture the `esc` key and!
// prevent it's default action from happening!
if (e.which === 27) e.preventDefault();!
});

17. Firefox can create ghost connections
when you connect during
ws.onclose.

18. Don’t use self signed SSL
certificates, not for development and
not in production

19. 4G, 3G, LTE, mobile providers WTF
ARE YOU DOING?? — Reverse proxy

20. Virus scanners such as AVG block
WebSockets.

21. User, network and server firewalls
block WebSockets.

22. Load balancers don't understand and
block WebSockets.

23. So yeah.. Real-Time is HARD

24. What if…What if…What if…
we could change thiswe could change thiswe could change this

25. Frameworks!Frameworks!Frameworks!

26. framework
ws
https://github.com/einaros/ws/
super damned fast
supports binary
cross domain
all the cool kids are doing it
i’m the only somewhat maintainer
no fallbacks or downgrading
broken by firewalls/virus scanners
only server, no client
module*

27. framework
socket.io
http://github.com/learnboost/socket.io
multiple transports
cross domain
invested with bugs
poorly / not maintained / left for dead
no message order guarantee
dies behind firewall/virusscanners

28. framework
engine.io
http://github.com/learnboost/engine.io
supports multiple transports
cross domain
upgrade instead of downgrade
works behind firewalls & virusscanners
not well battle tested yet
no message order guarantee

29. framework
browserchannel
https://github.com/josephg/node-browserchannel
multiple transports
client maintained by google
message order guaranteed
works behind firewalls & virusscanners
not cross domain
no websocket support
coffeescript on the server ._.

30. framework
sockjs
https://github.com/sockjs/sockjs-node/
multiple transports (tons of them)
cross domain
poor error handling
no query string allowed for connect
argh, more coffeescript
connection delay with firewalls
poorly maintained
in the way of developers

31. They all have different use cases and
API's.
!
Changing product specs == rewrite

32. we could change this toowe could change this toowe could change this too
What if…What if…What if…

33. npm install primus

34. Primus wraps and improves popular
real-time frameworks. So you can
focus on building apps.

35. CommunityCommunityCommunity

36. community

37. community

38. 1014
1
5
stars, but growing steady
star it on http://github.com/primus/primus
1014
1 line of code to switch between
excluding adding a framework to your package.json
different frameworks build-in
socket.io, engine.io, sockjs, websockets, browserchannel, but allows addition third party
5
1014
1
5

39. community

40. community

41. 50
31
50
31
50 different plugins
substream, emit, primus-emitter, primus-cluster, primus-rooms, primus-multiplex, primus-redis
different authors
damonoehlman, mmalecki, jcrugzz, daffl, balupton, cayasso & many more
31

42. community
#primus on irc.freenode.net
questions are bugs, ask them in our github issue tracker

43. why was primus inventedwhy was primus inventedwhy was primus invented
HistoryHistoryHistory

44. history
real-time layer
for the bigpipe
app framework

45. history
which had an
engine.io
wrapper

46. history
no single point
of failure

47. history
extracted and
released as
!
primus

48. Use casesUse casesUse cases

49. use cases
module & framework authors

50. use cases
startups & web developers

51. Learning
Primus
Learning
Primus
Learning
Primus

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

53. learning primus
'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);

54. learning primus
<script src="http://localhost:8080/primus/primus.js"></script>!
<script>!
'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);!
});!
</script>

55. SwitchingSwitchingSwitching

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

57. 1 line of code

58. 1 line of code
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")!
});

59. StabilityStabilityStability

60. manual patching

61. manual patching

62. Stream CompatibleStream CompatibleStream Compatible

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

64. EncodingEncodingEncoding

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

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

67. message encoding
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")!
};

68. message encoding
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';!
});
transforming

69. ReconnectReconnectReconnect

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

71. BroadcastBroadcastBroadcast

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

73. Node clientNode clientNode client

74. node.js
var primus = new Primus(server)!
, Socket = primus.Socket;!
!
var client = new Socket(“http://localhost:8080”);!
!
// or if you want to connect to a remote server:!
var primus = require(“primus”).createSocket({/* options */});

75. PluginsPluginsPlugins

76. plugins
// 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");

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

78. and middlewareand middlewareand middleware
PluginsPluginsPlugins

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

80. !
3rdEden
"
3rd-Eden
fb
arnout.kazemier
That's it! Thanks & check it out on
http://primus.io

81. http://primus.io