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
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
3
2k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
PicoRuby on Rails
makicamel
2
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
320
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Side Projects
sachag
455
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A better future with KSS
kneath
239
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Code Reviewing Like a Champion
maltzj
524
40k
The Invisible Side of Design
smashingmag
301
51k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
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