讓數據庫運行在瀏覽器裏？TiDB + WebAssembly 告訴你答案

做者：Max

一直以來都有個夢想：

但願有一個數據庫可以彈性擴展（分佈式）到成百上千節點的規模，易於學習和理解，能夠運行在私有云、公有云、Multi-Cloud、Kubernetes，也可以跑在嵌入式設備（好比樹莓派）上，更酷的是也可以直接運行在瀏覽器裏，並且不須要任何瀏覽器擴展（Extension），變成「口袋數據庫」，就像那部電影《蟻人》。

今天，這一切都變成了現實：TiDB 能夠直接運行在瀏覽器本地。打開瀏覽器，你能夠直接建立數據庫，對數據進行增刪改查。關掉瀏覽器，一切都消失了，乾淨綠色環保——

首先在筆記本瀏覽器打開 play.pingcap.com（這裏用的是 MacOS 上面的 Chrome，不肯定其它瀏覽器是否正常），可能須要幾秒來加載頁面，而後就能看到熟悉的 Shell 了。如今來試試幾個 SQL 語句吧！因爲 TiDB 基本兼容 MySQL 協議和語法，所以咱們能夠用熟悉的 MySQL 風格操做，以下圖所示：

<center>圖 1 在瀏覽器上運行 TiDB</center>

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

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

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

<center>圖 2 SQL 教程網站演示</center>

那麼在瀏覽器裏面運行數據庫還有哪些好處呢？

還記得你安裝配置數據庫的痛苦嗎？今後之後，每一個人隨時隨地均可以擁有一個數據庫，再也沒有痛苦的安裝過程，不再用痛苦的配置參數，隨時享受寫 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 團隊成員介紹整個項目的實現原理和後續改進工做，敬請期待！若是你已經等不及了，能夠在這裏直接看 源碼實現，祝你們玩得開心！