V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
The Go Programming Language
http://golang.org/
Go Playground
Go Projects
Revel Web Framework
beego
sunshinev
V2EX  ›  Go 编程语言

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

  •  1
     
  •   sunshinev · 2020-05-06 15:34:45 +08:00 · 3051 次点击
    这是一个创建于 581 天前的主题,其中的信息可能已经有所发展或是发生改变。

    abc7178898c1ead114f64ec437cb41f81587469886.jpg

    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

    第 1 条附言  ·  2020-05-06 16:08:35 +08:00

    想不到刚发布后,这么多小伙伴在

    92cfa685aefa10664b320de1b7075c881588752492.jpg

    第 2 条附言  ·  2020-05-06 19:55:08 +08:00

    服务暂停哈,大家想体验的可以自己fork项目本地运行~

    因为目前缺少敏感词过滤模块,外加自己的演示服务器性能和带宽不足~所以暂停演示了~

    大家可以部署在自己服务器上玩

    有问题的话,咱们可以github issue提,也可以在这里提交~

    Have a nice day ~

    第 3 条附言  ·  2020-05-08 00:35:02 +08:00

    全新升级,增加下能力

    1. 增加左侧工具栏,支持性别修改、并且有颜色替换
    2. 支持敏感词过滤
    3. 支持姓名修改
    4. 背景色修改

    Demo

    http://chat.osinger.com/

    d2139b33a9868d1f17a471201d1272371588868902.jpg

    第 4 条附言  ·  2020-05-13 19:08:56 +08:00

    新项目,大家多多指点

    https://sunshinev.github.io/go-sword-home/

    49836d9d63ccd6a3f347043556e1202a1589368122.jpg

    27 条回复    2020-05-13 19:08:08 +08:00
    FutherAll
        1
    FutherAll  
       2020-05-06 15:38:56 +08:00
    赞,回头看看
    seamonster
        2
    seamonster  
       2020-05-06 15:45:20 +08:00
    好玩,无限画布怎么实现的
    Bridan
        3
    Bridan  
       2020-05-06 15:45:31 +08:00
    怎么说呢 太妙了
    Bridan
        4
    Bridan  
       2020-05-06 15:45:55 +08:00
    @seamonster 我是大菠萝球 哈哈哈
    Leigg
        5
    Leigg  
       2020-05-06 15:47:00 +08:00 via Android
    全栈 np
    AaronLiu00
        6
    AaronLiu00  
       2020-05-06 15:47:17 +08:00
    有意思
    sunshinev
        7
    sunshinev  
    OP
       2020-05-06 15:48:45 +08:00
    @seamonster yeah 恭喜你问道了,我思考 2 天才想出来的解决方案~ 当时考虑了九宫格,但是后来用了很简单的方式!

    如下:
    如果物体向左侧移动,那么当粒子超出右边的边界的时候,将粒子的 X 坐标,移动到画布左侧
    sunshinev
        8
    sunshinev  
    OP
       2020-05-06 15:49:30 +08:00
    @Leigg 用到了好多好玩的技术 Vue + Canvas+websocket+protobuf+golang 哈哈~
    sunshinev
        9
    sunshinev  
    OP
       2020-05-06 15:50:30 +08:00
    @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
        10
    xiaoyu03  
       2020-05-06 15:54:08 +08:00
    我记得几年前 v2 上有人发过一个小蝌蚪聊天室跟你这个好像
    http://kedou.workerman.net/
    seamonster
        11
    seamonster  
       2020-05-06 15:55:23 +08:00
    @Bridan 哈哈哈哈哈,你不是去上课了吗
    seamonster
        12
    seamonster  
       2020-05-06 15:58:10 +08:00
    @xiaoyu03 哈哈哈哈哈,php 版本来了,php 是世界上________。
    seamonster
        13
    seamonster  
       2020-05-06 16:00:16 +08:00
    @sunshinev 解决方案对我来说超纲了,噗~
    sunshinev
        14
    sunshinev  
    OP
       2020-05-06 16:00:34 +08:00
    @xiaoyu03 之前有 workman 版本的,实际上 workman 的也是根据别的改造的,我这个是全新写的~但是貌似人多了有点卡哈哈
    iKun66
        15
    iKun66  
       2020-05-06 16:02:16 +08:00
    好玩
    sunshinev
        16
    sunshinev  
    OP
       2020-05-06 16:18:16 +08:00
    @Bridan 刚截了张图,上传了附言,发现你在里面哈哈
    guolaopi
        17
    guolaopi  
       2020-05-06 17:13:42 +08:00
    火狐好卡。。。有解决方法吗。。
    superliwei
        18
    superliwei  
       2020-05-06 17:46:57 +08:00
    有意思。
    Gakho
        19
    Gakho  
       2020-05-06 17:50:51 +08:00
    有意思哈哈
    KINGOD
        20
    KINGOD  
       2020-05-06 17:58:44 +08:00
    Chrome 如果安装了 Vimium 插件,需要添加规则,忽略 d 和 W 这俩键 (区分大小写)
    dany813
        21
    dany813  
       2020-05-06 18:29:48 +08:00
    有意思
    sunshinev
        22
    sunshinev  
    OP
       2020-05-06 19:28:50 +08:00
    @guolaopi 这个卡,是因为我的服务器是 1 核 2G1Mbps 带宽的,所以通讯起来我的带宽马上就满了。。
    dark3212
        23
    dark3212  
       2020-05-06 19:37:09 +08:00
    提个 bug(也许是 feature ?),chrome 浏览器,按住移动键不松开,切换浏览器 tab 后松开按键,切回去就能看到一直在移动。

    还有一些敏感词需要过滤,不然很快就有麻烦上身了。
    sunshinev
        24
    sunshinev  
    OP
       2020-05-06 19:49:05 +08:00
    @dark3212 我先把服务停了吧~毕竟的确很敏感
    guolaopi
        25
    guolaopi  
       2020-05-07 10:01:27 +08:00
    @sunshinev 不是,火狐是卡的掉帧,谷歌儿移动很顺畅。不知道是不是火狐对 canvas 有负优化。。。
    sunshinev
        26
    sunshinev  
    OP
       2020-05-08 00:35:26 +08:00
    @dark3212 敏感词过滤添加了~ 可以试试了哈哈## Demo

    http://chat.osinger.com/
    sunshinev
        27
    sunshinev  
    OP
       2020-05-13 19:08:08 +08:00
    新项目,大家多多支持啊 https://sunshinev.github.io/go-sword-home/
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2614 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:56 · PVG 21:56 · LAX 05:56 · JFK 08:56
    ♥ Do have faith in what you're doing.