一、前后端常用通訊方式

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設計的目標是支持任何的瀏覽器，任何Mobile設備。目前支持主流的PC瀏覽器 (IE,Safari,Chrome,Firefox,Opera等)，Mobile瀏覽器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并簡化了WebSocket API，統一了通信的API。它支持：WebSocket,Flash Socket,AJAX long-polling,AJAX multipart streaming,Forever IFrame,JSONP polling。
socket.io解決了實時的通信問題，并統一了服務端與客戶端的編程方式。啟動了socket以后，就像建立了一條客戶端與服務端的管道，兩邊可以互通有無。

三、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("重新連接到服務器");
});

客戶端socket.on()監聽的事件：
connect：連接成功
connecting：正在連接
disconnect：斷開連接
connect_failed：連接失敗
error：錯誤發生，并且無法被其他事件類型所處理
message：同服務器端message事件
anything：同服務器端anything事件
reconnect_failed：重連失敗
reconnect：成功重連
reconnecting：正在重連
當第一次連接時，事件觸發順序為：connecting->connect；當失去連接時，事件觸發順序為：disconnect->reconnecting（可能進行多次）->connecting->reconnect->connect。

　　

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。