online edit web
1.0.0
從七月份以來我們對這個在線代碼編輯器了一次重構，並且在一個月之內完成了一個基礎版本，兩個月之後我們完成了編輯器的核心功能：協同。
在開始之前，先來貼一下相關的地址，如果對你有幫助，歡迎star：
前端倉庫地址
前端預覽地址（能直接運行React 項目）
前端預覽地址（能實現協同）
後端倉庫地址
因為本項目使用的是WebContainer，所以部署的必須在HTTPS 的情況下才能使用，然而Vercel 提供了HTTPS 的方式來部署，但是我們的後端服務沒有HTTPS， 如果用Vercel 部署的話就訪問不了我們的後端服務，所以要想體驗最好的效果我的建議是直接拉取本倉庫代碼然後直接啟動。
要編寫一個開源項目，首先最重要的肯定少不了技術選項了，前端這邊採用的是NextJs，而後端這邊採用的是NestJs。
首先我比較喜歡NextJs 的一個點就是它的文件路由（File-based Routing）系統簡單直觀，能夠根據文件夾結構自動生成路由，減少了我們手動配置的工作量，開箱即用了。
Next.js 集成了React 和Node.js 環境，開發者可以通過熟悉的React 語法快速上手，同時無需配置複雜的構建工具。在對後端依賴較小的項目，完全可以使用NextJs 來實現全棧項目，而不需要額外的後端來編寫。
其次就是對遠程比較友好，從我接觸過的人當中，還是有部分的朋友傾向於找一份遠程的工作的，在我面試過和工作的遠程崗位當中，基本使用的技術棧都是NextJS，這首先得益於它提供了服務端渲染的功能，對SEO 比較友好。另外一個點就是生態也很完善，例如tailwindcss、shadcn、zustand、swr 等等，他還提供了vercel 來免費部署，還有supabase 這些免費的數據庫。
至於為什麼選擇NestJs，應該就不用解釋了吧。
接下來我就和大家分享一下他的一些功能，以便大家對這個項目有一個全面的了解：
首頁的話就一個流星的動畫，加上後面的內容，整體還算協調。
點擊控制面板之後會進入到dashboard，如果沒有登錄的話會跳轉到登錄頁面：
這裡不需要額外註冊，直接獲取驗證碼，沒有賬號的話會直接註冊一個新的。
進入到控制面板，這裡我們可以選擇創建項目或者創建一個協同文檔：
在這裡提供了多種不同的框架來進行初始化，除了使用原有的模板之外，我們也可以直接導入本地的代碼來進行開發和編輯：
這裡有個頭像還挺好看的，我很喜歡：
點擊創建之後我們會進入到這樣的一個頁面，首先左邊是一個文件欄，整體佈局跟vscode 一樣，下面的是控制台，在這裡我們可以直接執行npm 和pnpm 的一些命令，還有一些NodeJs 的命令，
現在我們就是給這個項目執行pnpm 來安裝了相關的依賴包，並執行了pnpm dev來把這些項目啟動了起來：
除了文件樹之外，我們還提供了跟Vscode 差不多的功能，文件搜索：
還可以分屏編寫：
在這裡我們還可以切換編輯器的主題，在這裡提供了多個主題可以選擇：
這回我們要回到了我們的核心功能：協同編輯上了，首先要到dashboard 控制面板上創建一個文檔：
創建完成之後你會看到這樣的效果：
點擊分享文檔，可以分享該文檔給其他的朋友來一起編輯：
最終協同編輯的效果：
關於協同編輯這塊，就來分享一下這前後端所涉及到的技術棧吧
前端
y-monaco: 將Yjs 的實時協作功能與Monaco Editor 集成,提供了默認的協同編輯數據同步與協同ui 效果.
y-websocket: Yjs 的WebSocket 適配器，提供實時數據同步功能，允許多個客戶端通過WebSocket 進行協作編輯。
yjs: 高性能的CRDT 框架，支持實時協作和離線編輯，通過共享類型自動合併變更處理衝突，適用於大型文檔和無限用戶的場景。
perfect-cursors: 提供平滑的鼠標移動效果.
後端
y-websocket：yjs 封裝了協同邏輯
y-mongodb-provider：持久化存儲
感謝所有為這個項目做出貢獻的人！
如果該項目對你有幫助或者對這個項目感興趣，歡迎Star️️️
最後再來提一些這兩個開源項目，它們都是我們目前正在維護的開源項目：
在線代碼協同編輯器
前端腳手架create-neat
如果你想參與進來開發或者想進群學習，可以添加我微信yunmz777 ，後面還會有很多需求，等這個項目完成之後還會有很多新的並且很有趣的開源項目等著你。
