Building Real-Time Applications in Ember.js

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/