html5的服務(wù)器如何推送Server-sentEvents和websocket

EventSource 對(duì)象

在上面的例子中，我們使用 onmessage 事件來(lái)獲取消息。不過(guò)還可以使用其他事件：

nodejs 服務(wù)端示例：

服務(wù)器端事件流的語(yǔ)法是非常簡(jiǎn)單的。把 "Content-Type" 報(bào)頭設(shè)置為"text/event-stream"。

• Content-Type: text/event-stream

• Cache-Control: no-cache

• Connection: keep-alive

服務(wù)器返回字段：

• data ：數(shù)據(jù)內(nèi)容

• event ：自定義事件

• id ：數(shù)據(jù)編號(hào)

• retry ：指定瀏覽器重新發(fā)起連接的時(shí)間間隔。retry: 10000

• ： ：冒號(hào)開(kāi)頭的行，表示注釋

兩種情況會(huì)導(dǎo)致瀏覽器重新發(fā)起連接：
一種是時(shí)間間隔到期，二是由于網(wǎng)絡(luò)錯(cuò)誤等原因，導(dǎo)致連接出錯(cuò)。

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("retry: 10000\n");
    res.write("event: connecttime\n");
    res.write("data: " + (new Date()) + "\n\n");
    res.write("data: " + (new Date()) + "\n\n");

    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "\n\n");
    }, 1000);

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

WebSockets

返回目錄

運(yùn)行原理

客戶端通知WebSockets服務(wù)器一個(gè)事件，告訴他接收者id，服務(wù)器將立即通知消息，當(dāng)任何新的未讀消息來(lái)的時(shí)候，服務(wù)器都將立即返回?cái)?shù)據(jù)給客戶端。

客戶端示例：

function WebSocketTest(){
if ("WebSocket" in window){
   alert("您的瀏覽器支持 WebSocket!");
   // 打開(kāi)一個(gè) web socket
   var ws = new WebSocket("ws://localhost:8181");
   ws.onopen = function(){
      // Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
      ws.send("發(fā)送數(shù)據(jù)");
      alert("數(shù)據(jù)發(fā)送中...");
   };
    
   ws.onmessage = function (evt) { 
      var received_msg = evt.data;
      alert("數(shù)據(jù)已接收...");
   };
    
   ws.onclose = function(){ 
      // 關(guān)閉 websocket
      alert("連接已關(guān)閉..."); 
   };
}else{
   // 瀏覽器不支持 WebSocket
   alert("您的瀏覽器不支持 WebSocket!");
}
}
      

socket服務(wù)端 nodejs

var net = require("net");
server1 = net.createServer(function(client){
    client.write('Hello World!\r\n');
});

server1.listen(9000);
//--------------------------------------------------
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

總結(jié)

返回目錄

瀏覽器兼容性

• Server-Sent Events 支持Chrome9+、Firefox6+、Opera11+、Safari5+

服務(wù)器負(fù)載

• Server-Sent Events工作的方式有很多，除非Server-Sent Events不必在每一次響應(yīng)發(fā)出后都關(guān)閉連接。

• WebSockets，服務(wù)器只需要一個(gè)進(jìn)程處理所有的請(qǐng)求，沒(méi)有循環(huán)，不必為每個(gè)客戶端都分配cpu和內(nèi)存。

客戶端負(fù)載

• Server-Sent Events采用瀏覽器的內(nèi)置的實(shí)現(xiàn)方式，只花費(fèi)很少的一部分資源。

• WebSockets跟Server-Sent Events一樣，采用瀏覽器的內(nèi)置的實(shí)現(xiàn)方式，只花費(fèi)很少的一部分資源。

時(shí)間線

• Server-Sent Events默認(rèn)延時(shí)3秒，但是可以調(diào)整。

• WebSockets真正的實(shí)時(shí)

實(shí)現(xiàn)方式復(fù)雜度

• Server-Sent Events 甚至比Long-polling更簡(jiǎn)單

• WebSockets 需要一個(gè)WebSockets服務(wù)器處理事件，并開(kāi)放一個(gè)端口

上述就是小編為大家分享的html5的服務(wù)器如何推送Server-sent Events和 websocket了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。