一：傳統(tǒng)WEB通訊的原理

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

二：Web端即時通訊技術

1、傳統(tǒng)Ajax短輪詢

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

2、Comet技術

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

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

3、SSE（Server-sent Events）

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

4、WebSocket技術、

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

三：Websocket

Websocket特點

其他特點包括：

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

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

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

（4）可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。

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

（6）協(xié)議標識符是ws（如果加密，則為wss），服務器網(wǎng)址就是 URL。

Websocket連接機制

首先Websocket是基于HTTP協(xié)議的，或者說借用了HTTP的協(xié)議來完成一部分握手。
在握手階段是一樣的，首先我們來看個典型的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的同志們可能發(fā)現(xiàn)了，這段類似HTTP協(xié)議的握手請求中，多了幾個東西。

Upgrade: websocket
Connection: Upgrade

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

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

首先，Sec-WebSocket-Key 是一個Base64 encode的值，這個是瀏覽器隨機生成的，告訴服務器：我跟你港，不要忽悠窩，我要驗證尼是不是真的是Websocket助理。
然后，Sec_WebSocket-Protocol 是一個用戶定義的字符串，用來區(qū)分同URL下，不同的服務所需要的協(xié)議。簡單理解：今晚我要服務A，別搞錯啦~
最后，Sec-WebSocket-Version 是告訴服務器所使用的Websocket Draft（協(xié)議版本），在最初的時候，Websocket協(xié)議還在 Draft 階段，各種奇奇怪怪的協(xié)議都有，而且還有很多期奇奇怪怪不同的東西，什么Firefox和Chrome用的不是一個版本之類的，當初Websocket協(xié)議太多可是一個大難題。。不過現(xiàn)在還好，已經定下來啦，大家都使用的一個東西~ ：服務員，我要的是13歲的噢→_→然后服務器會返回下列東西，表示已經接受到請求， 成功建立Websocket啦！

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

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

Upgrade: websocket
Connection: Upgrade

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

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端即时通讯技术的全部內容，希望文章能夠幫你解決所遇到的問題。

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