Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Unlight 從 TCP 到 WebSocket 的 HTML5 之路 Photo by Nastya Dulhiier on Unsplash
Slide 2
Slide 2 text
THE PROGRAMMER OF CREATIVE ࣌ ݭ @elct9620
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
@2020
Slide 5
Slide 5 text
評估後預計以 Unity 開發，並以⼿機平台為主 原始計畫
Slide 6
Slide 6 text
Unity 可以使⽤ TCP 連線不⽤調整過多伺服器設計 原始計畫
Slide 7
Slide 7 text
合作夥伴在其他國家希望以 HTML5 版本發⾏ 意外發⽣
Slide 8
Slide 8 text
Unity 的 WebAssembly 無法使⽤ DLL 套件 意外發⽣
Slide 9
Slide 9 text
@2021
Slide 10
Slide 10 text
從第三⽅獲取建議可以使⽤ Cocos Creator 開發 新計畫啟動
Slide 11
Slide 11 text
Cocos Creator 有類似 Unity 的介⾯， 但是有很多限制存在 新計畫啟動
Slide 12
Slide 12 text
原本暫時不處理的 TCP 連線問題需要⽀援 WebSocket 連線問題
Slide 13
Slide 13 text
評估後以團隊成員熟悉的 Golang 進⾏開發 Proxy Server 連線問題
Slide 14
Slide 14 text
Unlight 使⽤的是⾃訂的資料結構，需要⽤⼆進位⽅式處理 封包問題
Slide 15
Slide 15 text
JavaScript 在處理⼆進位資料上非常不好實作 封包問題
Slide 16
Slide 16 text
跟 Proxy 共⽤封包解析套件，⽤ WebAssembly 提供⽀援 封包問題
Slide 17
Slide 17 text
⽬前設計
Slide 18
Slide 18 text
Server (Ruby) Proxy (Go) Cmd Lib (Go) Bridge Lib (JS) State Lib (TS) Client (JS)
Slide 19
Slide 19 text
Server (Ruby) Proxy (Go) Cmd Lib (Go) Bridge Lib (JS) State Lib (TS) Client (JS)
Slide 20
Slide 20 text
伺服器部分維持現況不調整，是⽬前相對穩定的部分 Server
Slide 21
Slide 21 text
Proxy 提供單⼀ WebSocket 連接， 再由 Proxy 連到不同伺服器 Proxy
Slide 22
Slide 22 text
TCP 連線狀態由 Proxy 管理， 斷線可以⽤相對少修改⽅式解決 Proxy
Slide 23
Slide 23 text
Golang 本⾝有不錯的 WebSocket / IO 處理⽀援， 因此省下不少時間 理由
Slide 24
Slide 24 text
透過 Code Generate 產⽣能⾃動編碼和解碼封包的套件 Cmd Lib
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Proxy 可以針對玩家封包做紀錄， JS 端可以透過 Wasm 直接⽤於解析 理由
Slide 28
Slide 28 text
透過 ProtoBuf 和 WebAssembly 跟 Proxy 溝通和解析指令 Bridge Lib
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
gRPC 其實是把 Protobuf 封裝 加入了 Lookup 資訊找到對應的⽅法 概念
Slide 34
Slide 34 text
因為 gRPC 還需要其他處理， 因此我們⽤⾃⼰的⽅式做 Lookup 概念
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
在將 Golang 綁定到 JavaScript 上時，我們遇到⼀些問題 困難
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
除此之外我們因為 Code Generate 讓 WebAssembly 非常⼤ 困難
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
封裝成事件跟 Promise 物件，提供非同步的操作 Bridge Lib
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
基本上是為了能有⼀個 可以重複利⽤的連線模組並解決指令問題 理由
Slide 46
Slide 46 text
發現 Client 端開發無法很好使⽤ Bridge Lib 且對狀態管理沒有概念 State Lib
Slide 47
Slide 47 text
Unlight 原有設計的狀態和事件是混合且嚴重耦合 State Lib
Slide 48
Slide 48 text
把互動完全抽象化， Client 端只需要知道狀態有變化並更新即可 State Lib
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
使⽤ TypeScript 加入型別檢查跟封裝避免協作時理解錯誤 State Lib
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
在設計上就盡可能減少耦合，同時降低我們在協作時需要掌握的資訊 理由
Slide 55
Slide 55 text
總結
Slide 56
Slide 56 text
原本認為重寫網路模組會很不好處理， 不過改⽤ Proxy 後協助後修改成本並沒有想像中⾼ TCP
Slide 57
Slide 57 text
原本選⽤ Unity 主要是 JavaScript ⼤多必要套件無法使⽤， 不過使⽤ WebAssembly 後效果雖不好但仍能解決問題 WASM
Slide 58
Slide 58 text
過程中調整次數最多的是 JavaScript 的部分， 連線模組的設計到複雜結構的管理才讓我們從 JavaScript 開始轉到 TypeScript 上， 並且想辦法解耦來改善協作 JS Lib
Slide 59
Slide 59 text
THANKS