HTML5 Websocket

2022-01-11 19:00:58 字數 1699 閱讀 7913

基於tcp

客戶端與伺服器全雙工通訊

實現長連結、永續性連結

websocket是一種在單個tcp連線上進行全雙工通訊的協議,他能夠允許服務端主動向客戶端推送資料。

在 websocket api 中,瀏覽器和伺服器只需要完成一次握手,兩者之間就直接可以建立永續性的連線,並進行雙向資料傳輸。

(在 websocket api 中,瀏覽器和伺服器只需要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。)

實現推送技術

節省伺服器資源和頻寬,並且能夠更實時地進行通訊

傳統http協議要實現聊天室功能需要用到ajax輪詢

websockets協議實現聊天室功能很簡單。

輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對伺服器發出http請求,然後由伺服器返回最新的資料給客戶端的瀏覽器。返回之後,連結斷開。下次通訊需要重新傳送ajax請求了。

這種傳統的模式帶來很明顯的缺點。

ajax輪詢缺點:即瀏覽器需要不斷的向伺服器發出請求,然而http請求可能包含較長的頭部,其中真正有效的資料可能只是很小的一部分,顯然這樣會浪費很多的頻寬等資源。

ajax輪詢與websockets長連線 

websockets建立一次連結,長久通訊;

ajax輪詢需要每秒傳送一次請求。每請求一次都要三次握手。請求完畢就會斷開連結,每斷開一次都要四次揮手;啊哈哈哈。

效能來說,websocket更優。

一、建立

二、事件

open:當客戶端和websocket服務端連線成功的時候就會觸發

事件需要用addeventlistener繫結:比如open事件註冊示例

websocket.addeventlistener('open',function

(e));

客戶端接受到伺服器返回的資料時,會觸發message事件,所以我們監聽這個事件並註冊**函式就行:

1 websocket.addeventlistener('message',function

(event));

close就是連線斷開的時候出發的事件,同上繫結方法。

三、屬性

四、方法

send():客戶端主動向服務端傳送訊息

websocket.addeventlistener('open',function

(e));

五、其他api講解可以看mdn

綠色表示傳送,紅色表示接受的。

ps:圖中之所以長這樣(指請求和響應的文案都一樣),是因為我們借用官網的echo這個伺服器,是我們給他傳送啥,他就原封不動給我們返回啥。

html5 localStorage儲存

例項 重新整理值會增長,關掉瀏覽器,再開啟,值會在原基礎上增長 if localstorage pagecount else documen...

HTML5商城開發一 樓層滾動載入資料

對於樓層載入在以前只是個想法,從來沒實現過,剛好專案中碰到,再此總結一下 場景 html5,區域性商品列表資訊滾動 區域性滾動條 1 通過j...