vue2.0開發聊天程序(五) 客戶端的webScoket

meteor199 發布于2019-08-20 14:44 / 3344人閱讀

摘要：先看看兼容性創建連接構造函數接收兩個參數這里的不能是或者而是對應的或者和是定義的兩種方案，類似于類似于協議名稱，是可選的。服務端和客戶端的協議名稱必須一致。協議有三種注冊協議，開放協議，自定義協議。限制以內就是在構造函數中選傳的參數。

愿天下所有的情侶，都是失散多年的兄妹
　　　　　　　　　　　　　　　　　　——好妹妹
webScoket是html5提出的一個協議，咱們用的http是無狀態的，且只能由客戶端向服務端發起，并且服務端返回結果之后就宣告此次連接結束。為了解決這種問題，出現了輪詢(polling)和comet技術。
輪詢：
客戶端設置一個間隔時間不斷的去向服務端發起請求，頻繁的查詢數據有沒有改動，這樣增加了請求次數，浪費流量和服務器資源。
comet：
又可以分為長輪詢和流技術，長輪詢就是指為需要更新的數據設置一個過期時間，過期了才去發起請求，這樣就不會很頻繁的去發起求情，但服務器仍然是被動的。流技術就是指客戶端使用一個隱藏的窗口(iframe)與服務器建立一個http長連接，服務器會不斷的更新狀態，保持連接的存活，這樣做的弊端是在高并發的情況下比較考驗服務器的性能。

而webScoket很不一樣，基于TCP協議，與http協議兼容、卻不會融入http協議，僅僅作為html5的一部分。與http協議不同的請求/響應模式不同，Websocket在建立連接之前有一個Handshake（Opening Handshake）【握手】過程，在關閉連接前也有一個Handshake（Closing Handshake）過程，
建立連接之后，雙方即可雙向通信。

以上參考自很多博客，這里就不一一貼出了。

webScoket的使用方法
在客戶端使用webScoket是非常簡單的一件事情。
先看看兼容性：

創建連接

var ws = new WebSocket("ws://localhost:3333");

構造函數接收兩個參數：
url：這里的url不能是http://或者https:// 而是對應的ws://或者wss:// ws和wss是webScoket定義的兩種url方案，ws類似于http wss類似于https
protocols：協議名稱，是可選的。服務端和客戶端的協議名稱必須一致。協議有三種:注冊協議，開放協議，自定義協議。

webScoket的屬性
webScoket就仨屬性：

readyState
代表連接的狀態有以下四種： 0 表示未連接 1 連接已經建立 2 連接即將關閉 3 連接關閉或不可用

bufferedAmount
有時候需要檢查傳輸數據的大小，尤其是客戶端傳輸大量數據的時候。雖然send()方法會馬上執行，但數據并不是馬上傳輸。瀏覽器會緩存應用流出的數據，你可以使用bufferedAmount屬性檢查已經進入隊列但還未被傳輸的數據大小。這個值不包含協議框架、操作系統緩存和網絡軟件的開銷。

var THRESHOLD = 10240; //限制10k以內
if (ws.bufferedAmount < THRESHOLD) {
        ws.send("heheheheeheh");
    }

3.protocol：就是在構造函數中選傳的參數。

webScoket的事件
這里的事件，指的是webScoket的狀態open、message、error、close。

open
在握手完成是觸發，對應的回調函數是onopen，當打開后要做的操作在onopen中添加

ws.onopen = function () {
    console.log("連接成功");
}

message
當消息被接收時就會觸發此事件，對應的回調是onmessage,webScoket消息機制只支持字符串和二進制(blob和ArrayBuffer)

ws.onmessage = function(res) { // res為接收到的數據
    console.log(res)
}

error：
如果發生意外的失敗會觸發error事件，相應的函數稱為onerror,錯誤會導致連接關閉，同時觸發關閉事件。

ws.onerror = function(e) { // e為錯誤信息
    console.log("WebSocket Error: " , e);
};

4.close
close：當連接關閉的時候觸發的時間，對用一個onclose方法。

ws.onclose = function(e) { // e為關閉的原因
    console.log("Connection closed", e);
};

webScoket的方法
就倆方法send和close。

send
用于向服務端發送一條消息，需要注意的是，此方法應該在onopen事件的回調中執行，因為連接打開之后才能進行數據的傳輸。只接收一個參數，就是你要傳輸的數據。

    ws.send("你是狗吧？"); // 記得放在onopen方法里面

close
關閉連接，如果連接已經關閉了那就什么都不會做。接收兩個參數code、reason

code： 狀態碼，如果不傳默認就是1000 表示正常關閉 狀態碼參考https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
reason： 關閉的原因

ws.close(1000,"沒事關一下");

以上客戶端的webScoket就介紹完了。真正復雜的是服務端的webScoket，這個還在研究中。下一節再說。

GPU云服務器云服務器 vue2.0 cdn 服務器和客戶端的差別云視頻客戶端的服務器地址云平臺服務器和客戶端的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81882.html

vue2.0開發聊天程序(六) 服務端的webScoket

大吉大利，今晚吃雞！　　　　　　　　　　　　　　　　　　　- PUBG 時隔多日，終于再次拾起這個拖了很久的項目。并不是因為沒時間，也不是因為這個項目對于我來說有多困難，就是一個字————懶。此項目的后臺，當然是選擇node.js來實現。作為一個前端，node.js比起java、php簡單多了。 node支持的webSocket 在npm中有很多支持webSocket的模塊，包括socket.io...

hiyayiji 2019-08-22 11:06 評論0 收藏0
坑系列之阿里SLB上使用Webscoket

摘要：最終獲得一個鏈接，里面有這樣的描述如何在阿里云負載均衡上啟用支持無需配置，當選用監聽時，默認支持無加密版本協議協議當選擇監聽時，默認支持加密版本的協議協議。詳細參見如何使用負載均衡性能保障型實例。 Websocket是HTML5之后的一個新事物，可以方便的實現客戶端到服務端的長會話，特別適合用于客戶端需要接收服務端推送的場景。例如在線客服聊天，提醒推送等等。改變了以往客戶端只能通過輪詢...

1treeS 2019-07-25 14:12 評論0 收藏0
簡單又好用的聊天室技術——WebSocket

摘要：國際慣例，先上維基百科的解釋。維基百科上面是維基百科對的解釋，別問我如何解釋上面這段話，因為我也沒看懂，那么下面我用人話解釋一下吧僅僅是我的理解是一個協議，可以簡單看成是協議的一個補充協議，借助協議的基礎完成服務器主動與客戶端實時傳輸數據。現在，很多網站為了實現推送技術，所用的技術都是輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務...

Prasanta 2019-07-01 12:15 評論0 收藏0