腾讯云搭建多终端《你画我猜》Socket服务器

项目概述

Java课大作业,做一个小游戏,三人Git协作,不同终端,一个分支三个文件夹互不影响。Demo地址Github地址。先来目睹一下吧!

原理图

当玩家1在使用画笔在画板上进行绘图工作时,把当前这个玩家的绘图的数据传递到服务器,然后由服务器把该数据广播到其他玩家,其他玩家的画笔将根据这些数据自动在画板上进行绘制。因为是多端,所以得采用统一的Socket通信构架,经过协商,使用socket.io框架,客户端就可以统一socket.io-Javasocket.io-Android

Socket服务器端(数据交互)

服务器地址: http://119.28.67.19:3007/或者http://game.ycjcl.cc,采用了腾讯云的CentOS 7服务器(香港区2核 2GB配置),通过Nginx转发到NodejsSocket.io上,进行Websocket通信。

服务端关键代码:

// socket监听的事件
io.on('connection', function(socket) {
    /**
     * 画者事件 drawPath
     * 传入JSON:data
     * 例:
     *  {
            beginX: 68
            beginY: 182
            colorValue: "red"
            deviceHeight: 400
            deviceWidth: 500
            endX: 74
            endY: 181
            lineValue: 3
     *  }
     */
    socket.on('drawPath', function(data) {
        /**
         * 广播事件 showPath
         * 将画者事件接收的data数据,向连接到socket服务器的客户端(猜者)进行广播
         * 例:
         * socket.on('showPath', (data)=>{
                // 自定义画的方法
                this.drawing({json});
            });
         * 
         */
        socket.broadcast.emit('showPath', data);
    });



    // 监听客户端的socket.send(message)方法
    socket.on('message', function(message){
        // 画者生成一个随机的关键字
        if(message == 'getKeyWord'){
            INDEX = Math.floor(Math.random() * keyword.length);
            KEYWORD = keyword[INDEX];
            // 将生成的关键字发送到画者的客户端
            socket.emit('keyword', KEYWORD);

        // 画者清空画布 socket.send('clear')    
        }else if(message == 'clear'){
            // 猜者端清空画布
            console.log('进来了');
            socket.broadcast.emit('showBoardClearArea');
            // socket.emit('showBoardClearArea');
        }else if(message == 'success'){
            // 猜对后,清空画布,更换词
            io.sockets.emit('successClearArea');
        }
    }); 

    /**
     * 猜者提交 submit
     * 传入str: keyword
     * 
     * this.state.socket.emit('submit', keyword)}
     */
    socket.on('submit', function(keyword) {
        // 标志位
        var bingo = 0;
        // 提示
        var tip = '';
        // 如果
        console.log(keyword);
        if(keyword && KEYWORD){
            if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) {
                console.log('进来了2');
                bingo = 1;
            }else{
                tip = tips[INDEX];
            }
        }else{
            bingo = -1;
        }
        console.log(bingo);
        console.log(tip);

        // 将flag标志位传到连接的客户端
        socket.emit('answer', {
            bingo:bingo,
            tip:tip
        });
    });
    socket.on('disconnect', function() {});
});

传入数据: 因为是多端存在设备大小差异,经过讨论,根据比例进行计算,所以传入数据中有deviceHeightdeviceWidth

{
  "beginX":114,   // 起点坐标(int) X
  "beginY":143,      // 起点坐标(int) Y
  "colorValue":"red",  // 线的颜色(str)  (#FFA500,orange,rgb(255, 165, 0))
  "deviceHeight":400,  // 设备高度(int)  
  "deviceWidth":500,   // 设备宽度(int)  
  "endX":122,          // 终止坐标(int) X
  "endY":149,           // 终止坐标(int) Y
  "lineValue":3           // 线的宽度(int)
}

效果图

Web端

PC端

安卓

总结

通过腾讯云的Socket服务器代理各种socket请求,延迟时间较短,基本能达到本地localhost的同步速度,不同端之间的交互也能处理得当。开发过程中也遇到了很多问题,比如另外就Socket服务器框架没有达成共识,PC 端说socket自己用java写到本地了(这样WebAndroid就用不了了),然后又我提出用NodeJSsocket.io去统一写。Web端我用React+Webpack就连起来了,其它端有相应的SDK。服务器解决后,然后各个端开始欢快地写起来了。

最后在跨端交互时,也遇到了不少的问题(设备的比例,需要传入的值),然后就开始规定接口格式,每个参数的数据结构类型事例

之后,传到 Github 时也遇到了一些问题,由于其它人对Git的熟悉程度不一样,所以 push 是我在他们电脑给pushpull上去的。经过此次开发,锻炼的团队协助能力以及对新框架的学习能力。

相关推荐

如何在腾讯云上搭建一个PPT自动播放的服务器

【腾讯云的1001种玩法】搭建属于自己的Minecraft服务器

小小的激动,终于完成电脑和服务器的SOCKET通信了

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

解决iOS 版Safari 中浮动(float)导致页面右侧偏移的bug

长时间没写CSS代码就是生疏了啊!昨天在用ipad 调试最新的主题的时候遇到了一个坑,现在写在这里记录下——iOS 版Safari 中浮动(float)导致页面...

1886
来自专栏数据小魔方

think-cell chart系列20——使用建议及附加功能

今天是think-cell chart系列收尾篇——使用建议及附加功能。 由于think-cell chart图表插件是office平台的第三方插件,而且图表...

3574
来自专栏java思维导图

简洁概括,程序员的技能树

前端程序员 基础 HTML / CSS JavaScript DOM 中级篇 数据格式(如JSON、XML) RESTful API交互(如jQuery Aja...

3356
来自专栏Debian社区

你应该选择Cinnamon作为Linux桌面环境的十个理由

Cinnamon属于一套GNOME 3桌面fork,且希望实现GNOME桌面从未能实现的效果。除了对GNOME进行改进与扩展外,它还保留了独特且令人赞赏的特色。...

1185
来自专栏DeveWork

WordPress评论回复邮件样式美化教程

在上一篇文章《 免插件仅代码实现WordPress评论回复邮件 》中Jeff 提供了三种回复邮件样式类型。在你将需要的类型实现后,如果去测试一下,你会发现邮件的...

2116
来自专栏点滴积累

geotrellis使用(三十五)Cesium加载geotrellis TMS瓦片

前言 做任何事情都不是想象中的那么简单。好久没有更新技术博客了,跟最近瞎忙有很大关系,虽说是瞎忙也抽空研究了些技术。 主要是前端渲染,像原生的WebGL和Ces...

34910
来自专栏带你撸出一手好代码

把需求变化带来的代码修改成本降至最低的一种方法

为解决工作中一些繁琐的问题, 写了一个GUI程序, 操作界面是这个样子的 ? 这个程序的实现起来并不是非常的繁琐, 但在界面的交互操作上, 也不仅仅只是展示数据...

3297
来自专栏安恒信息

微软发出Word漏洞警报,网民防范带毒文档

如果最近有用户收到RTF格式的Word文档,一定不要轻易打开。根据微软的紧急安全公告显示,Word所有版本均存在一个高危漏洞,并已被黑客攻击,W...

2727
来自专栏快乐八哥

Single Page Application概览

第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加...

1797
来自专栏软件开发

前端机试面试题

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

1593

扫码关注云+社区