Go+websocket+protobuf 做的實時線上互動聊天工具

Demo

chat.osinger.com/

特色

1. 支援性別修改、並且有顏色替換
2. 支援敏感詞過濾
3. 支援姓名修改

介紹

通過canvas 2d來模擬了3D的視覺效果。

並且在該專案中使用了protobuf來進行前端和後端的通訊協議，這一點非常方便！

操作

1. 專案使用傳統WASD按鍵來控制上下左右
2. 眼睛可以跟隨滑鼠的位置進行轉動
3. 按下space 空格可以輸入訊息，按下回車傳送訊息
4. 左上角按鈕可以輸入名稱，點選空白處名稱生效

執行

go run main.go

該命令會啟動web-server作為靜態服務，預設80埠，如果需要修改埠，用下面的命令

go run main.go -web_server 8081

專案啟動預設websocket服務埠為9000埠，如果需要修改

go run main.go -socket_server 9001

注意：如果修改websocket埠，同時需要修改js裡面的socket埠

技術工具

前端 Vue+canvas+websocket+protobuf

後端 Golang+websocket+protobuf+goroutine

有意思的難點

這裡列舉幾個在實現過程中，遇到的很有意思的問題

1. 如何實現無限畫布？
2. 如何實現遊戲狀態同步？

相關連結

Canvas 基本用法

Protobuf Guide

Vue.js

本作品採用《CC 協議》，轉載必須註明作者和本文連結