一：傳統WEB通訊的原理

瀏覽器本身作為一個瘦客戶端，不具備直接通過系統調用來達到和處于異地的另外一個客戶端瀏覽器通信的功能。這和我們桌面應用的工作方式是不同的，通常桌面應用通過socket可以和遠程主機上另外一端的一個進程建立TCP連接，從而達到全雙工的即時通信。
瀏覽器從誕生開始一直走的是客戶端請求服務器，服務器返回結果的模式，即使發展至今仍然沒有任何改變。所以可以肯定的是，要想實現兩個客戶端的通信，必然要通過服務器進行信息的轉發。例如A要和B通信，則應該是A先把信息發送給IM應用服務器，服務器根據A信息中攜帶的接收者將它再轉發給B，同樣B到A也是這種模式

二：Web端即時通訊技術

1、傳統Ajax短輪詢

關于Ajax短輪詢：通過腳本發送HTTP請求
找這方面的資料沒什么意義，除非忽悠客戶，否則請考慮其它3種方案即可

2、Comet技術

comet 是基于 HTTP長連接的“服務器推”技術，是一種新的 Web 應用架構，
Alex Russell（Dojo Toolkit 的項目 Lead）稱這種基于 HTTP長連接、無須在瀏覽器端安裝插件的“服務器推”技術為“Comet”。目前已經出現了一些成熟的 Comet 應用以及各種開源框架；一些 Web 服務器如 Jetty 也在為支持大量并發的長連接進行了很多改進。
介紹兩種實現模型：
( 1 ) 基于 AJAX 的長輪詢（long-polling）方式
long poll long poll 其實原理跟 ajax短輪詢 差不多，都是采用輪詢的方式，不過采取的是阻塞模型（一直打電話，沒收到消息就不掛電話），也就是說，客戶端發起連接后，如果沒消息，就一直不返回Response給客戶端。直到有消息才返回，返回完之后，客戶端再次建立連接，周而復始
( 2 ) 基于 Iframe 及 htmlfile 的流（streaming）方式

可以看出，短輪詢與長輪詢就是，不斷建立HTTP連接，然后等待服務端處理，特點：被動性，耗資源

3、SSE（Server-sent Events）

嚴格地說，HTTP 協議無法做到服務器主動推送信息。
但是，有一種變通方法，就是服務器向客戶端聲明，接下來要發送的是流信息（streaming）。
也就是說，發送的不是一次性的數據包，而是一個數據流，會連續不斷地發送過來。這時，客戶端不會關閉連接，會一直等著服務器發過來的新的數據流，視頻播放就是這樣的例子。本質上，這種通信就是以流信息的方式，完成一次用時很長的下載。
SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。它基于 HTTP 協議，目前除了 IE/Edge，其他瀏覽器都支持。
SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務器之間的通信渠道，然后服務器向瀏覽器推送信息。
總體來說，WebSocket 更強大和靈活。因為它是全雙工通道，可以雙向通信；
SSE 是單向通道，只能服務器向瀏覽器發送，因為流信息本質上就是下載。
如果瀏覽器向服務器發送信息，就變成了另一次 HTTP 請求。
Server-sent Events HTML 5 規范的一個組成部分

4、WebSocket技術、

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
Websocket是一個持久化的協議，相對于HTTP這種非持久的協議來說

三：Websocket

Websocket特點

其他特點包括：

（1）建立在 TCP 協議之上，服務器端的實現比較容易。

（2）與 HTTP 協議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。

（3）數據格式比較輕量，性能開銷小，通信高效。

（4）可以發送文本，也可以發送二進制數據。

（5）沒有同源限制，客戶端可以與任意服務器通信。

（6）協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

Websocket連接機制

首先Websocket是基于HTTP協議的，或者說借用了HTTP的協議來完成一部分握手。
在握手階段是一樣的，首先我們來看個典型的Websocket握手

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

熟悉HTTP的同志們可能發現了，這段類似HTTP協議的握手請求中，多了幾個東西。

Upgrade: websocket
Connection: Upgrade

這個就是Websocket的核心了，告訴Apache、Nginx等服務器：注意啦，我發起的是Websocket協議，快點幫我找到對應的助理處理~不是那個老土的HTTP。

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-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 Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

這里開始就是HTTP最后負責的區域了，告訴客戶，我已經成功切換協議啦~

Upgrade: websocket
Connection: Upgrade

依然是固定的，告訴客戶端即將升級的是Websocket協議，而不是mozillasocket，lurnarsocket或者shitsocket。然后，Sec-WebSocket-Accept 這個則是經過服務器確認，并且加密過后的 Sec-WebSocket-Key。服務器：好啦好啦，知道啦，給你看我的ID CARD來證明行了吧。。后面的，Sec-WebSocket-Protocol 則是表示最終使用的協議。至此，HTTP已經完成它所有工作了，接下來就是完全按照Websocket協議進行了。

Websocket客戶端簡單示例

client.html

var ws = new WebSocket("wss://echo.websocket.org:9502");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); };ws.onmessage = function(evt) {console.log( "Received Message: " + evt.data);ws.close(); };ws.onerror = function(evt) {console.log( "Connection Error: " + evt.data);ws.close(); };ws.onclose = function(evt) {console.log("Connection closed."); };

Webcosket服務端簡單示例（Swoole）

server.php

$server = new Swoole\Websocket\Server("127.0.0.1", 9502);$server->on('open', function($server, $req) {echo "connection open: {$req->fd}\n"; });$server->on('message', function($server, $frame) {echo "received message: {$frame->data}\n";$server->push($frame->fd, json_encode(["hello", "world"])); });$server->on('close', function($server, $fd) {echo "connection close: {$fd}\n"; });$server->start();

在服務器運行程序

> php server.php

參考：
https://www.zhihu.com/question/20215561/answer/40316953
http://www.ruanyifeng.com/blog/2017/05/websocket.html

總結

以上是生活随笔為你收集整理的WEB端即时通讯技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。