成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

聊一聊Web端的即時通訊

KevinYan / 1219人閱讀

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

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

Iframe設置為不顯示。

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

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

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

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

當有新消息時服務端會向iframe中輸入一段js代碼.：

println("”);

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

Websocket VS SSE websocket介紹

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

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

websocket 兼容性

websocket 相關應用

社交聊天

彈幕

多屏互動

多玩家游戲

協(xié)同編輯

股票基金實時報價

體育實況更新

視頻會議/聊天

在線教育

智能家居等需要高實時的場景

webpack-dev-server

等等...

主要的類庫

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

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

以socket.io為例子
服務端 
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);
前端 


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

SSE(Server-Sent Events)介紹

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

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

SSE 兼容性

SSE 實現(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 事件...";
    }
服務端 
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");
對比
Websocket SSE(Server-Sent Events)
通訊方式 基于TCP長連接通訊 http
優(yōu)點 全雙工通訊協(xié)議，性能開銷小、安全性高，有一定可擴展性 實現(xiàn)簡便，開發(fā)成本低，默認支持斷線重連
缺點 傳輸數(shù)據(jù)需要進行二次解析，增加開發(fā)成本及難度 瀏覽器兼容問題，單向
原文地址 參考文章&資料

看完讓你徹底搞懂Websocket原理
https://www.zhihu.com/questio...
Server-Sent Events 教程

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/95395.html

相關文章

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    UCloud 評論0 收藏0

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    Yangder 評論0 收藏0

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應用，的大量使用，使得前端工程師們?nèi)粘５拈_發(fā)少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    褰辯話 評論0 收藏0

  • [聊一聊系列]聊一聊WEB前端安全那些事兒

    摘要：所以今天，就和大家一起聊一聊前端的安全那些事兒。我們就聊一聊前端工程師們需要注意的那些安全知識。殊不知，這不僅僅是違反了的標準而已，也同樣會被黑客所利用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog... 隨著互聯(lián)網(wǎng)的發(fā)達，各種WEB應用也變得越來越復雜，滿足了用戶的各種需求...

    AZmake 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<