Socket.IO簡易チャットルームを実現

Socket.IO紹介
公式ドキュメントhttps://socket.io/docs/
Socket.ioは、Webソケットのリアルタイム通信をブラウザ間でサポートするJSです.インタフェースを簡素化し、操作を容易にするだけでなく、WebSocketをサポートしていないブラウザではAjax接続に自動的に低下し、互換性を最大限に保証します.すべてのブラウザとモバイルデバイスがリアルタイムで通信できるように、通信メカニズムを統一することを目標としています.Socket.ioは実際にWebSocketの親ですSocket.ioはWebSocketやポーリングなどのメソッドをカプセル化し,状況に応じてメソッドを選択して通信する.Socket.ioは、WebSocketおよびPollingメカニズム、および他のリアルタイム通信方式を汎用インタフェースにカプセル化し、これらのリアルタイムメカニズムに対応するコードをサービス側で実現した.つまりWebSocketはSocketだけですioはリアルタイム通信のサブセットを実現し、Socket.ioはPollingの通信メカニズムを実現しましたか?

 Adobe Flash Socket
    PC       Socket  ，              ，  W3C   ，        。  ，                。
 AJAX Long Polling
           ，                        。
 AJAX multipart streaming
  XMLHttpRequest             multi-part  ，AJAX                （    ），            ，        HTTP        ，                  。
 Forever Iframem
    Iframe             iframe  ，    src            Servlet  。        ，Servlet         Script  ，       JS  ，iframe       script  ，            。                    HTML      ，                 ，  iframe             。
 JSONP Polling
 JSONP     HTTP    ，      JSONP       

チャットルーム実装
サーバ側:

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(8080);

app.get('/chat3',(req,res) => {
	res.sendFile(__dirname + '/www/chat3.html')
})
app.get('/chat4',(req,res) => {
	res.sendFile(__dirname + '/www/chat4.html')
})

io.on('connection', (socket) => {
	console.log('           ')
	//        
	socket.on('message',(data) => {
		console.log(data)
		//        
		io.emit('message',data);
	})
	//    
	socket.on('disconnect', () => {
        console.log('     ...');
    });
})

クライアント:

    
    
    
    


    

    Send
    
        var socket = io();
        $('button').click(() => {
            //    
            socket.emit('message',{'messages':'  '+$('#m').val()});
            $('#m').val('')
        })
        //    
        socket.on('message', (data) => {
            console.log(data)
            $('#messages').append('<li>'+ data.messages +'</li>')
        })