Downloaded 75 times
Uploaded bySteve Kinney
Building Real-Time Applications in Ember.js
The document discusses building real-time applications using Ember and WebSockets, a protocol for bi-directional communication. It outlines the steps for implementing a WebSocket server and various approaches for integrating WebSockets within Ember applications. Additionally, it highlights the use of Socket.io as a versatile library for server and client-side functionalities.
More Related Content
![[Js hcm] Deploying node.js with Forever.js and nginx](https://cdn.slidesharecdn.com/ss_thumbnails/js-hcmdeployingnode-131016220832-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Building Real-Time Applications in Ember.js
Building Real-Time Applications in Ember.js
- 1. Building Real-Time Applications inEmber EmberConf 2015
- 2. Hi. I'm Steve. @stevekinney| steve@turing.io
- 5. Let's talk aboutbuilding real-time applications with Ember.
- 6. This is astory about WebSockets…
- 7. It's also astory about integrating all sorts of browser functionality and third-party code into our applications.
- 8. What even isa WebSocket?
- 9. WebSockets are anHTTP independent, bi-directional, TCP-based protocol over port 80 standardized in 2011 by the IETF as RFC 6455.
- 10.
- 12.
- 13.
- 14. Can I actuallyuse WebSockets?
- 17. Now, that weknow everything there is to know about WebSockets, let’s get to implementing them.
- 20. Step Zero: Weneed a WebSocket server, right?
- 21. A WebSocket server infourteen 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 thislook like on the client?
- 24. A Traditional Example varsocket = 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.
- 26.
- 27. We can dobetter.
- 28. Let's try twoor three different approaches.
- 29. Approach #1: A standalonecontroller
- 30.
- 31.
- 42.
- 50.
- 53.
- 54. This approach worksgreat, but it's somewhat limited.
- 56. Approach #2: Dependency Injectionwith Services
- 57. ember generate servicewebsocket
- 58.
- 59.
- 65. Let's move thatcode from the controller into our service.
- 66.
- 67.
- 70.
- 71.
- 72. Point of Interest:Socket.io is both a server- and client- side library.
- 73. To each herown.
- 74. Let's set upa Socket.io server
- 77.
- 79.
- 81.
- 83.
- 84. Thank you. Code example:stevekinney/emberconf-chat Twitter and Github: @stevekinney Email: steve@turing.io Hire our students: http://people.turing.io/