socket.ioに基づいてリアルタイムであなたがゲームを描くことができます.

前言
ずっときちんと勉強したいです.nodeを使って、何をするべきか分かりません.最近Java Web先生は先端のアプリケーションを作るように要求しています.先端のアプリケーションなら、きっと1ページのアプリケーションが必要です.そして、nodeは高合併のリアルタイムアプリケーションに適していますので、node及びnodeに基づくsocket.ioを選択します.
プレゼンテーションアドレス

リアルタイムパネル+チャットルーム

あなたは私をかいて+チャットルームを当てます.

写真は先に

を見ます.
説明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);
})</code></pre> 
 <h3>     </h3> 
 <p>   js                </p> 
 <pre><code class="javascript">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;
        }
    }
}());</code></pre> 
 <h3>  <code>Bootstrap</code>  </h3> 
 <pre><code class="css">.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;
}</code></pre> 
 <p>HTML  </p> 
 <pre><code class="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></code></pre> 
 <h3>    （  ）    ，     </h3> 
 <ul> 
  <li><p>    </p></li> 
  <li><p>   </p></li> 
 </ul> 
 <h2>  </h2> 
 <p>...              ，            ，  <code>socket.io</code> websocket     ，          ，            。</p> 
 <p>...     Java                「  」。                ：slithe。</p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1176931162686304256"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">