Use EventSource Achieve Comet

最新推荐文章于 2025-10-14 09:43:06 发布

原创最新推荐文章于 2025-10-14 09:43:06 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

javascript思考专栏收录该内容

12 篇文章

订阅专栏

本文介绍 HTML5 中的 EventSource API，并通过一个实战示例展示了如何建立与服务器的持久连接来接收实时数据更新。文章包括客户端和服务端的具体实现细节。

部署运行你感兴趣的模型镜像

Firstly introduce the HTML5 API:

The EventSource interface is web content's interface to server-sent events. An EventSource instance opens a persistent connection to an HTTP server, which sends events in text/event-stream format. The connection remains open until closed by calling EventSource.close().

Usage：

var evtSource = new EventSource("/data");//向服务器接收数据

Event API：

//receive server info 
evtSource.onmessage = function (e) {
    console.log(e.data);
}
//trigger by connect server success 
evtSource.onopen = function () {
    console.log("Server open")
} 
//trigger by some err
evtSource.onerror = function () {
    console.log("Error")
}

Example(Base on node):

var http=require("http");
var fs=require("fs");
http.createServer(function(req,res){
    if(req.url=='/'){
        fs.readFile("index.html",function(err,buf){
            if(err){
                res.end(404);return
            }else{
                res.end(buf);
            }
        });
    }else if(req.url=="/data"){
        res.setHeader('Cache-control', 'no-cache');
        res.setHeader('Content-Type', 'text/event-stream');
        let i=0;
        while(i<1000){
            console.log(i);
            res.write("data:" + new Date().toLocaleTimeString() + "\n\n" + 
            "data:" + i + "\n\n");//这里必须为\n\n才能是数据流分开，同时事件流给前台只会是data属性，不能设置其他属性

             i++;
        }
        
    }
}).listen(3000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    
    var evtSource = new EventSource('/data');
    //收到服务器发生的事件时触发
        evtSource.onmessage = function (e) {
        console.log(e.data);
    }
    //成功与服务器发生连接时触发
        evtSource.onopen = function () {
            console.log("Server open")
    } 
    //出现错误时触发
    evtSource.onerror = function () {
        console.log("Error")
        } 
</script>
</html>

AS follow result is: