這篇文章要跟大家介紹的文章內容是關於Websocket原理的深入理解,有很好的參考價值,希望可以幫助到有需要的朋友。
一、websocket與http
WebSocket是HTML5出的東西(協定),也就是說HTTP協定沒有變化,或者說沒關係,但HTTP是不支援持久連線的(長連接,循環連接的不算)
首先HTTP有 1.1
和 1.0
之說,也就是所謂的 keep-alive
,把多個HTTP請求合併為一個,但是 Websocket
其實是一個新協議,跟HTTP協議基本上沒有關係,只是為了兼容現有瀏覽器的握手規範而已,也就是說它是HTTP協議上的一種補充可以透過這樣一張圖來理解
有交集,但並不是全部。
另外Html5是指的一系列新的API,或者說新規範,新技術。 Http協定本身只有1.0和1.1,跟Html本身沒有直接關係。 。通俗來說,你可以用HTTP協定傳輸非Html數據,就是這樣=。 =
再簡單來說,層級不一樣。
二、Websocket是什麼樣的協議,具體有什麼優點
首先,Websocket是一個持久化的協議,相對於HTTP這種非持久的協議來說。簡單的舉例吧,用目前應用比較廣泛的PHP生命週期來解釋。
HTTP的生命週期透過 Request
來界定,也就是一個 Request
一個 Response
,那麼在 HTTP1.0
中,這次HTTP請求就結束了。
在HTTP1.1中進行了改進,使得有一個keep-alive,也就是說,在一個HTTP連接中,可以發送多個Request,接收多個Response。但請記住 Request = Response
, 在HTTP中永遠是這樣,也就是說一個request只能有一個response。而且這個response也是被動的,不能主動發起。
教練,你BB了這麼多,跟Websocket有什麼關係呢? _(:з”∠)_好吧,我正準備說Websocket呢。 。
首先Websocket是基於HTTP協定的,或者說借用了HTTP的協定來完成一部分握手。
首先我們來看個典型的 Websocket
握手(借用Wikipedia的。)
GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13Origin: http://example.com
熟悉HTTP的童鞋可能發現了,這段類似HTTP協定的握手請求中,多了幾個東西。我會順便講解下作用。
Upgrade: websocketConnection: Upgrade
這就是Websocket的核心了,告訴 Apache
、 Nginx
等伺服器:注意啦,我發起的是Websocket協議,快點幫我找到對應的助理處理~不是那個老土的HTTP。
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13
首先, Sec-WebSocket-Key
是一個 Base64 encode
的值,這個是瀏覽器隨機產生的,告訴伺服器:泥煤,不要忽悠窩,我要驗證尼是不是真的是Websocket助理。
然後, Sec_WebSocket-Protocol
是使用者定義的字串,用來區分同URL下,不同的服務所需的協定。簡單理解:今晚我要服務A,別搞錯~
最後, Sec-WebSocket-Version
是告訴伺服器所使用的 Websocket Draft
(協議版),在最初的時候,Websocket協定還在 Draft
階段,各種奇怪怪怪的協定都有,而且還有很多期奇奇怪怪不同的東西,什麼Firefox和Chrome用的不是一個版本之類的,當初Websocket協議太多可是一個大難題。 。不過現在還好,已經定下來啦~大家都使用的一個東西~ 脫水: 服務員,我要的是13歲的噢→_→
然後伺服器會回下列東西,表示已經接受到請求, 成功建立Websocket啦!
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat
這裡開始就是HTTP最後負責的區域了,告訴客戶,我已經成功切換協議啦~
Upgrade: websocketConnection: Upgrade
依然是固定的,告訴客戶端即將升級的是 Websocket
協議,而不是mozillasocket,lurnarsocket或shitsocket。
然後, Sec-WebSocket-Accept
這個則是經過伺服器確認,並且加密過後的 Sec-WebSocket-Key
。 伺服器:好啦好啦,知道啦,給你看我的ID CARD來證明行了吧。 。
後面的, Sec-WebSocket-Protocol
則是表示最終使用的協定。
至此,HTTP已經完成它所有工作了,接下來就是完全按照Websocket協定進行了。具體的協議就不在這闡述了。
——————技術解析部分完畢——————
你TMD又BBB了這麼久,那到底Websocket有什麼鬼用, http long poll
,或是ajax輪詢
不都可以實現即時訊息傳遞麼。
好好好,年輕人,那我們來講一講Websocket有什麼用。來給你吃點胡(蘇)蘿(丹)卜(紅)
#三、Websocket的作用
在講Websocket之前,我就順從帶下 long poll
和 ajax輪詢
# 的原理。
ajax輪詢
ajax輪詢的原理非常簡單,讓瀏覽器隔幾秒鐘就傳送一次請求,詢問伺服器是否有新資訊。
場景再現:
客戶端:啦啦啦,有沒有新資訊(Request)
服務端:沒有(Response)
客戶端:啦啦啦,有沒有新資訊(Request)
服務端:沒有。 。 (Response)
客戶端:啦啦啦,有沒有新資訊(Request)
服務端:你好煩啊,沒有啊。 。 (Response)
客戶端:啦啦啦,有沒有新訊息(Request)
服務端:好啦好啦,有啦給你。 (Response)
客戶端:啦啦啦,有沒有新訊息(Request)
服務端:。 。 。 。 。沒。 。 。 。沒。 。 。沒有(Response) —- loop
long poll
long poll
其實原理跟 ajax輪詢
差不多,都是採用輪詢的方式,不過採取的是阻塞模型(一直打電話,沒收到就不掛電話),也就是說,客戶端發起連線後,如果沒消息,就一直不回傳Response給客戶端。直到有訊息才返回,返回完之後,客戶端再次建立連接,周而復始。
場景再現:
客戶端:啦啦啦,有沒有新訊息,沒有的話就等有了才回傳給我吧(Request)
服務端:額。 。等待到有訊息的時候。 。來給你(Response)
客戶端:啦啦啦,有沒有新訊息,沒有的話就等有了才回傳給我吧(Request) -loop
從上面可以看出其實這兩種方式,都是在不斷地建立HTTP連接,然後等待服務端處理,可以體現HTTP協定的另一個特點,被動性。
何為被動性呢,其實就是,服務端無法主動聯絡客戶端,只能有客戶端發起。
簡單來說就是,伺服器是一個很懶的冰箱(這是個梗)(不會、不能主動發起連線),但是上司有指令,如果有客戶來,不管多麼累都要好好接待。
說完這個,我們再來說一說上面的缺陷(原諒我廢話這麼多吧OAQ)
從上面很容易看出來,不管怎麼樣,上面這兩種都是非常消耗資源的。
ajax輪詢 需要伺服器有很快的處理速度和資源。 (速度)long poll 需要有很高的並發,也就是說同時接待客戶的能力。 (場地大小)
所以 ajax輪詢
和 long poll
都有可能發生這種情況。
客戶端:啦啦啦啦,有新資訊麼?
服務端:月線正忙,請稍後再試(503 Server Unavailable)
客戶端:。 。 。 。好吧,啦啦啦,有新資訊呢?
服務端:月線正忙,請稍後再試(503 Server Unavailable)
客戶端:然後服務端在一旁忙的要死:冰箱,我要更多的冰箱!更多。 。更多。 。 (我錯了。。這又是梗。。)
言歸正傳,我們來說Websocket吧
透過上面這個例子,我們可以看出,這兩種方式都不是最好的方式,需要很多資源。
一種需要更快的速度,一種需要更多的’電話’。這兩種都會導致’電話’的需求越來越高。
喔對了,忘記說了HTTP還是一個狀態協定。
通俗的說就是,伺服器因為每天要接待太多客戶了,是個健忘鬼,你一掛電話,他就把你的東西全忘光了,把你的東西全丟掉了。你第二次還得再告訴伺服器一遍。
所以在這種情況下出現了,Websocket出現了。他解決了HTTP的這幾個難題。首先,被動性,當伺服器完成協定升級後(HTTP->Websocket),服務端就可以主動推送訊息給客戶端啦。所以上面的情景可以做如下修改。
客戶端:啦啦啦,我要建立Websocket協議,需要的服務:chat,Websocket協議版本:17(HTTP Request)
服務端:ok,確認,已升級為Websocket協定(HTTP Protocols Switched)
客戶端:麻煩你有訊息的時候推送給我噢。 。
服務端:ok,有的時候會告訴你的。
服務端:balabalabalabala
服務端:balabalabalabala
服務端:哈哈哈哈哈啊哈哈哈哈
服務端:笑死我了哈哈哈哈哈哈哈
就變成了這樣,只需要經過一次HTTP請求,就可以做到源源不絕的訊息傳送了。 (在程式設計中,這種設計叫做回調,即:你有信息了再來通知我,而不是我傻乎乎的每次跑來問你 )
這樣的協議解決了上面同步有延遲,而且還非常消耗資源的這種情況。那為什麼他會解決伺服器上消耗資源的問題呢?
其實我們所用的程式是要經過兩層代理的,也就是HTTP協定在Nginx等伺服器的解析下,然後再傳送給對應的Handler(PHP等)來處理。簡單來說,我們有一個非常快速的 接線員(Nginx)
,他負責把問題轉交給對應的 客服(Handler)
。
本身接線員基本上速度是足夠的,但是每次都卡在客服(Handler)了,老有客服處理速度太慢。 ,導致客服不夠。 Websocket解決了這樣一個難題,建立後,可以直接跟接線員建立持久連接,有訊息的時候客服想辦法通知接線員,然後接線員在統一轉交給客戶。
這樣就可以解決客服處理速度過慢的問題了。
同時,在傳統的方式上,要不斷的建立,關閉HTTP協議,由於HTTP是非狀態性的,每次都要重新傳輸 identity info
(鑑別資訊),來告訴服務端你是誰。
雖然接線員很快速,但是每次都要聽這麼一堆,效率也會有所下降的,同時還得不斷把這些資訊轉交給客服,不但浪費客服的處理時間,而且還會在網路傳輸中消耗過多的流量/時間。
但是Websocket只需要一次HTTP握手,所以說整個通訊過程是建立在一次連線/狀態中,也就避免了HTTP的非狀態性,服務端會一直知道你的訊息,直到你關閉請求,這樣就解決了接線員要重複解析HTTP協議,也要查看identity info的資訊。
同時由客戶主動詢問,轉換為伺服器(推送)有訊息的時候就發送(當然客戶端還是等主動發送訊息過來的。。),沒有訊息的時候就交給接線員(Nginx) ,不需要佔用本身速度就慢的客服(Handler)了
至於怎麼在不支援Websocket的客戶端上使用Websocket。 。答案是: 不能
但是可以透過上面說的 long poll
和 ajax 輪詢
來模擬類似的效果
相關推薦:
#html頁面中meta的作用以及頁面的快取與不快取設定的解析
以上是Websocket原理的深入理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

如何寫出乾淨高效的HTML5代碼?答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等,提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性,使用適當縮進和註釋。 3.優化性能,通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤,如標籤未閉合,確保代碼有效性。

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1)多媒體支持:H5的和元素簡化開發,提升用戶體驗。 2)離線存儲:WebStorage和IndexedDB允許離線使用,提升體驗。 3)性能優化:WebWorkers和元素優化性能,減少帶寬消耗。

HTML5代碼由標籤、元素和屬性組成:1.標籤定義內容類型,用尖括號包圍,如。 2.元素由開始標籤、內容和結束標籤組成,如內容。 3.屬性在開始標籤中定義鍵值對,增強功能,如。這些是構建網頁結構的基本單位。

HTML5是構建現代網頁的關鍵技術,提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等,增強了網頁結構和SEO。 2.支持多媒體元素和,無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性,簡化了驗證過程。 4.提供了離線和本地存儲功能,提升了網頁性能和用戶體驗。

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),