基于服务器端推送事件的 Comet 技术


在服务端推送事件的标准草案中定义了一个 EventSource 对象,简化了 Comet 应用程序的编写可以传递一个 URI 给 EventSource() 构造函数,然后在返回的实例上监听消息事件:

var ticker = new EventSource("stockprices.php");
ticker.onmessage = function(e) {
    var type = e.type;
    var data = e.data;
}

注:在 HTML5 中,将通过 WebSocket 替代 Comet。

Comet 架构的一个常见应用是聊天应用:

//使用 Comet 实现简易聊天室
window.onload = function () {
    var nick = prompt("Enter your nickname");
    var input = document.getElementById("input");
    input.focus();
    
    var chat = new EventSource("/chat");
    chat.onmessage = function (event) {
        var msg = event.data;
        var node = document.createTextNode(msg);
        var div = document.createElement("div");
        div.appendChild(node);
        document.body.insertBefore(div, input);
        input.scrollIntoView();  // 保证input元素可见
    };
    
    input.onchange = function () {
        var msg = nick + ": " + input.value;
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/chat");
        xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
        xhr.send(msg);
        input.value = "";
    };
};

点赞 取消点赞 收藏 取消收藏

<< 上一篇: 发送 JSONP 请求

>> 下一篇: jQuery 基础