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

WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?

taminif
September 01, 2018

WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?

iOSDC 2018 9/1 TrackC 16:00

taminif

September 01, 2018
Tweet

More Decks by taminif

Other Decks in Programming

Transcript

  1. WebSocketΛiOSʹ࣋ͪࠐΜͰ
    ਏ͍ࢥ͍Λͨ͠ܦݧ͕
    ͋Γ·͔͢!?
    iOSDC Japan 2018
    Track C
    2018/09/01
    େౡ ޫو@sbntaminif

    View full-size slide

  2. ࣗݾ঺հ
    ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ

    + ϓϩμΫτϚωʔδϟʔ / ࠷ۙ͸΄ͱΜͲίʔυॻ͍ͯͳ͍
    ؔ੢ͷษڧձͷओ࠵΍ͬͯ·͢

    WebRTC Meetup + SkyWay Meetup + ؔ੢NodeֶԂ
    ژ౎Ͱಇ͍͍ͯ·͢ Apple Storeژ౎ߦ͖ͬͯ·ͨ͠ ->

    View full-size slide

  3. https://ejje.weblio.jp/content/iOS?dictCode=WEJTY

    View full-size slide

  4. iOSDC 2017
    https://speakerdeck.com/taminif/ying-hui-hua-sabisufalsetamenikai-fa-sitabideotiyatutoapurifalseji-shu

    View full-size slide

  5. ڈ೥ͷ͓͞Β͍Λ1෼Ͱ
    WebRTC
    Firebase
    WkWebView
    Web/iOS

    View full-size slide

  6. ڈ೥ΑΓ޷ධ!!
    http://buffalo.jp/jirei/education/seibou.html#tab_kouka
    ͋Γ͕͍ͨ͜ͱʹ
    ֶߍݱ৔Ͱͷಋೖ͕
    ૿͖͑ͯ·ͨ͠
    ཁ๬Λ௖͖
    ৽͍͠ػೳΛ
    ௥Ճ
    ͦΕ͕ɾɾ

    View full-size slide

  7. Ի੠࿥Իػೳ
    ※࣮ࡍ͸γεςϜԽͯ͠·͢
    Ϩοεϯͷ
    ෮श
    ੒੷ͷ
    ධՁ

    View full-size slide

  8. ϩʔΧϧʹ࿥Ի͠
    ϑΝΠϧΛૹ৴͢Δ
    WebRTC
    ૹ৴ΛͲ͏΍Δ͔

    View full-size slide

  9. WebSocketΛ࢖͏
    • ͍ΘΏΔωοτϫʔΫϓϩτίϧ
    • αʔόʔͱΫϥΠΞϯτͰ

    ૒ํ޲ʹૹ৴͢Δٕज़
    • ୺຤ෛՙɾίωΫγϣϯอ࣋ͷ

    ͲͪΒ΋௿ίετ!
    Firebase΋
    WebSocket
    WebSocket
    ͱ͸

    View full-size slide

  10. ͳͥWebSocketΛબΜ͔ͩ
    ʢେલఏʣ
    Ϩοεϯ͕࠷༏ઌ
    ୺຤ͷෛՙΛ཈͑Δ
    ֶߍʹΑͬͯѻ͏୺຤͸ҧ͏
    ϑΟϦϐϯͷωοτϫʔΫΛ
    ߟྀ
    ·ͩ·ͩΠϯϑϥ͸੔උ͞Ε͍ͯͳ͍

    View full-size slide

  11. ྫ͑͹WebRTCͰ࿥Ի
    • ίωΫγϣϯΛೋͭுΔඞཁ͕͋Δ
    • WebRTC͸୺຤ʹ݁ߏͳෛՙ͕͔͔Δ
    • Ի੠औಘɾωοτϫʔΫ྆ํ
    • Ϩοεϯͷө૾ɾԻ੠͕ཚΕΔՄೳੑ͕͋Δ

    View full-size slide

  12. Ͳ͏͍͏ߏ੒Ͱ
    ࿥Ի͢Δ͔

    View full-size slide

  13. ߨࢣͱੜెͷ੠ΛͦΕͧΕ࿥Ի

    View full-size slide

  14. WebͱiOSͷ྆ํʹରԠ
    WebM AAC
    AWS

    View full-size slide

  15. 5ඵ͝ͱʹϑΝΠϧΛૹ৴
    5ඵ͝ͱͷԻ੠
    WebMͷΈઌ಄ϑΝΠϧʹ
    ϔομʔ͋Γ
    WebSocketίωΫγϣϯ
    ड͚औͬͨԻ੠͸
    Ұ୴S3ʹ֨ೲ
    ཌਂ໷ʹ߹੒

    View full-size slide

  16. ͳͥ5ඵʁ
    ͦͷલʹ࣮૷ํ๏ͷઆ໌

    View full-size slide

  17. socket.io(socket.io-swift)
    https://github.com/socketio/socket.io-client-swift

    View full-size slide

  18. socket.ioͱ͸
    • WebSocketΛϥοϓͨ͠ϥΠϒϥϦ
    • αʔόʔαΠυ & ΫϥΠΞϯταΠυΛαϙʔτ
    • ࣮͸WebSocketͦͷ΋ͷΑΓ΋WebSocket͕࢖͑ͳ
    ͍؀ڥ΍઀ଓ͕੾Εͨ࣌ʹਅՁΛൃش͢Δ
    /PEF+4 +BWB /PEF+4 4XJGU +BWB $

    View full-size slide

  19. WebSocket͕ܨ͕Βͳ͍ཧ༝͸
    ͍ͬͺ͍͋Δ
    ͦͷ࣌ʹsocket.io͸
    ࣗಈͰHTTP Pollingʹ
    ੾Γସ͑ͯ͘ΕΔ
    ηΩϡϦςΟιϑτ
    proxy
    Firewall

    View full-size slide

  20. WebSocketͩͬͯ઀ଓ͸੾ΕΔ
    socket.io͸࠶઀ଓ΋
    ࣗಈͰ΍ͬͯ͘ΕΔ
    ௨৴ෆྑ
    ௨৴ݍ֎

    View full-size slide

  21. iOSͷ࿥Իํ๏
    • SkyWay SDKͷgetUserMedia

    -> Ұ୺຤ʹ͖ͭҰ͔ͭ͠औಘͰ͖ͳ͍

    -> Ի੠Stream͚ͩൈ͖ग़ͤͳ͍
    • ϚΠΫͷԻ੠Λऔಘͯ͠ૹ৴

    -> ͜ͷํ๏Ͱ࿥Ի

    View full-size slide

  22. iOSͷsocket.ioͰ
    Streamܗࣜͷૹ৴͕Ͱ͖ͳ͍
    • WebSocketͰૹ৴Ͱ͖ΔϑΝΠϧ͸

    ςΩετܗࣜ or όΠφϦܗࣜ
    • ϑΝΠϧΛҰ౓อଘ͠

    όΠφϦܗࣜͰૹ৴
    ฐࣾͰ
    ӡӦ͍ͯ͠Δ
    IT༻ޠࣙయ

    View full-size slide

  23. ಋೖϑΣʔζ

    View full-size slide

  24. ࣮૷͢Δ
    import SocketIO
    let client = SocketIOClient(
    socketURL: URL(string: "wss://example.com")!,
    config: [
    .path("/socket-io/socket.io"),
    .log(true),
    .connectParams(["device": "IOS", "token": "test_token"])
    ]
    )
    client.connect()
    client.on(clientEvent: .connect) {_, _ in
    callback()
    }

    View full-size slide

  25. σʔλΛૹ৴͢Δ
    func emit(_ event: String, _ items: SocketData...) {
    try? client.emit(
    event,
    with: items.map(
    {try $0.socketRepresentation()}
    )
    )
    }
    -> ͜ΕͰσʔλૹ৴·Ͱ֬ೝͰ͖ͨ
    ૹΔ࣌ʹҰ౓ϑΝΠϧܗࣜʹม׵͢Δඞཁ͋Γ

    View full-size slide

  26. ͜͜·Ͱ͸؆୯
    ͔͜͜Β͕஍ࠈ

    View full-size slide

  27. ͔͜͜Β͸
    ൃੜͨ͠໰୊ͱ
    ͦͷղܾʹ͍ͭͯ࿩͠·͢

    View full-size slide


  28. HTTP઀ଓʹࠩ͠୅ΘΔ

    View full-size slide

  29. WebSocket͕ܨ͕Βͳ͍ͱ

    HTTP Pollingʹ੾ΓସΘΔ
    ͦͷ࣌ʹsocket.io͸
    ࣗಈͰHTTP Pollingʹ
    ੾Γସ͑ͯ͘ΕΔ
    ηΩϡϦςΟιϑτ
    proxy
    Firewall

    View full-size slide

  30. ͜ͷ஌ݟ͕ͳ͔ͬͨࠒ
    ௐࠪΛߦ͏
    import SocketIO
    let client = SocketIOClient(
    socketURL: URL(string: "wss://example.com")!,
    config: [
    .path("/socket-io/socket.io"),
    .log(true),
    .connectParams(["device": "IOS", "token": "test_token"])
    ]
    )
    ௐࠪ͢ΔͨΊʹϩάΛग़ྗ͢Δͱɺ
    8FC4PDLFUʹࣦഊͨ࣌͠ʹ
    )551઀ଓ͢ΔڍಈΛൃݟͨ͠

    View full-size slide

  31. ֬ೝͨ݁͠Ռɾɾɾ
    ͦͷ࣌ʹsocket.io͸
    ࣗಈͰHTTP Pollingʹ
    ੾Γସ͑ͯ͘ΕΔ
    ηΩϡϦςΟιϑτ
    proxy
    Firewall
    ߏஙͨ͠αʔόʔ͕
    HTTP௨৴Λ
    ڐՄ͍ͯ͠ͳ͍ɾɾ

    View full-size slide

  32. import SocketIO
    let client = SocketIOClient(
    socketURL: URL(string: "wss://example.com")!,
    config: [
    .path("/socket-io/socket.io"),
    .forceWebsockets(true),
    .log(true),
    .connectParams(["device": "IOS", "token": "test_token"])
    ]
    )
    ࢓ํͳ͍ͷͰಥ؏޻ࣄͰରԠ
    WebSocketΛڧ੍͢Δ
    ௨৴Τϥʔ࣌ͷ࠶઀ଓ౳Λ
    શͯ8FC4PDLFUʹͯ͘͠ΕΔ

    View full-size slide


  33. ίωΫγϣϯΦϒδΣΫτ͕
    ෳ਺Ͱ͖Δ

    View full-size slide

  34. Ϩοεϯը໘ʹೖͬͨޙ
    ࠶ೖࣨͨ࣌͠ʹ
    ઀ଓ͕ಈ͔ͳ͍͜ͱ͕͋ͬͨ

    View full-size slide

  35. ௐ΂ͨͱ͜Ζ
    ΦϒδΣΫτΛഁغ͚ͨͩ͠Ͱ͸
    ઀ଓ͸੾Εͳ͍

    View full-size slide

  36. disconnectͰඞͣ઀ଓΛด͡Δ
    func disconnect() {
    client.disconnect()
    }
    func isConnected() -> Bool {
    guard let client = client else {
    return false
    }
    return client.status == SocketIOClientStatus.connected
    }
    ઀ଓΛด͡Δ
    ઀ଓεςʔλεΛ͍࣋ͬͯΔͷͰ
    ઀ଓத͔֬ೝͰ͖Δ

    View full-size slide


  37. 5ඵ͝ͱΛ࣮ݱ͢Δ

    View full-size slide

  38. TimerΫϥε͕
    ࢖༻Ͱ͖·͢

    View full-size slide

  39. 5ඵ͝ͱͷαΠΫϧ
    ࿥Ի։࢝ͯ͠
    5ඵ଴ͭ
    ࿥Իఀࢭ͠
    ϑΝΠϧૹ৴
    λΠϚʔىಈ
    ϑΝΠϧΛ࡟আ

    View full-size slide

  40. scheduledTimerͰ
    5ඵ͝ͱΛ࣮ݱ͢Δ
    Timer.scheduledTimer(
    timeInterval: 5,
    target: self,
    selector: #selector(self.chunkTimerEvent),
    userInfo: event,
    repeats: true
    )

    View full-size slide

  41. ͔͠͠
    5ඵ͝ͱʹ͸ͳΔ΋ͷͷ
    ͖ͬͪΓ5ඵʹ͸ͳΒͳ͍

    View full-size slide

  42. scheduledTimer͸
    ϝΠϯεϨουͰಈ࡞͢ΔͨΊ
    UIͳͲϝΠϯεϨουͰڝ߹͢Δͱ
    ׂΓࠐΈ͕ೖͬͯಈ͔ͳ͘ͳΔ

    View full-size slide

  43. scheduledTimerͰ͸ͳ͘
    RunLoopΫϥεΛ࢖༻͢Δ
    self.recordChunkTimer = Timer(
    timeInterval: 5.0,
    target: self,
    selector: #selector(self.chunkTimerEvent),
    userInfo: event,
    repeats: true
    )
    RunLoop.current.add(
    self.recordChunkTimer,
    forMode: .commonModes
    )

    View full-size slide

  44. 5ඵ͝ͱʹͳΒͳ͍໰୊Λ
    ௐ΂͍ͯͨ࣌ɺTimerͰ͸ͳ͘
    ૹ৴͕5ඵ͝ͱʹͳͬͯͳ͍ͷͰ͸
    ͱௐࠪͨ͠

    View full-size slide

  45. emitΛϝΠϯεϨουͰಈ͘Α͏ʹ
    func emit(_ event: String, _ items: SocketData...) {
    DispatchQueue.main.async {
    try? client.emit(
    event,
    with: items.map(
    {try $0.socketRepresentation()}
    )
    )
    }
    }
    -> վળ͞Εͳ͔ͬͨ

    View full-size slide

  46. socket.io͸Manager಺ʹ
    εϨουΛ͍࣋ͬͯͯɺͦͷεϨουΛ࢖༻͢Δ
    SocketManager.swift
    /// The queue that all interaction with the client should
    occur on. This is the queue that event handlers are
    /// called on.
    ///
    /// **This should be a serial queue! Concurrent queues are
    not supported and might cause crashes and races**.
    public var handleQueue = DispatchQueue.main
    https://github.com/socketio/socket.io-client-swift/blob/d03e319e3573f61e77e6c16461ff96b2f0fe1f79/Source/SocketIO/Manager/SocketManager.swift

    View full-size slide

  47. ղܾࣗମ͸TimerͩͬͨͷͰ͕͢
    ॲཧॱ͕อূ͞ΕΔ͜ͱΛ஌Εͯ
    ྑ͍ษڧʹͳΓ·ͨ͠

    View full-size slide

  48. ·ͱΊ
    WebSocket is Easy
    WebSocket is Hard
    ͚ͩͲ

    View full-size slide

  49. ·ͱΊ
    WebSocket is Easy
    WebSocket is Hard
    ͚ͩͲ
    WebSocket΋
    ۜͷ஄ؙͰ͸ͳ͍

    View full-size slide

  50. ϓϩμΫτʹಋೖ͢Δ࣌͸
    ͔ͬ͠Γ४උͯ͠
    τϥϒϧΛ૝ఆ͠·͠ΐ͏

    View full-size slide

  51. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide