Upgrade to Pro — share decks privately, control downloads, hide ads and more …

David Okun - Websockets, Swift, and You

David Okun - Websockets, Swift, and You

Literally (almost) everyone has connected with a RESTful API as a developer. Have you connected with a Websocket before? Well, it kinda rules, and David Okun will show you how you can both connect with one and make one for much asynchronous communication. It's gonna be so cool, honestly.
Recording from the April 2017 Brooklyn Swift Developers Meetup: meetup.com/Brooklyn-Swift-Developers/events/238943729
Video: vimeo.com/215464765
Code: github.com/dokun1/ForwardSwiftWebSocketsDemo

More Decks by Brooklyn Swift Developers Meetup

Other Decks in Programming

Transcript

  1. WebSockets, Swift, and
    YOU!!!!
    David Okun, Developer Evangelist, IBM
    @dokun24

    View Slide

  2. What even is a
    WebSocket?
    @dokun24

    View Slide

  3. A WebSocket is a computer
    communications protocol,
    providing full-duplex
    communication channels over a
    single TCP connection.
    @dokun24

    View Slide

  4. A WebSocket is a computer
    communications protocol,
    providing full-duplex
    communication channels over a
    single TCP connection.
    @dokun24

    View Slide

  5. A WebSocket is a computer
    communications protocol,
    providing full-duplex
    communication channels over a
    single TCP connection.
    @dokun24

    View Slide

  6. A WebSocket is a computer
    communications protocol,
    providing full-duplex
    communication channels over a
    single TCP connection.
    @dokun24

    View Slide

  7. Representational State Transfer
    @dokun24

    View Slide

  8. Representational State Transfer
    @dokun24

    View Slide

  9. Representational State Transfer
    • Create
    @dokun24

    View Slide

  10. Representational State Transfer
    • Create
    • Read
    @dokun24

    View Slide

  11. Representational State Transfer
    • Create
    • Read
    • Update
    @dokun24

    View Slide

  12. Representational State Transfer
    • Create
    • Read
    • Update
    • Delete
    @dokun24

    View Slide

  13. Representational State Transfer
    • POST
    • GET
    • PUT
    • DELETE
    @dokun24

    View Slide

  14. Representational State Transfer
    @dokun24

    View Slide

  15. Representational State Transfer
    Address
    @dokun24

    View Slide

  16. Representational State Transfer
    Address
    http://0.0.0.0:3000/api/
    conferences
    GET
    @dokun24

    View Slide

  17. Representational State Transfer
    Address
    POST
    {
    "conference": {
    "name": "OSCON
    Austin",
    "length": 2,
    "attending": true
    }
    }
    http://0.0.0.0:3000/api/conferences
    @dokun24

    View Slide

  18. Representational State Transfer
    Header
    @dokun24

    View Slide

  19. Representational State Transfer
    Header
    {
    "date": "Sun, 09 Apr 2017 12:52:40 GMT",
    "content-encoding": "gzip",
    "x-content-type-options": "nosniff",
    "x-frame-options": "DENY",
    "etag": "W/\"59e-ce28v/AAkstABRtqp9okiQ\"",
    "x-download-options": "noopen",
    "transfer-encoding": "chunked",
    "content-type": "application/json;
    charset=utf-8",
    "access-control-allow-credentials": "true",
    "connection": "keep-alive",
    "vary": "Origin, Accept-Encoding",
    "x-xss-protection": "1; mode=block"
    }
    @dokun24

    View Slide

  20. Representational State Transfer
    @dokun24

    View Slide

  21. Representational State Transfer
    Absence of State
    @dokun24

    View Slide

  22. Representational State Transfer
    Absence of State
    @dokun24

    View Slide

  23. Representational State Transfer
    Absence of State
    @dokun24

    View Slide

  24. Representational State Transfer
    Absence of State
    Client
    request
    API
    Layer
    stateful
    instructions
    update
    result
    MongoDB
    response
    @dokun24

    View Slide

  25. WebSockets
    @dokun24

    View Slide

  26. WebSockets
    Connection Handshake
    ws://swift-door-dev.mybluemix.net/Ko3d9wnNdis8cz01
    @dokun24

    View Slide

  27. WebSockets
    Connection Handshake
    wss://swift-door-dev.mybluemix.net/Ko3d9wnNdis8cz01
    @dokun24

    View Slide

  28. WebSockets
    Connection Handshake - Request
    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
    @dokun24

    View Slide

  29. WebSockets
    Connection Handshake - Response
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat
    @dokun24

    View Slide

  30. WebSockets
    Conform to Protocol
    @dokun24

    View Slide

  31. WebSockets
    Conform to Protocol
    public func connected(connection: WebSocketConnection) {
    }
    @dokun24

    View Slide

  32. WebSockets
    Conform to Protocol
    public func disconnected(connection: WebSocketConnection, reason: WebSocketCloseReasonCode) {
    }
    public func connected(connection: WebSocketConnection) {
    }
    @dokun24

    View Slide

  33. WebSockets
    Conform to Protocol
    public func received(message: Data, from: WebSocketConnection) {
    }
    public func disconnected(connection: WebSocketConnection, reason: WebSocketCloseReasonCode) {
    }
    public func connected(connection: WebSocketConnection) {
    }
    @dokun24

    View Slide

  34. WebSockets
    Conform to Protocol
    public func received(message: Data, from: WebSocketConnection) {
    }
    public func received(message: String, from: WebSocketConnection) {
    }
    public func disconnected(connection: WebSocketConnection, reason: WebSocketCloseReasonCode) {
    }
    public func connected(connection: WebSocketConnection) {
    }
    @dokun24

    View Slide

  35. Communication
    @dokun24

    View Slide

  36. Communication
    Simplex vs Duplex
    @dokun24

    View Slide

  37. Communication
    Simplex
    @dokun24

    View Slide

  38. Communication
    Simplex
    @dokun24

    View Slide

  39. Communication
    Duplex
    @dokun24

    View Slide

  40. Communication
    Duplex
    • Half
    @dokun24

    View Slide

  41. Communication
    Duplex
    • Half
    • Full
    @dokun24

    View Slide

  42. Communication
    Half Duplex
    @dokun24

    View Slide

  43. Communication
    Half Duplex
    Yes, this is
    dog.
    @dokun24

    View Slide

  44. Communication
    Half Duplex
    @dokun24

    View Slide

  45. Communication
    Half Duplex
    @dokun24

    View Slide

  46. Live Demo
    @dokun24

    View Slide

  47. Communication
    Full Duplex
    @dokun24

    View Slide

  48. Communication
    Full Duplex
    A large pizza with
    a side of updog
    please?
    What’s updog?
    @dokun24

    View Slide

  49. Communication
    Full Duplex
    @dokun24

    View Slide

  50. Communication
    Full Duplex
    public func received(message: String, from: WebSocketConnection)
    {
    if message == “What’s updog?” {
    from.send(message: “Nothin’ much, what’s up with you?”)
    }
    }
    @dokun24

    View Slide

  51. Single TCP Connection
    @dokun24

    View Slide

  52. Single TCP Connection
    • Port 80 (unsecure)
    @dokun24

    View Slide

  53. Single TCP Connection
    • Port 80 (unsecure)
    • Port 443 (secure)
    @dokun24

    View Slide

  54. Single TCP Connection
    • Port 80 (unsecure)
    • Port 443 (secure)
    • RFC 6455
    @dokun24

    View Slide

  55. Single TCP Connection
    • Port 80 (unsecure)
    • Port 443 (secure)
    • RFC 6455
    • Connection Upgrade
    @dokun24

    View Slide

  56. Workshop Demo
    @dokun24

    View Slide

  57. @dokun24

    View Slide

  58. View Slide

  59. SwiftDoor
    @dokun24

    View Slide

  60. QueryPacket.swift
    @dokun24

    View Slide

  61. QueryPacket.swift
    • GPS coordinates (lat, long)
    @dokun24

    View Slide

  62. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    @dokun24

    View Slide

  63. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    @dokun24

    View Slide

  64. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    @dokun24

    View Slide

  65. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    • RightEyeClosed
    @dokun24

    View Slide

  66. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    • RightEyeClosed
    • LeftEyeClosed
    @dokun24

    View Slide

  67. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    • RightEyeClosed
    • LeftEyeClosed
    • IsSmiling
    @dokun24

    View Slide

  68. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    • RightEyeClosed
    • LeftEyeClosed
    • IsSmiling
    • Vector
    @dokun24

    View Slide

  69. QueryPacket.swift
    • GPS coordinates (lat, long)
    • DeviceID (UIDevice.current.identifierForVendor.uuidString)
    • DateTime (ISO 8601)
    • Facial Representation
    • RightEyeClosed
    • LeftEyeClosed
    • IsSmiling
    • Vector ([Float])
    @dokun24

    View Slide

  70. [0.0109382765, 0.0727260783, -0.0886565521, 0.106995322, -0.0263014287, -0.0352396965, -0.0471194535, 0.0224863011, 0.00886561163, -0.136294395, -0.00985514186,
    -0.0441077091, 0.0644643679, 0.0119109377, -0.00304533541, 0.00841313601, -0.0451855995, 0.0409480296, -0.0849511996, -0.046876207, 0.00489062304, -0.100049019,
    -0.0260294266, 0.0340725258, -0.0513369851, -0.00715692108, -0.138269156, -0.0447790548, -0.0971052274, 0.016863659, 0.0200845413, 0.0345470943, 0.0226635113,
    0.0210720059, 0.0939424559, -0.0567186847, -0.0420572162, -0.00359278591, 0.0274323691, -0.0161195938, 0.0396690778, 0.0509826653, 0.100426823, -0.0316316895,
    -0.0500608087, -0.00339857256, -0.0342332497, 0.0790704489, -0.0289952923, 0.0568330586, -0.0285114124, 0.0588419661, -0.0434439555, 0.0621240847, 0.0360112451,
    0.00799505785, -0.0279962141, -0.0449286103, 0.0152444597, 0.0455824099, -0.0581656098, -0.00988157, -0.024159437, 0.0274357516, -0.0862255767, -0.00760430517,
    -0.102911048, -0.0202399883, 0.00621778751, -0.0181367081, 0.0223715473, -0.125922918, -0.0999212191, -0.0126653658, -0.0358478688, -0.0665559843, 0.0375230871,
    -0.0261705182, -0.0212064162, 0.0475422479, -0.0623819679, 0.0129780034, 0.0282707643, 0.0232121553, -0.00730743492, -0.0821457431, 0.0655974671, -0.0265328269,
    0.0388734452, 0.0616755709, -0.0121487472, -0.0232637692, -0.0545362122, 0.0236765929, -0.0611603297, 0.0797719285, -0.0404306911, 0.0323628858, -0.00949066877,
    -0.0609771982, -0.00158646447, 0.0596057661, -0.0802996904, 0.0247787572, 0.0387842879, 0.0258943904, -0.093511194, 0.0587848015, -0.0104612159, -0.108764656,
    -0.0245255344, -0.00470191566, 0.0061077862, -0.0946708396, 0.0128557365, 0.123939671, 0.0517629161, 0.0203773696, 0.0309179667, 0.0296497084, -0.0960420221,
    0.0165317804, 0.0315312482, 0.0090330299, 0.0824666694, 0.137421414, 0.00069823768, -0.0312179867, 0.0248888023, -0.00145759375, -0.0291704088, -0.0118671609,
    0.0213795807, -0.0371772498, 0.00247276342, 0.0654902682, -0.0687400624, 0.00264206412, 0.0854841322, -0.0100153023, -0.0529452562, 0.0973913893, 0.0627576113,
    0.00176332367, -0.0661887601, -0.080224067, 0.0554779172, -0.0210913122, 0.0315915756, 0.0259354841, -0.0917198285, -0.0626271218, -0.0229110811, -0.0031353659,
    -0.0217538457, 0.057530541, 0.0180884395, -0.116396718, 0.0102889976, -0.0272365212, -0.0515930578, 0.0503248908, -0.0153394509, 0.0429311357, 0.0498886444,
    -0.0364963003, -0.00377800176, 0.0172923729, -0.0085753873, -0.000616554695, -0.0112605086, -0.0504184701, -0.0347453021, -0.0306184422, 0.0429552235,
    -0.126647428, 0.0414417945, 0.0330664888, 0.0490230545, -0.00483355578, -0.0539604612, -0.00565166539, -0.120982081, -0.00506902765, -0.0661799386, 0.0654867887,
    -0.0254629534, -0.00545939198, 0.112354159, -0.0514094941, 0.0167419966, 0.0574088842, 0.0635244325, 0.0998285115, 0.014563757, 0.0446437597, -0.0102947541,
    0.0601763278, -0.022337636, 0.037583936, -0.00868016109, 0.0387439467, -0.0472361892, -0.00683514262, -0.0536096953, 0.0930362642, -0.0444846824, 0.0863161162,
    -0.0145008266, -0.0109270848, -0.0247354154, 0.0888869762, 0.0915196687, -0.0189450141, 0.157319754, -0.074196659, -0.0373945273, -0.0393407792, 0.110559419,
    -0.123502225, -0.0390469283, 0.0392427184, -0.0211585611, 0.029190179, 0.0259871911, -0.0924885496, -0.0496961176, 0.0109286346, -0.0429181717, 0.0285253581,
    -0.0200652219, -0.188982397, -0.0164047889, 0.0247660689, 0.0287661962, -0.0118430201, 0.0300309248, 0.0160504375, -0.00699294591, 0.0520862937, -0.0729718357,
    -0.0837474763, -0.0414310731, -0.096074976, 0.0275698956, -0.051039014, 0.084851712, 0.0742572099, -0.0493934005, 0.0458364189, 0.055183582, -0.0109172817,
    -0.0432627872, -0.0828055739, -0.0384820662, 0.0220153034, -0.00765768997, 0.0994410664, 0.017342262, -0.0428088047, -0.0226635933, 0.0442144275, -0.0242784154,
    -0.0128913475, 0.00506109418, 0.0339680836, 0.0699482784, 0.0170274191, 0.0268076807, -0.0130135585, -0.131615028, 0.10316924, -0.0259890705, 0.122296281,
    -0.0297779553, -0.0306672305, -0.0287104975, -0.048643548, -0.0360500105, -0.0858685449, -0.00986277591, -0.0646833256, -0.0840798244, 0.0136408471, 0.0169043299,
    -0.0971477106, -0.016923707, 0.0805660486, 0.0159345381, 0.0525551066, -0.0761455074, -0.136946559, 0.0588576943, -0.0372881182, 0.0313418806, 0.0984985977,
    -0.0552069917, 0.0313524827, 0.0150029277, 0.0668970719, 0.0640067905, 0.0310357977, 0.0117677432, -0.0163922533, -0.0199124962, -0.0404609703, 0.0657613128,
    0.0340500884, -0.0149180656, 0.0291028358, 0.0193162505, -0.0158343688, 0.103551552, -0.0468648039, -0.0689977854, 0.0592100658, 0.037243735, 0.0348685384,
    -0.0724523813, 0.00524123944]
    @dokun24

    View Slide

  71. Live Demo
    @dokun24

    View Slide

  72. Recap
    @dokun24

    View Slide

  73. Recap
    • http://kitura.io
    • https://github.com/dokun1/WebSocketsDeployDemo
    • @dokun24
    • http://www.websocket.org/echo.html
    @dokun24

    View Slide

  74. Q & A
    @dokun24

    View Slide

  75. Thank you!!
    @dokun24

    View Slide