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異步操作等待返回值或者返回值后自己操作時間太長而讓用戶等待太久的煩惱。而這一技術現在也普遍的用在了

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

不過值得注意的是一般情況下如果推送量較為大的話公司會選擇一些比較大的云服務來做，比如筆者的公司就是使用的融云服務來做的，等筆者有空的話會專門開一次坑講一講融云服務的教程

總結

以上所述是小編給大家介紹的ajax與websocket的區別以及websocket常用使用方式 介紹，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com