【转】WebSocket详解（一）：初步认识WebSocket技术
生活随笔
收集整理的這篇文章主要介紹了
【转】WebSocket详解（一）：初步认识WebSocket技术
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、前言HTML5規(guī)范在傳統(tǒng)的web交互基礎(chǔ)上為我們帶來了眾多的新特性，隨著web技術(shù)被廣泛用于web APP的開發(fā)，這些新特性得以推廣和使用，而websocket作為一種新的web通信技術(shù)具有巨大意義。 本文將帶您認識WebSocket。也可查看本文的下篇：《WebSocket詳解（二）：技術(shù)原理、代碼演示和應(yīng)用案例》。 2、系列文章本文是系列文章中的第1篇，本系列文章的大綱如下： ?
3、更多資料Web端即時通訊新手入門貼： 《新手入門貼：詳解Web端即時通訊技術(shù)的原理》 Web端即時通訊技術(shù)盤點請參見： 《Web端即時通訊技術(shù)盤點：短輪詢、Comet、Websocket、SSE》 關(guān)于Ajax短輪詢： 找這方面的資料沒什么意義，除非忽悠客戶，否則請考慮其它3種方案即可。 有關(guān)Comet技術(shù)的詳細介紹請參見： 《Comet技術(shù)詳解：基于HTTP長連接的Web端實時通信技術(shù)》 《WEB端即時通訊：HTTP長連接、長輪詢（long polling）詳解》 《WEB端即時通訊：不用WebSocket也一樣能搞定消息的即時性》 《開源Comet服務(wù)器iComet：支持百萬并發(fā)的Web端即時通訊方案》 更多WebSocket的詳細介紹請參見： 《WebSocket從入門到精通，半小時就夠！》 《新手快速入門：WebSocket簡明教程》 《理論聯(lián)系實際：從零理解WebSocket的通信原理、協(xié)議格式、安全性》 《八問WebSocket協(xié)議：為你快速解答WebSocket熱門疑問》 《Socket.IO介紹：支持WebSocket、用于WEB端的即時通訊的框架》 《socket.io和websocket 之間是什么關(guān)系？有什么區(qū)別？》 《Web端即時通訊實踐干貨：如何讓你的WebSocket斷網(wǎng)重連更快速？》 有關(guān)SSE的詳細介紹文章請參見： 《SSE技術(shù)詳解：一種全新的HTML5服務(wù)器推送事件技術(shù)》 更多WEB端即時通訊文章請見： http://www.52im.net/forum.php?mod=collection&action=view&ctid=15 4、什么是Socket？什么是WebSocket？對于第1次聽說WebSocket技術(shù)的人來說，兩者有什么區(qū)別？websocket是僅僅將socket的概念移植到瀏覽器中的實現(xiàn)嗎？ 我們知道，在網(wǎng)絡(luò)中的兩個應(yīng)用程序（進程）需要全雙工相互通信（全雙工即雙方可同時向?qū)Ψ桨l(fā)送消息），需要用到的就是socket，它能夠提供端對端通信，對于程序員來講，他只需要在某個應(yīng)用程序的一端（暫且稱之為客戶端）創(chuàng)建一個socket實例并且提供它所要連接一端（暫且稱之為服務(wù)端）的IP地址和端口，而另外一端（服務(wù)端）創(chuàng)建另一個socket并綁定本地端口進行監(jiān)聽，然后客戶端進行連接服務(wù)端，服務(wù)端接受連接之后雙方建立了一個端對端的TCP連接，在該連接上就可以雙向通訊了，而且一旦建立這個連接之后，通信雙方就沒有客戶端服務(wù)端之分了，提供的就是端對端通信了。我們可以采取這種方式構(gòu)建一個桌面版的im程序，讓不同主機上的用戶發(fā)送消息。從本質(zhì)上來說，socket并不是一個新的協(xié)議，它只是為了便于程序員進行網(wǎng)絡(luò)編程而對tcp/ip協(xié)議族通信機制的一種封裝。 websocket是html5規(guī)范中的一個部分，它借鑒了socket這種思想，為web應(yīng)用程序客戶端和服務(wù)端之間（注意是客戶端服務(wù)端）提供了一種全雙工通信機制。同時，它又是一種新的應(yīng)用層協(xié)議，websocket協(xié)議是為了提供web應(yīng)用程序和服務(wù)端全雙工通信而專門制定的一種應(yīng)用層協(xié)議，通常它表示為：ws://echo.websocket.org/?encoding=text HTTP/1.1，可以看到除了前面的協(xié)議名和http不同之外，它的表示地址就是傳統(tǒng)的url地址。 可以看到，websocket并不是簡單地將socket這一概念在瀏覽器環(huán)境中的移植，本文最后也會通過一個小的demo來進一步講述socket和websocket在使用上的區(qū)別。 5、WebSocket的通信原理和機制既然是基于瀏覽器端的web技術(shù)，那么它的通信肯定少不了http,websocket本身雖然也是一種新的應(yīng)用層協(xié)議，但是它也不能夠脫離http而單獨存在。具體來講，我們在客戶端構(gòu)建一個websocket實例，并且為它綁定一個需要連接到的服務(wù)器地址，當客戶端連接服務(wù)端的時候，會向服務(wù)端發(fā)送一個類似下面的http報文： 可以看到，這是一個http get請求報文，注意該報文中有一個upgrade首部，它的作用是告訴服務(wù)端需要將通信協(xié)議切換到websocket,如果服務(wù)端支持websocket協(xié)議，那么它就會將自己的通信協(xié)議切換到websocket,同時發(fā)給客戶端類似于以下的一個響應(yīng)報文頭： 返回的狀態(tài)碼為101，表示同意客戶端協(xié)議轉(zhuǎn)換請求，并將它轉(zhuǎn)換為websocket協(xié)議。以上過程都是利用http通信完成的，稱之為websocket協(xié)議握手(websocket Protocol handshake)，進過這握手之后，客戶端和服務(wù)端就建立了websocket連接，以后的通信走的都是websocket協(xié)議了。所以總結(jié)為websocket握手需要借助于http協(xié)議，建立連接后通信過程使用websocket協(xié)議。同時需要了解的是，該websocket連接還是基于我們剛才發(fā)起http連接的那個TCP連接。一旦建立連接之后，我們就可以進行數(shù)據(jù)傳輸了，websocket提供兩種數(shù)據(jù)傳輸：文本數(shù)據(jù)和二進制數(shù)據(jù)。 基于以上分析，我們可以看到，websocket能夠提供低延遲，高性能的客戶端與服務(wù)端的雙向數(shù)據(jù)通信。它顛覆了之前web開發(fā)的請求處理響應(yīng)模式，并且提供了一種真正意義上的客戶端請求，服務(wù)器推送數(shù)據(jù)的模式，特別適合實時數(shù)據(jù)交互應(yīng)用開發(fā)。 6、WebSocket技術(shù)出現(xiàn)之前，Web端實現(xiàn)即時通訊的方法有哪些？?6.1定期輪詢的方式客戶端按照某個時間間隔不斷地向服務(wù)端發(fā)送請求，請求服務(wù)端的最新數(shù)據(jù)然后更新客戶端顯示。這種方式實際上浪費了大量流量并且對服務(wù)端造成了很大壓力。 ? 6.2SSE（Server-Sent Event，服務(wù)端推送事件）SSE（Server-Sent Event，服務(wù)端推送事件）是一種允許服務(wù)端向客戶端推送新數(shù)據(jù)的HTML5技術(shù)。與由客戶端每隔幾秒從服務(wù)端輪詢拉取新數(shù)據(jù)相比，這是一種更優(yōu)的解決方案。 相較于WebSocket，它也能從服務(wù)端向客戶端推送數(shù)據(jù)。WebSocket能做的，SSE也能做，反之亦然，但在完成某些任務(wù)方面，它們各有千秋。關(guān)于SSE的介紹，即時通訊網(wǎng)將在稍后的文章中詳細介紹。 ? 6.3Comet技術(shù)Comet并不是一種新的通信技術(shù)，它是在客戶端請求服務(wù)端這個模式上的一種hack技術(shù)，通常來講，它主要分為以下兩種做法： （1）基于長輪詢的服務(wù)端推送技術(shù) 具體來講，就是客戶端首先給服務(wù)端發(fā)送一個請求，服務(wù)端收到該請求之后如果數(shù)據(jù)沒有更新則并不立即返回，服務(wù)端阻塞請求的返回，直到數(shù)據(jù)發(fā)生了更新或者發(fā)生了連接超時，服務(wù)端返回數(shù)據(jù)之后客戶端再次發(fā)送同樣的請求，如下所示： （2）基于流式數(shù)據(jù)傳輸?shù)拈L連接 通常的做法是在頁面中嵌入一個隱藏的iframe,然后讓這個iframe的src屬性指向我們請求的一個服務(wù)端地址，并且為了數(shù)據(jù)更新，我們將頁面上數(shù)據(jù)更新操作封裝為一個js函數(shù)，將函數(shù)名當做參數(shù)傳遞到這個地址當中。 服務(wù)端收到請求后解析地址取出參數(shù)（客戶端js函數(shù)調(diào)用名），每當有數(shù)據(jù)更新的時候，返回對客戶端函數(shù)的調(diào)用，并且將要跟新的數(shù)據(jù)以js函數(shù)的參數(shù)填入到返回內(nèi)容當中，例如返回“<script type="text/javascript">update("data")</script>”這樣一個字符串，意味著以data為參數(shù)調(diào)用客戶端update函數(shù)進行客戶端view更新。基本模型如下所示： 可以看到comet技術(shù)是針對客戶端請求服務(wù)器響應(yīng)模型而模擬出的一個服務(wù)端推送數(shù)據(jù)實時更新技術(shù)。而且由于瀏覽器兼容性不能夠廣泛應(yīng)用。 ? 6.4小結(jié)當然并不是說這些技術(shù)沒有用，就算websocket已經(jīng)作為規(guī)范被提出并實現(xiàn)，但是對于老式瀏覽器，我們依然需要將它降級為以上方式來實現(xiàn)實時交互和服務(wù)端數(shù)據(jù)推送。 7、一個簡單的WebSocket聊天小例子到此為止，我們明白了websocket的原理，下面通過一個簡單的聊天應(yīng)用來再次加深下對websocket的理解。該應(yīng)用需求很簡單，就是在web選項卡中打開兩個網(wǎng)頁，模擬兩個web客戶端實現(xiàn)聊天功能。 ? 7.1客戶端代碼client.html：
客戶端js代碼：
這里使用的是w3c規(guī)范中關(guān)于HTML5 websocket API的原生API，這些api很簡單，就是利用new WebSocket創(chuàng)建一個指定連接服務(wù)端地址的ws實例，然后為該實例注冊onopen(連接服務(wù)端),onmessage(接受服務(wù)端數(shù)據(jù))，onclose(關(guān)閉連接)以及ws.send(建立連接后)發(fā)送請求。上面說了那么多，事實上可以看到html5 websocket API本身是很簡單的一個對象和它的幾個方法而已。 ? 7.2服務(wù)端代碼服務(wù)端采用Node.js，這里需要基于一個nodejs-websocket的Node.js服務(wù)端的庫，它是一個輕量級的Node.js websocket server端的實現(xiàn)，實際上也是使用Node.js提供的net模塊寫成的。 server.js：
首先利用http模塊監(jiān)聽用戶的http請求并顯示client.html界面，然后創(chuàng)建一個websocket服務(wù)端等待用戶連接，在接收到用戶發(fā)送來的數(shù)據(jù)之后將它廣播到所有連接到的客戶端。 ? 7.3運行下面我們打開兩個瀏覽器選項卡模擬兩個客戶端進行連接。 客戶端一發(fā)起連接： 客戶端一請求響應(yīng)報文如下： 可以看到這次握手和我們之前講的如出一轍。 客戶端二的連接過程和1是一樣的，這里為了查看我們使用ff瀏覽器，兩個客戶端的連接情況如下： 發(fā)送消息情況如下： 可以看到，雙方發(fā)送的消息被服務(wù)端廣播給了每個和自己連接的客戶端。 8、結(jié)語從上面的即時通訊聊天例子我們可以看到，要想做一個點對點的im應(yīng)用，websocket采取的方式是讓所有客戶端連接服務(wù)端，服務(wù)器將不同客戶端發(fā)送給自己的消息進行轉(zhuǎn)發(fā)或者廣播，而對于原始的socket，只要兩端建立連接之后，就可以發(fā)送端對端的數(shù)據(jù)，不需要經(jīng)過第三方的轉(zhuǎn)發(fā)（即時通訊網(wǎng)注：原文作者指的是原生的Socket可以通過P2P直接進行消息交互，實際現(xiàn)今主流的IM應(yīng)用幾乎都是使用服務(wù)端中轉(zhuǎn)的方式進行文本類消息的發(fā)送，使用中轉(zhuǎn)無關(guān)技術(shù)，主要是基于運營考慮），這也是websocket不同于socket的一個重要特點。 最后，本文為了說明html5規(guī)范中的websocket在客戶端采用了websocket原生的API，實際開發(fā)中，有比較著名的兩個庫socket.io和sockjs，它們都對原始的websocket API做了進一步封裝，提供了更多功能，都分為客戶端和服務(wù)端的實現(xiàn)，實際應(yīng)用中，可以選擇使用。 如果您覺得本文還是顯得有點專業(yè)，可以看看知乎上的這篇《WebSocket 是什么原理？為什么可以實現(xiàn)持久連接？》，比較通俗，適合快餐式地了解WebSocket。 附錄：全站即時通訊技術(shù)資料分類[1] 網(wǎng)絡(luò)編程基礎(chǔ)資料： 《TCP/IP詳解?-?第11章·UDP：用戶數(shù)據(jù)報協(xié)議》 《TCP/IP詳解?-?第17章·TCP：傳輸控制協(xié)議》 《TCP/IP詳解?-?第18章·TCP連接的建立與終止》 《TCP/IP詳解?-?第21章·TCP的超時與重傳》 《理論經(jīng)典：TCP協(xié)議的3次握手與4次揮手過程詳解》 《理論聯(lián)系實際：Wireshark抓包分析TCP 3次握手、4次揮手過程》 《計算機網(wǎng)絡(luò)通訊協(xié)議關(guān)系圖（中文珍藏版）》 《NAT詳解：基本原理、穿越技術(shù)(P2P打洞)、端口老化等》 《UDP中一個包的大小最大能多大？》 《Java新一代網(wǎng)絡(luò)編程模型AIO原理及Linux系統(tǒng)AIO介紹》 《NIO框架入門(三)：iOS與MINA2、Netty4的跨平臺UDP雙向通信實戰(zhàn)》 《NIO框架入門(四)：Android與MINA2、Netty4的跨平臺UDP雙向通信實戰(zhàn)》 >>?更多同類文章 …… [2] 有關(guān)IM/推送的通信格式、協(xié)議的選擇： 《為什么QQ用的是UDP協(xié)議而不是TCP協(xié)議？》 《移動端即時通訊協(xié)議選擇：UDP還是TCP？》 《如何選擇即時通訊應(yīng)用的數(shù)據(jù)傳輸格式》 《強列建議將Protobuf作為你的即時通訊應(yīng)用數(shù)據(jù)傳輸格式》 《移動端IM開發(fā)需要面對的技術(shù)問題（含通信協(xié)議選擇）》 《簡述移動端IM開發(fā)的那些坑：架構(gòu)設(shè)計、通信協(xié)議和客戶端》 《理論聯(lián)系實際：一套典型的IM通信協(xié)議設(shè)計詳解》 《58到家實時消息系統(tǒng)的協(xié)議設(shè)計等技術(shù)實踐分享》 >>?更多同類文章 …… [3] 有關(guān)IM/推送的心跳保活處理： 《Android進程保活詳解：一篇文章解決你的所有疑問》 《Android端消息推送總結(jié)：實現(xiàn)原理、心跳保活、遇到的問題等》 《為何基于TCP協(xié)議的移動端IM仍然需要心跳保活機制？》 《微信團隊原創(chuàng)分享：Android版微信后臺保活實戰(zhàn)分享(進程保活篇)》 《微信團隊原創(chuàng)分享：Android版微信后臺保活實戰(zhàn)分享(網(wǎng)絡(luò)保活篇)》 《移動端IM實踐：實現(xiàn)Android版微信的智能心跳機制》 《移動端IM實踐：WhatsApp、Line、微信的心跳策略分析》 >>?更多同類文章 …… [4] 有關(guān)WEB端即時通訊開發(fā)： 《新手入門貼：史上最全Web端即時通訊技術(shù)原理詳解》 《Web端即時通訊技術(shù)盤點：短輪詢、Comet、Websocket、SSE》 《SSE技術(shù)詳解：一種全新的HTML5服務(wù)器推送事件技術(shù)》 《Comet技術(shù)詳解：基于HTTP長連接的Web端實時通信技術(shù)》 《WebSocket詳解（一）：初步認識WebSocket技術(shù)》 《socket.io實現(xiàn)消息推送的一點實踐及思路》 >>?更多同類文章 …… [5] 有關(guān)IM架構(gòu)設(shè)計： 《淺談IM系統(tǒng)的架構(gòu)設(shè)計》 《簡述移動端IM開發(fā)的那些坑：架構(gòu)設(shè)計、通信協(xié)議和客戶端》 《一套原創(chuàng)分布式即時通訊(IM)系統(tǒng)理論架構(gòu)方案》 《從零到卓越：京東客服即時通訊系統(tǒng)的技術(shù)架構(gòu)演進歷程》 《蘑菇街即時通訊/IM服務(wù)器開發(fā)之架構(gòu)選擇》 《騰訊QQ1.4億在線用戶的技術(shù)挑戰(zhàn)和架構(gòu)演進之路PPT》 《微信技術(shù)總監(jiān)談架構(gòu)：微信之道——大道至簡(演講全文)》 《如何解讀《微信技術(shù)總監(jiān)談架構(gòu)：微信之道——大道至簡》》 《快速裂變：見證微信強大后臺架構(gòu)從0到1的演進歷程（一）》 《17年的實踐：騰訊海量產(chǎn)品的技術(shù)方法論》 >>?更多同類文章 …… [6] 有關(guān)IM安全的文章： 《即時通訊安全篇（一）：正確地理解和使用Android端加密算法》 《即時通訊安全篇（二）：探討組合加密算法在IM中的應(yīng)用》 《即時通訊安全篇（三）：常用加解密算法與通訊安全講解》 《即時通訊安全篇（四）：實例分析Android中密鑰硬編碼的風險》 《傳輸層安全協(xié)議SSL/TLS的Java平臺實現(xiàn)簡介和Demo演示》 《理論聯(lián)系實際：一套典型的IM通信協(xié)議設(shè)計詳解（含安全層設(shè)計）》 《微信新一代通信安全解決方案：基于TLS1.3的MMTLS詳解》 《來自阿里OpenIM：打造安全可靠即時通訊服務(wù)的技術(shù)實踐分享》 >>?更多同類文章 …… [7] 有關(guān)實時音視頻開發(fā)： 《即時通訊音視頻開發(fā)（一）：視頻編解碼之理論概述》 《即時通訊音視頻開發(fā)（二）：視頻編解碼之數(shù)字視頻介紹》 《即時通訊音視頻開發(fā)（三）：視頻編解碼之編碼基礎(chǔ)》 《即時通訊音視頻開發(fā)（四）：視頻編解碼之預(yù)測技術(shù)介紹》 《即時通訊音視頻開發(fā)（五）：認識主流視頻編碼技術(shù)H.264》 《即時通訊音視頻開發(fā)（六）：如何開始音頻編解碼技術(shù)的學(xué)習(xí)》 《即時通訊音視頻開發(fā)（七）：音頻基礎(chǔ)及編碼原理入門》 《即時通訊音視頻開發(fā)（八）：常見的實時語音通訊編碼標準》 《即時通訊音視頻開發(fā)（九）：實時語音通訊的回音及回音消除概述》 《即時通訊音視頻開發(fā)（十）：實時語音通訊的回音消除技術(shù)詳解》 《即時通訊音視頻開發(fā)（十一）：實時語音通訊丟包補償技術(shù)詳解》 《即時通訊音視頻開發(fā)（十二）：多人實時音視頻聊天架構(gòu)探討》 《即時通訊音視頻開發(fā)（十三）：實時視頻編碼H.264的特點與優(yōu)勢》 《即時通訊音視頻開發(fā)（十四）：實時音視頻數(shù)據(jù)傳輸協(xié)議介紹》 《即時通訊音視頻開發(fā)（十五）：聊聊P2P與實時音視頻的應(yīng)用情況》 《即時通訊音視頻開發(fā)（十六）：移動端實時音視頻開發(fā)的幾個建議》 《即時通訊音視頻開發(fā)（十七）：視頻編碼H.264、V8的前世今生》 《簡述開源實時音視頻技術(shù)WebRTC的優(yōu)缺點》 《良心分享：WebRTC 零基礎(chǔ)開發(fā)者教程（中文）》 >>?更多同類文章 …… [8] IM開發(fā)綜合文章： 《移動端IM開發(fā)需要面對的技術(shù)問題》 《開發(fā)IM是自己設(shè)計協(xié)議用字節(jié)流好還是字符流好？》 《請問有人知道語音留言聊天的主流實現(xiàn)方式嗎？》 《IM系統(tǒng)中如何保證消息的可靠投遞（即QoS機制）》 《談?wù)勔苿佣?IM 開發(fā)中登錄請求的優(yōu)化》 《完全自已開發(fā)的IM該如何設(shè)計“失敗重試”機制？》 《微信對網(wǎng)絡(luò)影響的技術(shù)試驗及分析（論文全文）》 《即時通訊系統(tǒng)的原理、技術(shù)和應(yīng)用（技術(shù)論文）》 《開源IM工程“蘑菇街TeamTalk”的現(xiàn)狀：一場有始無終的開源秀》 >>?更多同類文章 …… [9] 開源移動端IM技術(shù)框架資料： 《開源移動端IM技術(shù)框架MobileIMSDK：快速入門》 《開源移動端IM技術(shù)框架MobileIMSDK：常見問題解答》 《開源移動端IM技術(shù)框架MobileIMSDK：壓力測試報告》 《開源移動端IM技術(shù)框架MobileIMSDK：Android版Demo使用幫助》 《開源移動端IM技術(shù)框架MobileIMSDK：Java版Demo使用幫助》 《開源移動端IM技術(shù)框架MobileIMSDK：iOS版Demo使用幫助》 《開源移動端IM技術(shù)框架MobileIMSDK：Android客戶端開發(fā)指南》 《開源移動端IM技術(shù)框架MobileIMSDK：Java客戶端開發(fā)指南》 《開源移動端IM技術(shù)框架MobileIMSDK：iOS客戶端開發(fā)指南》 《開源移動端IM技術(shù)框架MobileIMSDK：Server端開發(fā)指南》 >>?更多同類文章 …… [10] 有關(guān)推送技術(shù)的文章： 《iOS的推送服務(wù)APNs詳解：設(shè)計思路、技術(shù)原理及缺陷等》 《Android端消息推送總結(jié)：實現(xiàn)原理、心跳保活、遇到的問題等》 《掃盲貼：認識MQTT通信協(xié)議》 《一個基于MQTT通信協(xié)議的完整Android推送Demo》 《求教android消息推送：GCM、XMPP、MQTT三種方案的優(yōu)劣》 《移動端實時消息推送技術(shù)淺析》 《掃盲貼：淺談iOS和Android后臺實時消息推送的原理和區(qū)別》 《絕對干貨：基于Netty實現(xiàn)海量接入的推送服務(wù)技術(shù)要點》 《移動端IM實踐：谷歌消息推送服務(wù)(GCM)研究（來自微信）》 《為何微信、QQ這樣的IM工具不使用GCM服務(wù)推送消息？》 >>?更多同類文章 …… [11] 更多即時通訊技術(shù)好文分類： http://www.52im.net/forum.php?mod=collection&op=all （原文鏈接：http://www.cnblogs.com/myzhibie/p/4470065.html，原文有改動） |
總結(jié)
以上是生活随笔為你收集整理的【转】WebSocket详解（一）：初步认识WebSocket技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LG最后一款手机在运营商网站上删除：一个
- 下一篇： 孩子爱张嘴睡觉被贴封口贴险缺氧 医生：乱