媒介

一向都想好好的进修运用node，一向都不知道要做什么东西，近来Java Web先生请求做个前端的运用，既然是前端运用，那一定得是单页运用了，而且node很适用于高并发的及时运用，所以便挑选node以及基于node的socket.io。

演示地点

• 及时画板+聊天室（GitHub）

• 你画我猜+聊天室（Demo | GitHub）

• 图片抢先看
  

诠释

关于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文件

<script src="socket.io/socket.io.js'></script>

举行交互

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<v;});
            i= i===-1 ? _tops.length : i;
            // id在i+1位置插进去至_tops
            _tops.splice(i,0,id);
            idmap[id] = {name:name,v:v};
        },
        isExists : function (id) {
            return idmap[id]!=null;
        },
        remove : function (id) {
            var i = _tops.indexOf(id);
            if(i!==-1) {
                _tops.splice(i, 1);
                delete idmap[id];
                return true;
            }
            return false;
        },
        get:function (id) {
            return idmap[id];
        },
        toJSON:function () {
            // JSON.stringify要领会隐式挪用该要领        
            var arr = [];
            _tops.every((x,i)=>{
                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构造

<main class='container'>
    <div class='row'>
        <div class='col-8'>
            <div class='row'>
                <div class='col-6'>
                    <p>col-6</p>
                </div>
                <div class='col-4'>
                    <div>col-4</div>
                </div>
            </div>
        </div>
        <div class='col-2'>
            <div>col-2</div>
        </div>
    </div>
</main>

关于一栏（多栏）宽度牢固，一栏自适应

• 圣杯规划

• 双飞翼

感觉

…做单页运用真的须要挺大的心脏，而且须要较好的团体的架构，幸亏socket.io对websocket封装的不错，变成了面向音讯的体式格局，代码构造相对越发清楚了些。

…不敢设想用Java做这类及时单页运用后端会有何等的「拗口」。末了引荐一个及时的越发优异的游戏：slithe。