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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ  + ϓϩμΫτϚωʔδϟʔ / ࠷ۙ͸΄ͱΜͲίʔυॻ͍ͯͳ͍ ؔ੢ͷษڧձͷओ࠵΍ͬͯ·͢  WebRTC Meetup + SkyWay Meetup + ؔ੢NodeֶԂ ژ౎Ͱಇ͍͍ͯ·͢ Apple Storeژ౎ߦ͖ͬͯ·ͨ͠ ->

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

WebSocketΛ࢖͏ • ͍ΘΏΔωοτϫʔΫϓϩτίϧ • αʔόʔͱΫϥΠΞϯτͰ  ૒ํ޲ʹૹ৴͢Δٕज़ • ୺຤ෛՙɾίωΫγϣϯอ࣋ͷ  ͲͪΒ΋௿ίετ! Firebase΋ WebSocket WebSocket ͱ͸

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

WebͱiOSͷ྆ํʹରԠ WebM AAC AWS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ͳͥ5ඵʁ ͦͷલʹ࣮૷ํ๏ͷઆ໌

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

iOSͷ࿥Իํ๏ • SkyWay SDKͷgetUserMedia  -> Ұ୺຤ʹ͖ͭҰ͔ͭ͠औಘͰ͖ͳ͍  -> Ի੠Stream͚ͩൈ͖ग़ͤͳ͍ • ϚΠΫͷԻ੠Λऔಘͯ͠ૹ৴  -> ͜ͷํ๏Ͱ࿥Ի

Slide 23

Slide 23 text

iOSͷsocket.ioͰ Streamܗࣜͷૹ৴͕Ͱ͖ͳ͍ • WebSocketͰૹ৴Ͱ͖ΔϑΝΠϧ͸  ςΩετܗࣜ or όΠφϦܗࣜ • ϑΝΠϧΛҰ౓อଘ͠  όΠφϦܗࣜͰૹ৴ ฐࣾͰ ӡӦ͍ͯ͠Δ IT༻ޠࣙయ

Slide 24

Slide 24 text

ಋೖϑΣʔζ

Slide 25

Slide 25 text

࣮૷͢Δ 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() }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

͜͜·Ͱ͸؆୯ ͔͜͜Β͕஍ࠈ

Slide 28

Slide 28 text

͔͜͜Β͸ ൃੜͨ͠໰୊ͱ ͦͷղܾʹ͍ͭͯ࿩͠·͢

Slide 29

Slide 29 text

ᶃ HTTP઀ଓʹࠩ͠୅ΘΔ

Slide 30

Slide 30 text

WebSocket͕ܨ͕Βͳ͍ͱ  HTTP Pollingʹ੾ΓସΘΔ ͦͷ࣌ʹsocket.io͸ ࣗಈͰHTTP Pollingʹ ੾Γସ͑ͯ͘ΕΔ ηΩϡϦςΟιϑτ proxy Firewall

Slide 31

Slide 31 text

͜ͷ஌ݟ͕ͳ͔ͬͨࠒ ௐࠪΛߦ͏ 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઀ଓ͢ΔڍಈΛൃݟͨ͠

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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ʹͯ͘͠ΕΔ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ᶅ 5ඵ͝ͱΛ࣮ݱ͢Δ

Slide 39

Slide 39 text

TimerΫϥε͕ ࢖༻Ͱ͖·͢

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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 )

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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