聊一聊Web端的即時(shí)通訊

KevinYan 發(fā)布于2019-08-22 18:00 / 1191人閱讀

摘要：聊一聊端的即時(shí)通訊端實(shí)現(xiàn)即時(shí)通訊的方法有哪些短輪詢長輪詢流輪詢客戶端定時(shí)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接。介紹是開始提供的一種在單個(gè)連接上進(jìn)行全雙工通訊的協(xié)議。

聊一聊Web端的即時(shí)通訊 Web端實(shí)現(xiàn)即時(shí)通訊的方法有哪些?

-	短輪詢	長輪詢	iframe流	Flash Socket
輪詢	客戶端定時(shí)向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接。	客戶端向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后hold住連接，直到有新消息才返回響應(yīng)信息并關(guān)閉連接，客戶端處理完響應(yīng)信息后再向服務(wù)器發(fā)送新的請(qǐng)求	頁面里嵌入一個(gè)隱蔵iframe，將這個(gè)隱蔵iframe的src屬性設(shè)為對(duì)一個(gè)長連接的請(qǐng)求或是采用xhr請(qǐng)求，服務(wù)器端就能源源不斷地往客戶端輸入數(shù)據(jù)	頁面中內(nèi)嵌入一個(gè)使用了Socket類的 Flash 程序JavaScript通過調(diào)用此Flash程序提供的Socket接口與服務(wù)器端的Socket接口進(jìn)行通信
優(yōu)點(diǎn)	后端程序編寫比較容易。	在無消息的情況下不會(huì)頻繁的請(qǐng)求，耗費(fèi)資源小	瀏覽器兼容好	實(shí)現(xiàn)真正的即時(shí)通信，而不是偽即時(shí)。消息即時(shí)到達(dá)，不發(fā)無用請(qǐng)求
缺點(diǎn)	浪費(fèi)帶寬和服務(wù)器資源。	服務(wù)器維護(hù)一個(gè)長連接會(huì)增加開銷	IE、Mozilla Firefox會(huì)顯示加載沒有完成，圖標(biāo)會(huì)不停旋轉(zhuǎn)。服務(wù)器維護(hù)一個(gè)長連接會(huì)增加開銷。	客戶端必須安裝Flash插件；非HTTP協(xié)議，無法自動(dòng)穿越防火墻
實(shí)例	適于小型應(yīng)用。	WebQQ、Hi網(wǎng)頁版、Facebook IM。	Gmail聊天	網(wǎng)絡(luò)互動(dòng)游戲

iframe流 前端實(shí)現(xiàn)步驟：

Iframe設(shè)置為不顯示。

src設(shè)為請(qǐng)求的數(shù)據(jù)地址。

定義個(gè)父級(jí)函數(shù)用戶讓iframe子頁面調(diào)用傳數(shù)據(jù)給父頁面。

定義onload事件，服務(wù)器timeout后再次重新加載iframe。

后端輸出內(nèi)容：

當(dāng)有新消息時(shí)服務(wù)端會(huì)向iframe中輸入一段js代碼.：

println("”);

用于調(diào)用父級(jí)函數(shù)傳數(shù)據(jù)。

Websocket VS SSE websocket介紹

WebSocket是HTML5開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

在WebSocket API中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

websocket 兼容性

websocket 相關(guān)應(yīng)用

社交聊天

彈幕

多屏互動(dòng)

多玩家游戲

協(xié)同編輯

股票基金實(shí)時(shí)報(bào)價(jià)

體育實(shí)況更新

視頻會(huì)議/聊天

在線教育

智能家居等需要高實(shí)時(shí)的場景

webpack-dev-server

等等...

主要的類庫

socket.io(https://github.com/socketio/s...

ws(https://github.com/websockets...

以socket.io為例子

服務(wù)端

var app = require("koa")();
var server = require("http").createServer(app.callback());
var io = require("socket.io")(server);
io.on("connection", function(){
// listen to the event
socket.on("eventB", function(){ /* */ });
// emit an event to the socket
socket.emit("eventA", /* */);
});
server.listen(3000);

前端

自己實(shí)現(xiàn)的一個(gè)demo,算是簡易版的你畫我猜
地址在這(https://github.com/jamielhf/n...

SSE(Server-Sent Events)介紹

HTTP 協(xié)議無法做到服務(wù)器主動(dòng)推送信息。但是，有一種變通方法，就是服務(wù)器向客戶端聲明，接下來要發(fā)送的是流信息（streaming）。

也就是說，發(fā)送的不是一次性的數(shù)據(jù)包，而是一個(gè)數(shù)據(jù)流，會(huì)連續(xù)不斷地發(fā)送過來。這時(shí)，客戶端不會(huì)關(guān)閉連接，會(huì)一直等著服務(wù)器發(fā)過來的新的數(shù)據(jù)流，視頻播放就是這樣的例子。本質(zhì)上，這種通信就是以流信息的方式，完成一次用時(shí)很長的下載。

SSE 兼容性

SSE 實(shí)現(xiàn) 客戶端

    
    if(typeof(EventSource)!=="undefined")
    {
        var source=new EventSource("http://localhost:3001/stream");
        // onopen onerror

        source.onmessage=function(event)
        {
            document.getElementById("result").innerHTML+=event.data + "
";
        };
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
    }

服務(wù)端

var http = require("http");

http.createServer(function (req, res) {
  var fileName = "." + req.url;

  if (fileName === "./stream") {
    res.writeHead(200, {
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive",
      "Access-Control-Allow-Origin": "*",
    });
    res.write("data: " + (new Date()) + "

");

    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "

");
    }, 1000);

    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  }
}).listen(3001, "127.0.0.1");

對(duì)比

	Websocket	SSE(Server-Sent Events)
通訊方式	基于TCP長連接通訊	http
優(yōu)點(diǎn)	全雙工通訊協(xié)議，性能開銷小、安全性高，有一定可擴(kuò)展性	實(shí)現(xiàn)簡便，開發(fā)成本低，默認(rèn)支持?jǐn)嗑€重連
缺點(diǎn)	傳輸數(shù)據(jù)需要進(jìn)行二次解析，增加開發(fā)成本及難度	瀏覽器兼容問題，單向