一、前后端常用通訊方式
1. ajax
瀏覽器發起請求，服務器返回數據，服務器不能主動返回數據，要實現實時數據交互只能是ajax輪詢（讓瀏覽器隔個幾秒就發送一次請求，然后更新客戶端顯示。這種方式實際上浪費了大量流量並且對服務端造成了很大壓力）。
2. websocket
websocket是HTML5出的東西（協議），是一種全雙工通信機制，兩端可以及時地互發事件，互發數據，相互通信，只需要瀏覽器和服務器建立一次連接，服務器就可以主動推送數據到瀏覽器實現實時數據更新。
原生 websocket 支持到IE11 ，實際開發中，有比較著名的兩個庫socket.io（推薦）（英文版、中文版可能跟新不及時） 和 sockjs , 它們都對原始的API做了進一步封裝和兼容IE，提供了更多功能，都分為客戶端和服務端的實現，實際應用中，可以選擇使用。
websocket 的實現需要后端搭建一個WebSocket服務器，但是如果想搭建一個WebSocket服務器就沒有那么輕松了，因為WebSocket是一種新的通信協議，目前還是草案，沒有成為標准，市場上也沒有成熟的WebSocket服務器或者Library實現WebSocket協議，我們就必須自己動手寫代碼去解析和組裝WebSocket的數據包。要這樣完成一個WebSocket服務器，估計所有的人都想放棄，幸好的是市場上有幾款比較好的開源庫供我們使用，比如 PyWebSocket,WebSocket-Node, LibWebSockets等等，這些庫文件已經實現了WebSocket數據包的封裝和解析，我們可以調用這些接口，這在很大程度上減少了我們的工作量。
二、socket.io（推薦）
socket.io 是一個為實時應用提供跨平台實時通信的庫。socket.io 旨在使實時應用在每個瀏覽器和移動設備上成為可能，模糊不同的傳輸機制之間的差異。
socket.io 的名字源於它使用了瀏覽器支持並采用的 HTML5 WebSocket 標准，因為並不是所有的瀏覽器都支持 WebSocket ，所以該庫支持一系列降級功能：
-
Websocket
-
Adobe® Flash® Socket
-
AJAX long polling
-
AJAX multipart streaming
-
Forever Iframe
-
JSONP Polling
在大部分情境下，你都能通過這些功能選擇與瀏覽器保持類似長連接的功能。
-
優點：跨平台、兼容性好、具有降級功能、所有傳輸機制接口對外統一、自帶心跳。
-
缺點：要使用socket.io必須前后端都要用一套框架。
-
適用於：考慮更多兼容性，后端可以使用基於socket.io的框架的情景。（常見服務端實現框架有node.js,Netty-socket.io）
客戶端代碼示例：
<script src="/socket.io/socket.io.js"></script> <script> var socket = io('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>服務器端示例代碼：
var app = require('http').createServer(handler) var io = require('socket.io')(app); var fs = require('fs'); app.listen(80); function handler (req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading index.html'); } res.writeHead(200); res.end(data); }); } io.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });客戶端核心API
socket.io所有API詳見這兒
io.connect 建立一個連接
var socket = io.connect('ws://127.0.0.1:3000');
socket.emit 發送一個事件給服務器端（發送數據）
socket.on 監聽一個服務器端emit發送的事件（接收數據）
三種默認的事件（客戶端和服務器都有）：connect 、message 、disconnect。
服務器端核心API
io.on 監聽客戶端的連接事件
io.on('connection', function (socket) { }socket.emit 發送一個事件給客戶端（推送數據）
socket.on 監聽一個客戶端emit發送的事件（接收數據）
聊天demo
websocket框架實現
常用的 Node 實現有以下幾種。
-
µWebSockets
-
Socket.IO
-
WebSocket-Node
-
websocketd
Java實現：
-
netty-socketio
三、socket.io 中對 websocket 的使用
1.服務端
io.on(‘connection’,function(socket));//監聽客戶端連接,回調函數會傳遞本次連接的socket
io.sockets.emit(‘String’,data);//給所有客戶端廣播消息
io.sockets.socket(socketid).emit(‘String’, data);//給指定的客戶端發送消息
socket.on(‘String’,function(data));//監聽客戶端發送的信息
socket.emit(‘String’, data);//給該socket的客戶端發送消息
廣播消息
//給除了自己以外的客戶端廣播消息
socket.broadcast.emit("msg",{data:"hello,everyone"});
//給所有客戶端廣播消息
io.sockets.emit("msg",{data:"hello,all"});
分組
socket.on('group1', function (data) {
socket.join('group1');
});
socket.on('group2',function(data){
socket.join('group2');
});
客戶端發送
socket.emit(‘group1’)，就可以加入group1分組；
socket.emit(‘group2’)，就可以加入group2分組；
一個客戶端可以存在多個分組（訂閱模式）
踢出分組
socket.leave(data.room);
對分組中的用戶發送信息
//不包括自己
socket.broadcast.to('group1').emit('event_name', data);
//包括自己
io.sockets.in('group1').emit('event_name', data);
broadcast方法允許當前socket client不在該分組內
獲取連接的客戶端socket
io.sockets.clients().forEach(function (socket) {
//.....
})
獲取分組信息
//獲取所有房間（分組）信息
io.sockets.manager.rooms
//來獲取此socketid進入的房間信息
io.sockets.manager.roomClients[socket.id]
//獲取particular room中的客戶端，返回所有在此房間的socket實例
io.sockets.clients('particular room')
另一種分組方式
io.of('/some').on('connection', function (socket) {
socket.on('test', function (data) {
socket.broadcast.emit('event_name',{});
});
});
客戶端
var socket = io.connect('ws://103.31.201.154:5555/some')
socket.on('even_name',function(data){
console.log(data);
})
客戶端都鏈接到ws://103.31.201.154:5555 但是服務端可以通過io.of(‘/some’)將其過濾出來。
另外，Socket.IO提供了4個配置的API：io.configure, io.set, io.enable, io.disable。其中io.set對單項進行設置，io.enable和io.disable用於單項設置布爾型的配置。io.configure可以讓你對不同的生產環境（如devlopment，test等等）配置不同的參數。
2.客戶端
建立一個socket連接
var socket = io(“ws://103.31.201.154:5555”);
監聽服務消息
socket.on('msg',function(data){
socket.emit('msg', {rp:"fine,thank you"}); //向服務器發送消息
console.log(data);
});
socket.on(“String”,function(data)) 監聽服務端發送的消息 Sting參數與服務端emit第一個參數相同
監聽socket斷開與重連。
socket.on('disconnect', function() {
console.log("與服務其斷開");
});
socket.on('reconnect', function() {
console.log("重新連接到服務器");
});