html5的服务器如何推送Server-sentEvents和websocket

EventSource 对象

在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

nodejs 服务端示例：

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为"text/event-stream"。

• Content-Type: text/event-stream

• Cache-Control: no-cache

• Connection: keep-alive

服务器返回字段：

• data ：数据内容

• event ：自定义事件

• id ：数据编号

• retry ：指定浏览器重新发起连接的时间间隔。retry: 10000

• ： ：冒号开头的行，表示注释

两种情况会导致浏览器重新发起连接：
一种是时间间隔到期，二是由于网络错误等原因，导致连接出错。

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

返回目录

运行原理

客户端通知WebSockets服务器一个事件，告诉他接收者id，服务器将立即通知消息，当任何新的未读消息来的时候，服务器都将立即返回数据给客户端。

客户端示例：

function WebSocketTest(){
if ("WebSocket" in window){
   alert("您的浏览器支持 WebSocket!");
   // 打开一个 web socket
   var ws = new WebSocket("ws://localhost:8181");
   ws.onopen = function(){
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
   };
    
   ws.onmessage = function (evt) { 
      var received_msg = evt.data;
      alert("数据已接收...");
   };
    
   ws.onclose = function(){ 
      // 关闭 websocket
      alert("连接已关闭..."); 
   };
}else{
   // 浏览器不支持 WebSocket
   alert("您的浏览器不支持 WebSocket!");
}
}
      

socket服务端 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);
    });
});

总结

返回目录

浏览器兼容性

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

服务器负载

• Server-Sent Events工作的方式有很多，除非Server-Sent Events不必在每一次响应发出后都关闭连接。

• WebSockets，服务器只需要一个进程处理所有的请求，没有循环，不必为每个客户端都分配cpu和内存。

客户端负载

• Server-Sent Events采用浏览器的内置的实现方式，只花费很少的一部分资源。

• WebSockets跟Server-Sent Events一样，采用浏览器的内置的实现方式，只花费很少的一部分资源。

时间线

• Server-Sent Events默认延时3秒，但是可以调整。

• WebSockets真正的实时

实现方式复杂度

• Server-Sent Events 甚至比Long-polling更简单

• WebSockets 需要一个WebSockets服务器处理事件，并开放一个端口

上述就是小编为大家分享的html5的服务器如何推送Server-sent Events和 websocket了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。