ajax與websocket的區(qū)別以及websocket常用使用方式介紹

更新時間：2018年06月24日 09:14:53 作者：guoke360

這篇文章主要介紹了ajax與websocket的區(qū)別以及websocket常用使用方式介紹,需要的朋友可以參考下

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

一般前端與后端的交互主要是使用ajax進行異步操作調(diào)用交互，比較有趣的是這種交互方式一般都是單項交互的--

-及前端給后端發(fā)出請求后端接受請求后執(zhí)行操作，即便前端可以接受后端給予的返回值，但是與后端交互的主動權(quán)始終是放在前端手里面。

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

1.前端如果調(diào)用的接口后端操作事件過長可能會導(dǎo)致返回操作響應(yīng)時間過長，如果此時用戶單擊其他頁面的時候就會導(dǎo)致返回操作無法正常解決。

2.如果后端有什么比較重要的問題需要推送給前端消息，這個時候前端是無法接收到的。

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

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

一.什么是websocket

websocket協(xié)議在2008年誕生，2011年成為國際標準。所有瀏覽器都已經(jīng)支持了。

它的最大特點就是，服務(wù)器可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)器發(fā)送信息，是真正的雙向平等對話，屬于服務(wù)器推送技術(shù)的一種。

而他與常規(guī)的ajax最大的不同在于他可以雙向接受和發(fā)送

一.websocket的簡單使用

對于我們前端來說websocket的使用方式非常簡單，協(xié)議標識符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。我們只需要自己定義一個ws服務(wù)就可以了

代碼如下

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("服務(wù)關(guān)閉");
};

如以上代碼所示我們成功的創(chuàng)建了一個簡單的名字為WS的websocket服務(wù)并且想后臺定義的路徑中發(fā)送了一條hello word的簡訊并且會在接收到推送的時候打印Received Message

在你的ws服務(wù)打開以后會在前端的內(nèi)一直處于掛起狀態(tài)，由于現(xiàn)在框架橫行，當你的框架或者說前端項目經(jīng)過node編譯或者運行時候你可以把ws服務(wù)寫在所有頁面的模板中就可以讓項目只要處于被打開狀態(tài)就能一直運行

這個時候你需要寫接受推送消息即可，判斷后端給你推送消息的類型并且做出相應(yīng)的操作，完全不需要有ajax異步操作等待返回值或者返回值后自己操作時間太長而讓用戶等待太久的煩惱。而這一技術(shù)現(xiàn)在也普遍的用在了

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

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

總結(jié)

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