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

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

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

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

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

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

而這樣就會(huì)遇到兩個(gè)有意思的問題--

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

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

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

而對(duì)于第二點(diǎn)我們就要引入我們今天所講的websocket這個(gè)概念。

一.什么是websocket

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

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

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

一.websocket的簡單使用

對(duì)于我們前端來說websocket的使用方式非常簡單，協(xié)議標(biāo)識(shí)符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。我們只需要自己定義一個(gè)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)建了一個(gè)簡單的名字為WS的websocket服務(wù)并且想后臺(tái)定義的路徑中發(fā)送了一條hello word的簡訊并且會(huì)在接收到推送的時(shí)候打印Received Message

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

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

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

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

總結(jié)

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