一、前后端常用通訊方式

1. ajax

　　瀏覽器發(fā)起請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)，服務(wù)器不能主動(dòng)返回?cái)?shù)據(jù)，要實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)交互只能是ajax輪詢（讓瀏覽器隔個(gè)幾秒就發(fā)送一次請(qǐng)求，然后更新客戶端顯示。這種方式實(shí)際上浪費(fèi)了大量流量并且對(duì)服務(wù)端造成了很大壓力）。

2. websocket

websocket是HTML5出的東西（協(xié)議），是一種全雙工通信機(jī)制，兩端可以及時(shí)地互發(fā)事件，互發(fā)數(shù)據(jù)，相互通信，只需要瀏覽器和服務(wù)器建立一次連接，服務(wù)器就可以主動(dòng)推送數(shù)據(jù)到瀏覽器實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)更新。

　　原生websocket 支持到IE11 ，實(shí)際開發(fā)中，有比較著名的兩個(gè)庫socket.io（推薦）（英文版、中文版可能跟新不及時(shí)）和sockjs, 它們都對(duì)原始的API做了進(jìn)一步封裝和兼容IE，提供了更多功能，都分為客戶端和服務(wù)端的實(shí)現(xiàn)，實(shí)際應(yīng)用中，可以選擇使用。

　　websocket 的實(shí)現(xiàn)需要后端搭建一個(gè)WebSocket服務(wù)器，但是如果想搭建一個(gè)WebSocket服務(wù)器就沒有那么輕松了，因?yàn)閃ebSocket是一種新的通信協(xié)議，目前還是草案，沒有成為標(biāo)準(zhǔn)，市場(chǎng)上也沒有成熟的WebSocket服務(wù)器或者Library實(shí)現(xiàn)WebSocket協(xié)議，我們就必須自己動(dòng)手寫代碼去解析和組裝WebSocket的數(shù)據(jù)包。要這樣完成一個(gè)WebSocket服務(wù)器，估計(jì)所有的人都想放棄，幸好的是市場(chǎng)上有幾款比較好的開源庫供我們使用，比如 PyWebSocket,WebSocket-Node, LibWebSockets等等，這些庫文件已經(jīng)實(shí)現(xiàn)了WebSocket數(shù)據(jù)包的封裝和解析，我們可以調(diào)用這些接口，這在很大程度上減少了我們的工作量。

二、socket.io（推薦）

socket.io 是一個(gè)為實(shí)時(shí)應(yīng)用提供跨平臺(tái)實(shí)時(shí)通信的庫。socket.io 旨在使實(shí)時(shí)應(yīng)用在每個(gè)瀏覽器和移動(dòng)設(shè)備上成為可能，模糊不同的傳輸機(jī)制之間的差異。
socket.io 的名字源于它使用了瀏覽器支持并采用的 HTML5 WebSocket 標(biāo)準(zhǔn)，因?yàn)椴⒉皇撬械臑g覽器都支持 WebSocket ，所以該庫支持一系列降級(jí)功能：

Websocket

Adobe? Flash? Socket

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling

在大部分情境下，你都能通過這些功能選擇與瀏覽器保持類似長連接的功能。

優(yōu)點(diǎn)：跨平臺(tái)、兼容性好、具有降級(jí)功能、所有傳輸機(jī)制接口對(duì)外統(tǒng)一、自帶心跳。

缺點(diǎn)：要使用socket.io必須前后端都要用一套框架。

適用于：考慮更多兼容性，后端可以使用基于socket.io的框架的情景。（常見服務(wù)端實(shí)現(xiàn)框架有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>

服務(wù)器端示例代碼：

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 建立一個(gè)連接

var socket = io.connect('ws://127.0.0.1:3000');

socket.emit 發(fā)送一個(gè)事件給服務(wù)器端（發(fā)送數(shù)據(jù)）

socket.on 監(jiān)聽一個(gè)服務(wù)器端emit發(fā)送的事件（接收數(shù)據(jù)）

三種默認(rèn)的事件（客戶端和服務(wù)器都有）：connect 、message 、disconnect。

服務(wù)器端核心API

io.on 監(jiān)聽客戶端的連接事件

io.on('connection', function (socket) {
}

socket.emit 發(fā)送一個(gè)事件給客戶端（推送數(shù)據(jù)）

socket.on 監(jiān)聽一個(gè)客戶端emit發(fā)送的事件（接收數(shù)據(jù)）

聊天demo

websocket框架實(shí)現(xiàn)

常用的 Node 實(shí)現(xiàn)有以下幾種。

μWebSockets

Socket.IO

WebSocket-Node

websocketd

Java實(shí)現(xiàn)：

netty-socketio

　　socket.io設(shè)計(jì)的目標(biāo)是支持任何的瀏覽器，任何Mobile設(shè)備。目前支持主流的PC瀏覽器 (IE,Safari,Chrome,Firefox,Opera等)，Mobile瀏覽器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并簡(jiǎn)化了WebSocket API，統(tǒng)一了通信的API。它支持：WebSocket,Flash Socket,AJAX long-polling,AJAX multipart streaming,Forever IFrame,JSONP polling。
socket.io解決了實(shí)時(shí)的通信問題，并統(tǒng)一了服務(wù)端與客戶端的編程方式。啟動(dòng)了socket以后，就像建立了一條客戶端與服務(wù)端的管道，兩邊可以互通有無。

三、socket.io 中對(duì)websocket 的使用

　　1.服務(wù)端

　　io.on(‘connection’,function(socket));//監(jiān)聽客戶端連接,回調(diào)函數(shù)會(huì)傳遞本次連接的socket

　　io.sockets.emit(‘String’,data);//給所有客戶端廣播消息

　　io.sockets.socket(socketid).emit(‘String’, data);//給指定的客戶端發(fā)送消息

　　socket.on(‘String’,function(data));//監(jiān)聽客戶端發(fā)送的信息

　　socket.emit(‘String’, data);//給該socket的客戶端發(fā)送消息

　廣播消息

　//給除了自己以外的客戶端廣播消息
　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');
 });

客戶端發(fā)送

　socket.emit(‘group1’)，就可以加入group1分組；
　socket.emit(‘group2’)，就可以加入group2分組；

一個(gè)客戶端可以存在多個(gè)分組（訂閱模式）

　　踢出分組

　　socket.leave(data.room);

　　對(duì)分組中的用戶發(fā)送信息

　　//不包括自己
　　socket.broadcast.to('group1').emit('event_name', data);
　　//包括自己
　　io.sockets.in('group1').emit('event_name', data);

　　broadcast方法允許當(dāng)前socket client不在該分組內(nèi)

　　獲取連接的客戶端socket

　　io.sockets.clients().forEach(function (socket) {
    //.....
　　})

　　獲取分組信息

　　//獲取所有房間（分組）信息
　　io.sockets.manager.rooms
　　//來獲取此socketid進(jìn)入的房間信息
　　io.sockets.manager.roomClients[socket.id]
　　//獲取particular room中的客戶端，返回所有在此房間的socket實(shí)例
　　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但是服務(wù)端可以通過io.of(‘/some’)將其過濾出來。

另外，Socket.IO提供了4個(gè)配置的API：io.configure, io.set, io.enable, io.disable。其中io.set對(duì)單項(xiàng)進(jìn)行設(shè)置，io.enable和io.disable用于單項(xiàng)設(shè)置布爾型的配置。io.configure可以讓你對(duì)不同的生產(chǎn)環(huán)境（如devlopment，test等等）配置不同的參數(shù)。

2.客戶端

建立一個(gè)socket連接

var socket = io(“ws://103.31.201.154:5555”);

監(jiān)聽服務(wù)消息

socket.on('msg',function(data){
    socket.emit('msg', {rp:"fine,thank you"}); //向服務(wù)器發(fā)送消息
    console.log(data);
});

socket.on(“String”,function(data)) 監(jiān)聽服務(wù)端發(fā)送的消息 Sting參數(shù)與服務(wù)端emit第一個(gè)參數(shù)相同

監(jiān)聽socket斷開與重連。

socket.on('disconnect', function() {
    console.log("與服務(wù)其斷開");
});


socket.on('reconnect', function() {
    console.log("重新連接到服務(wù)器");
});

客戶端socket.on()監(jiān)聽的事件：
connect：連接成功
connecting：正在連接
disconnect：斷開連接
connect_failed：連接失敗
error：錯(cuò)誤發(fā)生，并且無法被其他事件類型所處理
message：同服務(wù)器端message事件
anything：同服務(wù)器端anything事件
reconnect_failed：重連失敗
reconnect：成功重連
reconnecting：正在重連
當(dāng)?shù)谝淮芜B接時(shí)，事件觸發(fā)順序?yàn)椋篶onnecting->connect；當(dāng)失去連接時(shí)，事件觸發(fā)順序?yàn)椋篸isconnect->reconnecting（可能進(jìn)行多次）->connecting->reconnect->connect。

　　

總結(jié)

以上是生活随笔為你收集整理的前后端常用通讯方式-- ajax 、websocket的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。