The Go Programming Language
http://golang.org/
Go Playground
Go Projects
Revel Web Framework
sunshinev

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

  •  2
     
  •   sunshinev ·
    sunshinev · May 6, 2020 · 4457 views
    This topic created in 2206 days ago, the information mentioned may be changed or developed.

    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

    Supplement 1  ·  May 6, 2020

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

    92cfa685aefa10664b320de1b7075c881588752492.jpg

    Supplement 2  ·  May 6, 2020

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

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

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

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

    Have a nice day ~

    Supplement 3  ·  May 8, 2020

    全新升级,增加下能力

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

    Demo

    http://chat.osinger.com/

    d2139b33a9868d1f17a471201d1272371588868902.jpg

    Supplement 4  ·  May 13, 2020

    新项目,大家多多指点

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

    49836d9d63ccd6a3f347043556e1202a1589368122.jpg

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

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

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

    http://chat.osinger.com/
    sunshinev
        27
    sunshinev  
    OP
       May 13, 2020
    新项目,大家多多支持啊 https://sunshinev.github.io/go-sword-home/
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1172 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 97ms · UTC 23:18 · PVG 07:18 · LAX 16:18 · JFK 19:18
    ♥ Do have faith in what you're doing.