Tweet
Tweet

Slide 1

Slide 1 text

Building Real-Time Applications in Ember EmberConf 2015

Slide 2

Slide 2 text

Hi. I'm Steve. @stevekinney | [email protected]

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Let's talk about building real-time applications with Ember.

Slide 6

Slide 6 text

This is a story about WebSockets…

Slide 7

Slide 7 text

It's also a story about integrating all sorts of browser functionality and third-party code into our applications.

Slide 8

Slide 8 text

What even is a WebSocket?

Slide 9

Slide 9 text

WebSockets are an HTTP independent, bi-directional, TCP-based protocol over port 80 standardized in 2011 by the IETF as RFC 6455.

Slide 10

Slide 10 text

Duh.

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

What are WebSockets used for?

Slide 13

Slide 13 text

Quick Demo

Slide 14

Slide 14 text

Can I actually use WebSockets?

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Now, that we know everything there is to know about WebSockets, let’s get to implementing them.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Step Zero: We need a WebSocket server, right?

Slide 21

Slide 21 text

A WebSocket server in fourteen lines.

Slide 22

Slide 22 text

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); }); };

Slide 23

Slide 23 text

What does this look like on the client?

Slide 24

Slide 24 text

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($('
  • ').text(msg)); });

    • Slide 25

    Slide 25 text

    Ugh. DOM/selector- based development. #fail

    Slide 26

    Slide 26 text

    —Erik Bryn “Selector-based programming”

    Slide 27

    Slide 27 text

    We can do better.

    Slide 28

    Slide 28 text

    Let's try two or three different approaches.

    Slide 29

    Slide 29 text

    Approach #1: A standalone controller

    Slide 30

    Slide 30 text

    ember generate controller websocket

    Slide 31

    Slide 31 text

    app/controllers/ websocket.js

    Slide 32

    Slide 32 text

    No content

    Slide 33

    Slide 33 text

    No content

    Slide 34

    Slide 34 text

    No content

    Slide 35

    Slide 35 text

    No content

    Slide 36

    Slide 36 text

    No content

    Slide 37

    Slide 37 text

    No content

    Slide 38

    Slide 38 text

    No content

    Slide 39

    Slide 39 text

    No content

    Slide 40

    Slide 40 text

    No content

    Slide 41

    Slide 41 text

    No content

    Slide 42

    Slide 42 text

    app/controllers/ chatroom.js

    Slide 43

    Slide 43 text

    No content

    Slide 44

    Slide 44 text

    No content

    Slide 45

    Slide 45 text

    No content

    Slide 46

    Slide 46 text

    No content

    Slide 47

    Slide 47 text

    No content

    Slide 48

    Slide 48 text

    No content

    Slide 49

    Slide 49 text

    No content

    Slide 50

    Slide 50 text

    app/routes/ chatroom.js

    Slide 51

    Slide 51 text

    No content

    Slide 52

    Slide 52 text

    No content

    Slide 53

    Slide 53 text

    Quick Demo

    Slide 54

    Slide 54 text

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

    Slide 55

    Slide 55 text

    No content

    Slide 56

    Slide 56 text

    Approach #2: Dependency Injection with Services

    Slide 57

    Slide 57 text

    ember generate service websocket

    Slide 58

    Slide 58 text

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

    Slide 59

    Slide 59 text

    app/initializers/ websocket.js

    Slide 60

    Slide 60 text

    No content

    Slide 61

    Slide 61 text

    No content

    Slide 62

    Slide 62 text

    No content

    Slide 63

    Slide 63 text

    No content

    Slide 64

    Slide 64 text

    No content

    Slide 65

    Slide 65 text

    Let's move that code from the controller into our service.

    Slide 66

    Slide 66 text

    rm -rf app/controllers/websocket.js

    Slide 67

    Slide 67 text

    app/controllers/ chatroom.js

    Slide 68

    Slide 68 text

    No content

    Slide 69

    Slide 69 text

    No content

    Slide 70

    Slide 70 text

    That's it.

    Slide 71

    Slide 71 text

    Approach #3: Using Socket.io

    Slide 72

    Slide 72 text

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

    Slide 73

    Slide 73 text

    To each her own.

    Slide 74

    Slide 74 text

    Let's set up a Socket.io server

    Slide 75

    Slide 75 text

    No content

    Slide 76

    Slide 76 text

    No content

    Slide 77

    Slide 77 text

    bower install sio-client

    Slide 78

    Slide 78 text

    No content

    Slide 79

    Slide 79 text

    app/services/ websocket.js

    Slide 80

    Slide 80 text

    No content

    Slide 81

    Slide 81 text

    app/controllers/ chatroom.js

    Slide 82

    Slide 82 text

    No content

    Slide 83

    Slide 83 text

    No content

    Slide 84

    Slide 84 text

    Thank you. Code example: stevekinney/emberconf-chat Twitter and Github: @stevekinney Email: [email protected] Hire our students: http://people.turing.io/