Building Real-Time Applications in Ember.js

Building Real-Time Applications in Ember.js

Cf7d992c02bfb3bee91c9e2ee982a00c?s=128

Steve Kinney

March 04, 2015
Tweet

Transcript

  1. Building Real-Time Applications in Ember EmberConf 2015

  2. Hi. I'm Steve. @stevekinney | steve@turing.io

  3. None
  4. None
  5. Let's talk about building real-time applications with Ember.

  6. This is a story about WebSockets…

  7. It's also a story about integrating all sorts of browser

    functionality and third-party code into our applications.
  8. What even is a WebSocket?

  9. WebSockets are an HTTP independent, bi-directional, TCP-based protocol over port

    80 standardized in 2011 by the IETF as RFC 6455.
  10. Duh.

  11. None
  12. What are WebSockets used for?

  13. Quick Demo

  14. Can I actually use WebSockets?

  15. None
  16. None
  17. Now, that we know everything there is to know about

    WebSockets, let’s get to implementing them.
  18. None
  19. None
  20. Step Zero: We need a WebSocket server, right?

  21. A WebSocket server in fourteen lines.

  22. var WebSocketServer = require('ws').Server; var socket = new WebSocketServer({ port:

    8080 }); socket.on('connection', function(connection) { connection.on('message', function(message) { socket.broadcast(message); }); }); socket.broadcast = function(data) { this.clients.forEach(function (client) { client.send(data); }); };
  23. What does this look like on the client?

  24. A Traditional Example var socket = io(); $('form').submit(function(){ socket.emit('chat message',

    $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); });
  25. Ugh. DOM/selector- based development. #fail

  26. —Erik Bryn “Selector-based programming”

  27. We can do better.

  28. Let's try two or three different approaches.

  29. Approach #1: A standalone controller

  30. ember generate controller websocket

  31. app/controllers/ websocket.js

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. app/controllers/ chatroom.js

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. app/routes/ chatroom.js

  51. None
  52. None
  53. Quick Demo

  54. This approach works great, but it's somewhat limited.

  55. None
  56. Approach #2: Dependency Injection with Services

  57. ember generate service websocket

  58. installing create app/services/websocket.js create app/initializers/websocket.js

  59. app/initializers/ websocket.js

  60. None
  61. None
  62. None
  63. None
  64. None
  65. Let's move that code from the controller into our service.

  66. rm -rf app/controllers/websocket.js

  67. app/controllers/ chatroom.js

  68. None
  69. None
  70. That's it.

  71. Approach #3: Using Socket.io

  72. Point of Interest: Socket.io is both a server- and client-

    side library.
  73. To each her own.

  74. Let's set up a Socket.io server

  75. None
  76. None
  77. bower install sio-client

  78. None
  79. app/services/ websocket.js

  80. None
  81. app/controllers/ chatroom.js

  82. None
  83. None
  84. Thank you. Code example: stevekinney/emberconf-chat Twitter and Github: @stevekinney Email:

    steve@turing.io Hire our students: http://people.turing.io/