Downloaded 25 times
Uploaded byArnout Kazemier
Transforming WebSockets
The document provides an overview of websocket technology, highlighting its challenges such as browser compatibility issues, crashes due to writing to closed websockets, and the impact of firewalls and virus scanners. It discusses various frameworks for real-time applications like Primus, Socket.io, and Engine.io, detailing their features and limitations. Additionally, it includes usage examples and community resources to aid developers in implementing websocket solutions.
More Related Content
![[MeetUp][2nd] 컭on턺](https://cdn.slidesharecdn.com/ss_thumbnails/2-191220021131-thumbnail.jpg?width=640&height=640&fit=bounds)
![laravel websocket(use redis pubsub) [Laravel meetup tokyo]](https://cdn.slidesharecdn.com/ss_thumbnails/laravelmeetuptokyo-140406095804-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
Transforming WebSockets
- 1.
- 2.
- 5. the good partsthegood parts WebSocketsWebSockets the good parts WebSockets
- 6. Chrome 20 Firefox 12 Opera12.1 Safari 6 Internet Explorer 10
- 7. Chrome 4 Firefox 4 Opera11 Safari 4.2 Internet Explorer 10
- 8. oh, it’s bi-directional & supportsbinary oh, it’s bi-directional & supports binary oh, it’s bi-directional & supports binary
- 9.
- 10. that nobody toldyouthat nobody told youthat nobody told you The partsThe partsThe parts
- 11. HTTP proxy settings inyour 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 aclosed 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 inFirefox 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 createghost connections when you connect during ws.onclose.
- 18. Don’t use selfsigned SSL certificates, not for development and not in production
- 19. 4G, 3G, LTE,mobile providers WTF ARE YOU DOING?? — Reverse proxy
- 20. Virus scanners suchas AVG block WebSockets.
- 21. User, network andserver firewalls block WebSockets.
- 22. Load balancers don'tunderstand and block WebSockets.
- 23. So yeah.. Real-Timeis HARD
- 24. What if…What if…Whatif… we could change thiswe could change thiswe could change this
- 25.
- 26. framework ws https://github.com/einaros/ws/ super damned fast supportsbinary 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 investedwith 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 crossdomain 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 maintainedby 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 (tonsof 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 havedifferent use cases and API's. ! Changing product specs == rewrite
- 32. we could changethis toowe could change this toowe could change this too What if…What if…What if…
- 33.
- 34. Primus wraps andimproves popular real-time frameworks. So you can focus on building apps.
- 35.
- 36.
- 37.
- 38. 1014 1 5 stars, but growingsteady 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.
- 40.
- 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 questionsare bugs, ask them in our github issue tracker
- 43. why was primusinventedwhy was primus inventedwhy was primus invented HistoryHistoryHistory
- 44. history real-time layer for thebigpipe app framework
- 45.
- 46. history no single point offailure
- 47.
- 48.
- 49. use cases module &framework authors
- 50. use cases startups &web developers
- 51.
- 52. learning primus cd your-awesome-project! ! $npm install --save primus ws! ! echo "??" ! echo “profit!”! ! vim index.js
- 53. learning primus 'use strict';! ! varPrimus = 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>! 'usestrict';! ! 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.
- 56. 1 line ofcode var primus = new Primus(server, { ! transformer: “sockjs" // engine.io, socket.io etc! });
- 57. 1 line ofcode
- 58. 1 line ofcode 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.
- 60.
- 61.
- 62. Stream CompatibleStream CompatibleStreamCompatible
- 63. stream compatible primus.on("end", functiondisconnected() {! console.log("connection ended");! });! ! primus.end();! primus.write();! ! fs.createReadStream(__dirname + '/index.html').pipe(spark, {! end: false! });
- 64.
- 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.
- 70. reconnect var primus =new Primus("http://localhost:8080", {! strategy: "disconnect, online"! });
- 71.
- 72. broadcast primus.write("message"); // sendmessage 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.
- 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.
- 76. plugins // The longawaited 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 middlewareandmiddleware 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.