泛前端开发

泛前端开发
javascript
Comments

《html5数据推送应用开发》读书摘要

书很薄，在图书馆瞄了一下，知识点不多。
基本上第二章基本讲完，其他讲解都是一些擦边的，兼容性，安全性，……
可以总结为如下：

《Data Push Apps with HTML5 SSE》 读书摘要

摘要

  • EventSource方法 new EventSource(“url”);
  • MIME类型text/event-stream
  • 数据传输格式”data:” + new Date().toISOString() + “\n\n”;

SSE示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SSE Example</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<pre id="x">Initializing...</pre>
<script>
    var es = new EventSource("basic_sse.php");
    es.addEventListener("message", function(e){
        $("#x").append("\n" + e.data);
    },false);
</script>
</body>
</html>

var http = require("http"),
    fs = require("fs");
var port = parseInt(process.argv[2] || 1234);
http.createServer(function(request, response) {
    console.log("Client connected:" + request.url);
    if (request.url != "/sse") {
        fs.readFile("basic_sse.html", function(err, file) {
            response.writeHead(200, { 'Content-Type': 'text/html' });
            var s = file.toString(); //file is a buffer
            s = s.replace("basic_sse.php", "sse");
            response.end(s);
        });
        return;
    }
    //Below is to handle SSE request. It never returns.
    response.writeHead(200, { "Content-Type": "text/event-stream" });
    var timer = setInterval(function() {
        var content = "data:" + new Date().toISOString() + "\n\n";
        var b = response.write(content);
        if (!b) console.log("Data got queued in memory (content=" + content + ")");
        else console.log("Flushed! (content=" + content + ")");
    }, 1000);
    request.connection.on("close", function() {
        response.end();
        clearInterval(timer);
        console.log("Client closed connection. Aborting.");
    });
}).listen(port);
console.log("Server running at http://localhost:" + port);

兼容性

startEventSource()

  • Basically all Firefox and Chromea
  • Desktop Safari 5.0+
  • iOS Safari 4.0+
  • Android 4.4+ (earlier where Chrome is default browser)
  • Chrome for Android (all versions)
  • Firefox for Android (all versions)
  • Opera since 11.0
  • Opera Mobile since 11.1
  • BlackBerry since 7.0

startXHR()

  • IE10+
  • Firefox 3.6 (and earlier)
  • Safari 3.x
  • Android 4.1 to 4.3 (unless Chrome is default browser)
  • Android 3.x

startIframe()

  • IE8
  • IE9

~~startLongpoll()

  • IE6
  • IE7
  • Android 2.x
  • Anything else not in the preceding list that has Ajax support
    ~~

~~(none)

  • Any browser with JavaScript disabled
    ~~

~~a Technically since Firefox 6 and Chrome 6, but they have been auto-updating since Firefox 4, and Chrome since it came out
of beta, so you can reasonably expect no one is still using versions that do not support SSE.
~~

书本代码，书本代码，书本代码。

参考资料

其他参考

-EOF-



原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

Comments