ajax與websocket的區別以及websocket經常使用使用方式

筆者近期在公司的項目中漸漸的接觸了一些比較高級的業務邏輯處理，其中比較有意思的地方就是前端接受後臺給與的推送問題。

通常前端與後端的交互主要是使用ajax進行異步操做調用交互，比較有趣的是這種交互方式通常都是單項交互的--

-及前端給後端發出請求後端接受請求後執行操做，即使前端能夠接受後端給予的返回值，可是與後端交互的主動權始終是放在前端手裏面。

而這樣就會遇到兩個有意思的問題--

1.前端若是調用的接口後端操做事件過長可能會致使返回操做響應時間過長，若是此時用戶單擊其餘頁面的時候就會致使返回操做沒法正常解決。

2.若是後端有什麼比較重要的問題須要推送給前端消息，這個時候前端是沒法接收到的。

面對這兩個問題的主流解決辦法分別爲
針對第一條咱們會給整個頁面作一個加載中的動畫而且鎖定住整個頁面從而強迫用戶等待到整個後端返回值結束後再將頁面解鎖。

而對於第二點咱們就要引入咱們今天所講的websocket這個概念。

一.什麼是websocket

websocket協議在2008年誕生，2011年成爲國際標準。全部瀏覽器都已經支持了。

它的最大特色就是，服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。

而他與常規的ajax最大的不一樣在於他能夠雙向接受和發送

一.websocket的簡單使用

對於咱們前端來講websocket的使用方式很是簡單，協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。咱們只須要本身定義一個ws服務就能夠了

代碼以下

var ws = new WebSocket("URL路徑");

ws.onopen = function(evt) { 
  console.log("打開成功"); 
  ws.send("Hello WORD!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("服務關閉");
};

 

如以上代碼所示咱們成功的建立了一個簡單的名字爲WS的websocket服務而且想後臺定義的路徑中發送了一條hello word的簡訊而且會在接收到推送的時候打印Received Message

在你的ws服務打開之後會在前端的內一直處於掛起狀態，因爲如今框架橫行，當你的框架或者說前端項目通過node編譯或者運行時候你能夠把ws服務寫在全部頁面的模板中就可讓項目只要處於被打開狀態就能一直運行

這個時候你須要寫接受推送消息便可，判斷後端給你推送消息的類型而且作出相應的操做，徹底不須要有ajax異步操做等待返回值或者返回值後本身操做時間太長而讓用戶等待過久的煩惱。而這一技術如今也廣泛的用在了

在線聊天室和一些須要接受推送提示的地方。 

不過值得注意的是通常狀況下若是推送量較爲大的話公司會選擇一些比較大的雲服務來作，好比筆者的公司就是使用的融雲服務來作的，等筆者有空的話會專門開一次坑講一講融雲服務的教程