Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2021 - TGDF - Unlight 從 TCP 到 WebSocket 的 HTML5 之路
Search
蒼時弦や
July 10, 2021
Programming
0
180
2021 - TGDF - Unlight 從 TCP 到 WebSocket 的 HTML5 之路
Unlight 是一款超過十年的遊戲,在 Flash 已經無法使用的這個時代,我們該如何快速將原本使用 Flash + TCP 的架構轉換為 HTML5 + WebSocket 的設計呢?
蒼時弦や
July 10, 2021
Tweet
Share
More Decks by 蒼時弦や
See All by 蒼時弦や
2024 - COSCUP - Clean Architecture in Rails
elct9620
2
160
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
160
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
420
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
630
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
370
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
440
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
470
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
250
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
280
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Team operations that are not burdened by SRE
kazatohiei
1
310
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
5k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Is Xcode slowly dying out in 2025?
uetyo
1
270
PipeCDのプラグイン化で目指すところ
warashi
1
280
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building Adaptive Systems
keathley
43
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
Unlight 從 TCP 到 WebSocket 的 HTML5 之路 Photo by
Nastya Dulhiier on Unsplash
THE PROGRAMMER OF CREATIVE ࣌ ݭ @elct9620
None
@2020
評估後預計以 Unity 開發,並以⼿機平台為主 原始計畫
Unity 可以使⽤ TCP 連線不⽤調整過多伺服器設計 原始計畫
合作夥伴在其他國家希望以 HTML5 版本發⾏ 意外發⽣
Unity 的 WebAssembly 無法使⽤ DLL 套件 意外發⽣
@2021
從第三⽅獲取建議可以使⽤ Cocos Creator 開發 新計畫啟動
Cocos Creator 有類似 Unity 的介⾯, 但是有很多限制存在 新計畫啟動
原本暫時不處理的 TCP 連線問題需要⽀援 WebSocket 連線問題
評估後以團隊成員熟悉的 Golang 進⾏開發 Proxy Server 連線問題
Unlight 使⽤的是⾃訂的資料結構,需要⽤⼆進位⽅式處理 封包問題
JavaScript 在處理⼆進位資料上非常不好實作 封包問題
跟 Proxy 共⽤封包解析套件,⽤ WebAssembly 提供⽀援 封包問題
⽬前設計
Server (Ruby) Proxy (Go) Cmd Lib (Go) Bridge Lib (JS)
State Lib (TS) Client (JS)
Server (Ruby) Proxy (Go) Cmd Lib (Go) Bridge Lib (JS)
State Lib (TS) Client (JS)
伺服器部分維持現況不調整,是⽬前相對穩定的部分 Server
Proxy 提供單⼀ WebSocket 連接, 再由 Proxy 連到不同伺服器 Proxy
TCP 連線狀態由 Proxy 管理, 斷線可以⽤相對少修改⽅式解決 Proxy
Golang 本⾝有不錯的 WebSocket / IO 處理⽀援, 因此省下不少時間 理由
透過 Code Generate 產⽣能⾃動編碼和解碼封包的套件 Cmd Lib
None
None
Proxy 可以針對玩家封包做紀錄, JS 端可以透過 Wasm 直接⽤於解析 理由
透過 ProtoBuf 和 WebAssembly 跟 Proxy 溝通和解析指令 Bridge Lib
None
None
None
None
gRPC 其實是把 Protobuf 封裝 加入了 Lookup 資訊找到對應的⽅法 概念
因為 gRPC 還需要其他處理, 因此我們⽤⾃⼰的⽅式做 Lookup 概念
None
None
在將 Golang 綁定到 JavaScript 上時,我們遇到⼀些問題 困難
None
除此之外我們因為 Code Generate 讓 WebAssembly 非常⼤ 困難
None
封裝成事件跟 Promise 物件,提供非同步的操作 Bridge Lib
None
None
None
基本上是為了能有⼀個 可以重複利⽤的連線模組並解決指令問題 理由
發現 Client 端開發無法很好使⽤ Bridge Lib 且對狀態管理沒有概念 State Lib
Unlight 原有設計的狀態和事件是混合且嚴重耦合 State Lib
把互動完全抽象化, Client 端只需要知道狀態有變化並更新即可 State Lib
None
None
None
使⽤ TypeScript 加入型別檢查跟封裝避免協作時理解錯誤 State Lib
None
在設計上就盡可能減少耦合,同時降低我們在協作時需要掌握的資訊 理由
總結
原本認為重寫網路模組會很不好處理, 不過改⽤ Proxy 後協助後修改成本並沒有想像中⾼ TCP
原本選⽤ Unity 主要是 JavaScript ⼤多必要套件無法使⽤, 不過使⽤ WebAssembly 後效果雖不好但仍能解決問題 WASM
過程中調整次數最多的是 JavaScript 的部分, 連線模組的設計到複雜結構的管理才讓我們從 JavaScript 開始轉到 TypeScript 上, 並且想辦法解耦來改善協作 JS
Lib
THANKS