筆者近期在公司的項目中漸漸的接觸了一些比較高級的業務邏輯處理，其中比較有意思的地方就是前端接受後臺給與的推送問題。
一般前端與後端的交互主要是使用ajax進行異步操作調用交互，比較有趣的是這種交互方式一般都是單項交互的--
-及前端給後端發出請求後端接受請求後執行操作，即便前端可以接受後端給予的返回值，但是與後端交互的主動權始終是放在前端手裡面。
而這樣就會遇到兩個有意思的問題--
1.前端如果調用的接口後端操作事件過長可能會導致返回操作響應時間過長，如果此時用戶單擊其他頁面的時候就會導致返回操作無法正常解決。
2.如果後端有什麼比較重要的問題需要推送給前端消息，這個時候前端是無法接收到的。
面對這兩個問題的主流解決辦法分別為
針對第一條我們會給整個頁面做一個加載中的動畫並且鎖定住整個頁面從而強迫用戶等待到整個後端返回值結束後再將頁面解鎖。
而對於第二點我們就要引入我們今天所講的websocket這個概念。
一.什麼是websocket
websocket協議在2008年誕生，2011年成為國際標準。所有瀏覽器都已經支持了。
它的最大特點就是，服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。
而他與常規的ajax最大的不同在於他可以雙向接受和發送
一.websocket的簡單使用
對於我們前端來說websocket的使用方式非常簡單，協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。我們只需要自己定義一個ws服務就可以了
代碼如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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異步操作等待返回值或者返回值後自己操作時間太長而讓用戶等待太久的煩惱。而這一技術現在也普遍的用在了
在線聊天室和一些需要接受推送提示的地方。
不過值得注意的是一般情況下如果推送量較為大的話公司會選擇一些比較大的雲服務來做，比如筆者的公司就是使用的融雲服務來做的，等筆者有空的話會專門開一次坑講一講融雲服務的教程
閱讀更多 前端小學生 的文章
