作者：Max

一直以來我都有個夢想：

希望有一個資料庫能夠彈性擴充套件（分散式）到成百上千節點的規模，易於學習和理解，可以執行在私有云、公有云、Multi-Cloud、Kubernetes，也能夠跑在嵌入式裝置（比如樹莓派）上，更酷的是也能夠直接執行在瀏覽器裡，而且不需要任何瀏覽器擴充套件（Extension），變成「口袋資料庫」，就像那部電影《蟻人》。

今天，這一切都變成了現實：今天的 TiDB 可以直接執行在瀏覽器本地。開啟瀏覽器，你可以直接建立資料庫，對資料進行增刪改查。關掉瀏覽器，一切都消失了，乾淨綠色環保——

首先在筆記本瀏覽器開啟 play.pingcap.com（這裡用的是 MacOS 上面的 Chrome，不確定其它瀏覽器是否正常），可能需要幾秒來載入頁面，然後就能看到熟悉的 Shell 了。現在來試試幾個 SQL 語句吧！由於 TiDB 基本相容 MySQL 協議和語法，因此我們可以用熟悉的 MySQL 風格操作，如下圖所示：

是不是很酷？無痛體驗 SQL 的時代到了。

更酷的是，這一切都執行在瀏覽器本地，刪庫再也不用跑路了 ?

有了這些，那麼是時候給線上學習 SQL 教程的網站加點功能了，比如在文字教程時，同步執行 SQL 語句。這裡有個簡單的 演示：

那麼在瀏覽器裡面執行資料庫還有哪些好處呢？

還記得你安裝配置資料庫的痛苦嗎？從此以後，每個人隨時隨地都可以擁有一個資料庫，再也沒有痛苦的安裝過程，再也不用痛苦的配置引數，隨時享受寫 SQL 的快感。也許我們不再需要 indexdb 了，SQL 是更高階的 API，TiDB 使得「一次編寫、到處執行」變成了現實。

當然，你一定很好奇這一切是怎麼實現的：

• 首先要感謝 Go team 讓 Go 語言支援了 WebAssembly（Wasm），這是近期最讓我興奮的特性之一，它讓在瀏覽器裡執行 Go 語言編寫的應用程式成為了現實；

• 然後感謝 PingCAP 的開源分散式資料庫 TiDB。我們把 TiDB 編譯成 Wasm，在瀏覽器裡直接執行生成的 Wasm 檔案，這就使得在瀏覽器裡執行一個資料庫成為了現實。如果沒有記錯，TiDB 好像是 Go 語言編寫的第一個可以在瀏覽器裡面執行的 SQL 資料庫；

• 特別感謝參加 TiDB Hackathon 2019 的選手和大家各種有趣的想法，尤其感謝 Ti-cool 團隊，在他們的努力下這一切變成了現實，該專案獲得了 Hackathon 二等獎，現場評委團老師們也感到眼前一亮，對它的快速落地充滿了期待！​

“TiDB-Wasm 極大降低了使用者體驗 TiDB 能力和初步驗證 SQL 相容性的門檻，使用體驗就像 golang playground 一樣流暢，Wasm 的出現也為 TiDB 檔案中心的建設提出了新的思路，也許不久的將來，TiDB 使用者可以像 golang 一樣，在閱讀檔案的同時，就能夠在頁面上嘗試實際操作的體驗。我們也期待 Wasm 能夠持續發展，實現 TiKV 的沙箱化執行，提供更貼近真實執行場景的 playground，甚至在自動化運維管理方向上貢獻更新奇思路。”

——李凱（美團 | 資料庫團隊負責人）

“剛看到這個專案的時候真的眼前一亮，這是一個非常酷的創意，而且真的對 DBA 運維管理 TiDB 有非常大的幫助，個人強烈希望這個專案能儘快落地支援！

目前我們公司使用 TiDB 時，有很大一部分是由現在業務改造接入，但是面臨的一個很重要的問題是 應用原來都是基於 MySQL 開發，雖然 TiDB 在 SQL 語法相容上做了很多的工作，但是仍然未能 100% 覆蓋，所以業務切換前我們都必須要進行 SQL 語法相容性測試及資料準確性校驗。由於 TiDB 的部署都是線上上伺服器，基於資料安全，我們的生產和辦公網環境是隔離的，要實現上面的需求，目前我們有如下幾種方式：a) 研發同學自己寫指令碼連線檢視；b)DBA 登入叢集協助驗證；c)開發專用查詢平臺支援。目前這這幾種方式都不夠安全且效率低下。隨著我們維護的 TiDB 叢集越來越多，DBA 的對這種低效工作不堪其煩，急需相關工具支援，而 TiDB-Wasm 無疑會解決這種問題，所以希望官方能夠重視這個專案，並儘快落地實現。”

——於伯偉（58集團 | 資料庫高階經理）

“Wasm 是一個神奇的技術，也許誕生初期的目的只是為瞭解決 js 執行速度以及其他語言如何操作 html 的問題，但現在大家在用這種技術廣泛嘗試各種可能。TiDB-Wasm 就是一個很好的嘗試，不僅大幅度降低了新人使用 TiDB 的難度、也給檔案展示提供了神奇的操作環境、還能大幅度降低應用開發者本機除錯環境的構建難度。相信這個思路能給其他服務端的軟體一個很好的啟發。”

——李道兵（京東雲 | 高階總監）

“很多使用者希望初步瞭解 TiDB 但是苦於找不到簡單即用的線下環境，這導致他們還未入門就已經放棄。TiDB-Wasm 有望徹底解決這個問題。基於 TiDB-Wasm，使用者可以方便的開啟 session 來探索 TiDB 的特性和功能，除錯 TiDB 的行為，以及對比 TiDB 與 MySQL 等資料庫在 SQL 語法、加鎖行為、事務隔離等級等細節上的差異，從而幫助使用者更深入的理解 TiDB。對官方而言，甚至可以把路由、計算、儲存層的擴容縮容、遷移等最佳實踐整合到該平臺並視覺化該過程，從而給使用者更真實、直觀的感受。這將是一款令人激動的產品，它將促進 TiDB 社群更加繁榮，也將讓所有 TiDB 使用者受益！”

——趙應鋼（美團點評 | 分散式資料庫平臺開發和運維負責人，研究員）

“TiDB-Wasm 這個專案成功地將 TiDB 移植到了 Wasm，證明瞭 TiDB 編譯到 Wasm 的可行性，同時也反映了 WebAssembly 已走向成熟，相信後面會有更多專案移植到瀏覽器裡執行。目前專案還處於 demo 階段，後續如果將專案繼續落地，在上面新增更多功能，比如使用 indexedDB 讓資料持久化，比如使用 webrtc 之類的技術讓不同瀏覽器中的 TiDB 可以進行 P2P 通訊，實現分散式瀏覽器資料庫，我非常期待這些實現。”

——侯聖文（貝殼找房 | 資料技術總監）

“TiDB-Wasm 讓我看到了 TiDB 的更多可能性。Wasm 本身是一個很有野心和想象力的技術，極大的擴充套件了前端的能力，可能大家都玩過類似 go playgound,rust playground 這類 web 的可互動體驗平臺，TiDB-Wasm 更進一步讓使用者甚至在離線環境下就能直接體驗，可謂最極致的易用。從實用角度上來看，除了能成為一個瀏覽器中的 REPL 供配合檔案快速體驗和實驗之外，TiDB-Wasm 甚至未來還可以作為 js 的 localStorage API 的很好的補充，為 js 生態提供一個 SQLite 之外的高效能本地資料庫……當然，在體驗上仍然有很多可以優化的地方，例如給 binary 瘦身，加入叢集模式支援等。總體來說這是一個很好玩的專案。”

——黃東旭（PingCAP | 聯合創始人兼 CTO）

“這個專案可以說集新穎性和實用性於一身，用一種很巧妙的方式，將資料庫這樣硬核的基礎架構和炫酷的前端領域搭上關係，接下來二者就可以碰撞出各種火花。最直接的用法是大大降低使用者體驗 TiDB 的成本，只需要一個瀏覽器頁面和等待下載 Binary 的時間，完全不需要安裝部署，就可以體驗 TiDB 基本的功能，無論是嵌入到檔案中快速執行例項還是作為 Playgroud 網站讓使用者自由發揮，都非常合適。再擴充套件想一下，TiDB 可以看作 MySQL 的替代品，那麼很多 MySQL 的教學網站也可以用這個 Wasm 來提升教學體驗。當然，Demo 中演示的 SQL 教學只是最基本的玩法，有了這個東西，我們可以說：恭喜前端圈有了一個 JS 版本的 MySQL。相信前端的同學能把它玩出花來。一句話總結：這絕對是一個叫好又叫座的專案。”

——申礫（PingCAP | Engineering VP）

接下來我們可以試試更多有趣的想法：

• 讓更多的線上 SQL 教程都可以直接執行。
• 讓 TiDB 執行在 Go Playground 上，或許需要 Go team 的幫助。
• 支援持久化資料庫，我們已經有了雲端計算、邊緣計算，為什麼不能有瀏覽器計算呢？
• ……

還有好多想法我們將在接下來的文章裡介紹。如果你有新的、有趣的想法，歡迎 聯絡我們。

下一篇文章將由 Ti-cool 團隊成員介紹整個專案的實現原理和後續改進工作，敬請期待！如果你已經等不及了，可以在這裡直接看 原始碼實現，祝大家玩得開心！

原文閱讀：pingcap.com/blog-cn/tid…