未分類
6 4 月 2020

Go+websocket+protobuf 做的实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信吧~

Go+websocket+protobuf 做的实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信吧~

資深大佬 : sunshinev 10

Go+websocket+protobuf 做的实时在线交互聊天工具，特点是 Canvas+protobuf 格式通信吧~

Demo

http://chat.osinger.com/

介绍

项目打造了一个模拟太空的环境，通过 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

大佬有話說 (26)

  • 資深大佬 : FutherAll

    赞，回头看看

  • 資深大佬 : seamonster

    好玩，无限画布怎么实现的

  • 資深大佬 : Bridan

    怎么说呢 太妙了

  • 資深大佬 : Bridan

    @seamonster 我是大菠萝球 哈哈哈

  • 資深大佬 : Leigg

    全栈 np

  • 資深大佬 : AaronLiu00

    有意思

  • 主 資深大佬 : sunshinev

    @seamonster yeah 恭喜你问道了，我思考 2 天才想出来的解决方案~ 当时考虑了九宫格，但是后来用了很简单的方式！

    如下：
    如果物体向左侧移动，那么当粒子超出右边的边界的时候，将粒子的 X 坐标，移动到画布左侧

  • 主 資深大佬 : sunshinev

    @Leigg 用到了好多好玩的技术 Vue + Canvas+websocket+protobuf+golang 哈哈~

  • 主 資深大佬 : sunshinev

    @seamonster

    // 重要：实现无限 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;
    }

  • 資深大佬 : xiaoyu03

    我记得几年前 v2 上有人发过一个小蝌蚪聊天室跟你这个好像
    http://kedou.workerman.net/

  • 資深大佬 : seamonster

    @Bridan 哈哈哈哈哈，你不是去上课了吗

  • 資深大佬 : seamonster

    @xiaoyu03 哈哈哈哈哈，php 版本来了，php 是世界上________。

  • 資深大佬 : seamonster

    @sunshinev 解决方案对我来说超纲了，噗~

  • 主 資深大佬 : sunshinev

    @xiaoyu03 之前有 workman 版本的，实际上 workman 的也是根据别的改造的，我这个是全新写的~但是貌似人多了有点卡哈哈

  • 資深大佬 : iKun66

    好玩

  • 主 資深大佬 : sunshinev

    @Bridan 刚截了张图，上传了附言，发现你在里面哈哈

  • 資深大佬 : guolaopi

    火狐好卡。。。有解决方法吗。。

  • 資深大佬 : superliwei

    有意思。

  • 資深大佬 : Gakho

    有意思哈哈

  • 資深大佬 : KINGOD

    Chrome 如果安装了 Vimium 插件，需要添加规则，忽略 d 和 W 这俩键 (区分大小写)

  • 資深大佬 : dany813

    有意思

  • 主 資深大佬 : sunshinev

    @guolaopi 这个卡，是因为我的服务器是 1 核 2G1Mbps 带宽的，所以通讯起来我的带宽马上就满了。。

  • 資深大佬 : dark3212

    提个 bug(也许是 feature ？)，chrome 浏览器，按住移动键不松开，切换浏览器 tab 后松开按键，切回去就能看到一直在移动。

    还有一些敏感词需要过滤，不然很快就有麻烦上身了。

  • 主 資深大佬 : sunshinev

    @dark3212 我先把服务停了吧~毕竟的确很敏感

  • 資深大佬 : guolaopi

    @sunshinev 不是，火狐是卡的掉帧，谷歌儿移动很顺畅。不知道是不是火狐对 canvas 有负优化。。。

  • 主 資深大佬 : sunshinev

    @dark3212 敏感词过滤添加了~ 可以试试了哈哈## Demo

    http://chat.osinger.com/