基于 socket.io 实现实时你画我猜游戏

前言

一直都想好好的学习运用node,一直都不知道要做什么东西,最近Java Web老师要求做个前端的应用,既然是前端应用,那肯定得是单页应用了,而且node很适用于高并发的实时应用,所以便选择node以及基于node的socket.io。

演示地址

  1. 实时画板+聊天室(GitHub)

  2. 你画我猜+聊天室(Demo | GitHub)

  3. 图片抢先看

解释

关于Socket.IO

Socket.IO 是基于node实现的套接字前端后端数据交互的库,通过它的封装,使用者可以很方便的开发,而且支持websocket/ajax 长轮询等方法,兼容低版本浏览器。

基本使用如下:

服务器端

var httpd = require('http').createServer(handler);
var io = require('socket.io').listen(httpd);
function handler(req,res) {

}
io.sockets.on('connection',function(socket){
//新的客户端连接
socket.on('login',(name,age)=>{
socket.emit('message',name+','+age);//触发客户端message事件
})
});
客户端

引入js文件

进行交互

var socket = io.connect(); //触发服务器端connection事件
socket.emit('login','moyu',20); //触发服务器端login事件
socket.on('message',function(msg){
alert(msg);
})

关于排行榜

利用了js的匿名立即执行函数进行模块化包装

var tops = (function () {
/*

  • _tops : 存放所有id,按照回答正确数倒序排列
  • idmap : 一个hash map结构,key为id,value为名字与回答正确数
  • n : 前n个,在toJSON调用
    */
    var _tops = [],idmap={},n=10;
    return {
    set : function (id,name,v) {
    if(this.isExists(id))//如果id已经存在则删除,防止出现重复id
    this.remove(id);
    // 找到按照v从大到小所对应的位置
    var i = _tops.findIndex(x=>{return idmap[x].v{
    if(i>=n) return false;
    arr.push({id:x,v:idmap[x].v,name:idmap[x].name});
    return true;
    });
    return arr;
    }
    }
    }());

    关于Bootstrap栅格

    .container{
    margin-right: auto;
    margin-left: auto;
    //防止最外层的.row元素左右扩展15px
    padding-left: 15px;
    padding-right: 15px;
    }

.col-3{
width: 30%;
}
.col-4{
width: 40%;
}
.col-9{
width: 90%;
}

/.../

.row{
/ 向外左右延伸15px /
margin-right: -15px;
margin-left: -15px;
}
/ 防止子元素为float,父元素的高度为0 /
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{
padding-left: 15px;
padding-right: 15px;
float:left;
}
HTML结构

                col-6                col-4        col-2

关于一栏(多栏)宽度固定,一栏自适应

  1. 圣杯布局

  2. 双飞翼

感受

...做单页应用真的需要挺大的心脏,而且需要较好的整体的架构,好在socket.io对websocket封装的不错,变成了面向消息的方式,代码结构相对更加清晰了些。

...不敢想象用Java做这种实时单页应用后端会有多么的「拗口」。最后推荐一个实时的更加优秀的游戏:slithe。

关键字:socket.io, node.js, JavaScript, socket

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部