本文屬轉發，原文為：使用 Go 和 ReactJS 構建聊天系統
課程目標
在這個項目中，我們將考慮使用 Go 作為后端，React.JS 作為前端來構建一個聊天系統。
本課程將有助於你鞏固 Go 的並發概念和技術，提供開發更復雜的 Go 應用程序的實際經驗，希望你能夠輕松編寫常用的 Go 程序。
目的
我們將逐步構建這個聊天系統，以確保整個課程的學習保持輕松愉快。
在開始之前，我將介紹越來越多的高級 Go 語言技術以及它們如何與項目相關聯，到最后，你應該成為掌握編寫 Go 語言應用程序的程序員。
覆蓋的主題
- 初始化項目
- Go 語言 gorilla/websocket 包提供的 WebSockets
- Goroutines 和並發基礎
- 安全的並發通信
- 使用 ReactJS 進行前端開發
- 使用 Docker 部署應用
完全免費
這門課程的優勢就是完全免費，這意味着更多的人可以去學習。
聊天應用
在本課程結束時，你應該有一個看起來像樣的聊天應用。
我們將通過設置兩個項目來開始這個課程。一旦我們完成了枯燥的設置，就可以開始添加新功能並構建我們的應用程序，將看到一些積極的結果！
目標
在這部分課程結束后，你將掌握：
- 在
backend/目錄創建基本的 Go 應用 - 在
frontend/目錄創建基本的 ReactJS 應用
通過實現這兩個部分，你將能夠在接下來的幾節課程中為聊天系統添加一些功能。
准備工作
為了完成本系列教程，我們先要做以下的准備工作。
- 需要安裝
npm - 需要安裝
npx。這個可以輸入npm install -g npx安裝。 - Go 語言版本需要滿足 1.11+。
- 需要一個代碼編輯器來開發這個項目，例如 VS
設置 Go 后端項目
如果你熟悉 Go 的話，這一步非常簡單，我們首先要在項目目錄中創建一個名為 backend 的新目錄。
這個 backend 目錄將包含該項目的所有 Go 代碼。然后，我們將通過以下命令來初始化我們的項目：
1 $ cd backend 2 $ export GO111MODULE=on 3 $ go mod init github.com/TutorialEdge/realtime-chat-go-react
應該在 backend 目錄中使用 go modules 初始化我們的項目，初始化之后我們就可以開始寫項目並使其成為一個完整的 Go 應用程序。
- go.mod - 這個文件有點像 NodeJS 項目中的 package.json。它詳細描述了我們項目所需的包和版本，以便項目的構建和運行。
- go.sum - 這個文件用於校驗，它記錄了每個依賴庫的版本和哈希值。
注意 - 有關 Go modules 新特性的更多信息，請查看官方 Wiki 文檔: Go Modules
檢查 Go 項目
一旦我們在 backend/ 目錄中調用了 go mod init，我們將檢查一下一切是否按預期工作。
在 backend/ 目錄中添加一個名為 main.go 的新文件，並在其中添加以下 Go 代碼：
1 package main 2 3 import "fmt" 4 5 func main() { 6 fmt.Println("Chat App v0.01") 7 }
將該內容保存到 main.go 后，運行后會得到如下內容：
1 $ go run main.go 2 Chat App v0.01
如果成功執行，我們可以繼續設置我們的前端應用程序。
設置 React 前端項目
設置前端會稍微復雜一點，首先我們要在項目的根目錄中創建一個 frontend 目錄，它將容納我們所有的 ReactJS 代碼。
注意 - 我們將使用 facebook/create-react-app 來生成我們的 React 前端。
1 cd frontend
然后，你需要使用 create-react-app 包創建一個新的 ReactJS 應用程序。這可以用 npm 安裝：
1 $ npm install -g create-react-app
安裝完成后，你應該能夠使用以下命令創建新的 ReactJS 應用程序：
1 $ npx create-react-app .
運行這些命令之后，你應該可以看到我們的 frontend/ 目錄生成了基本的 ReactJS 應用程序。
我們的目錄結構應如下所示：
1 node_modules/ 2 public/ 3 src/ 4 .gitignore 5 package.json 6 README.md 7 yarn.lock
本地運行 ReactJS 程序
現在已經成功創建了基本的 ReactJS 應用程序，我們可以測試一下是否正常。輸入以下命令來運行應用程序：
1 $ npm start
如果一切正常的話，將會看到 ReactJS 應用程序編譯並在本地開發服務器上運行：http://localhost:3000
1 Compiled successfully! 2 3 You can now view frontend in the browser. 4 5 Local: http://localhost:3000/ 6 On Your Network: http://192.168.1.234:3000/ 7 8 Note that the development build is not optimized. 9 To create a production build, use yarn build.
現在已經擁有有一個基本的 ReactJS 應用程序了，我們可以在接下來的教程中進行擴展。
太棒了，現在已經成功設置了我們項目的前端和后端部分，接下來我們可以添加一些酷炫的新功能。