Building Real-Time Applications in Ember.js

1. Building Real-Time Applications in Ember EmberConf 2015
2. Hi. I'm Steve. @stevekinney | steve@turing.io
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.
12. What are WebSockets used for?
13. Quick Demo
14. Can I actually use WebSockets?
17. Now, that we know everything there is to know about WebSockets, let’s get to implementing them.
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
42. app/controllers/ chatroom.js
50. app/routes/ chatroom.js
53. Quick Demo
54. This approach works great, but it's somewhat limited.
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
65. Let's move that code from the controller into our service.
66. rm -rf app/controllers/websocket.js
67. app/controllers/ chatroom.js
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
77. bower install sio-client
79. app/services/ websocket.js
81. app/controllers/ chatroom.js
84. Thank you. Code example: stevekinney/emberconf-chat Twitter and Github: @stevekinney Email: steve@turing.io Hire our students: http://people.turing.io/