Golang Go语言中 Go+websocket+protobuf 实现实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信
Golang Go语言中 Go+websocket+protobuf 实现实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信
Demo
介绍
项目打造了一个模拟太空的环境，通过 canvas 2d 来模拟了 3D 的视觉效果。
并且在该项目中使用了 protobuf 来进行前端和后端的通讯协议，这一点非常方便！
操作
- 项目使用传统
WASD按键来控制上下左右 - 眼睛可以跟随鼠标的位置进行转动
- 按下
space空格可以输入消息，按下回车发送消息 - 左上角按钮可以输入名称，点击空白处名称生效
运行
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
有意思的难点
这里列举几个在实现过程中，遇到的很有意思的问题
- 如何实现无限画布？
- 如何实现游戏状态同步？
相关链接
更多关于Golang Go语言中 Go+websocket+protobuf 实现实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html
赞，回头看看
更多关于Golang Go语言中 Go+websocket+protobuf 实现实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html
yeah 恭喜你问道了，我思考 2 天才想出来的解决方案~ 当时考虑了九宫格，但是后来用了很简单的方式！
如下：
如果物体向左侧移动，那么当粒子超出右边的边界的时候，将粒子的 X 坐标，移动到画布左侧
// 重要：实现无限 star ！这个地方要保证粒子的绘制范围 x,y 在 canvas 之内
if (p.x > canvas.width) {
p.x -= canvas.width;
} else if (p.x < 0) {
p.x += canvas.width;
}
if (p.y > canvas.height) {
p.y -= canvas.height;
} else if (p.y < 0) {
p.y += canvas.height;
}
提个 bug(也许是 feature ？)，chrome 浏览器，按住移动键不松开，切换浏览器 tab 后松开按键，切回去就能看到一直在移动。
还有一些敏感词需要过滤，不然很快就有麻烦上身了。
在Go语言中，结合WebSocket和Protobuf来实现一个实时在线交互聊天工具是一个既高效又先进的方案。以下是该方案的一些关键点及优势解析：
-
Go语言：以其简洁的语法和强大的并发处理能力，非常适合构建高性能的实时通信系统。通过goroutines和channel，Go能轻松处理大量并发连接。
-
WebSocket：作为全双工通信协议，WebSocket在建立连接后，服务器和客户端可以双向推送数据，无需反复建立连接，非常适合实时聊天场景。
-
Protobuf：Google开发的Protocol Buffers（简称Protobuf）是一种高效的序列化数据结构的方法，它支持多种编程语言，并且具有极小的序列化体积和快速的解析速度，非常适合实时通信中的数据交换。
-
Canvas：在前端使用Canvas可以创建丰富的图形和动画效果，提升用户体验。通过Canvas绘制聊天界面，可以实现动态表情、动画效果等，增强互动性。
-
Protobuf格式通信：使用Protobuf作为通信格式，可以显著减少数据传输量，提高通信效率。同时，Protobuf的定义文件（.proto）可以生成多种语言的代码，便于前后端数据格式的统一。
综上所述，该方案利用Go语言的并发优势、WebSocket的全双工通信特性以及Protobuf的高效序列化能力，结合Canvas的丰富前端表现，能够构建一个高性能、低延迟、易扩展的实时在线交互聊天工具。
