服务器推送事件(SSE)实战-优快云博客

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/105053904

//  服务器推送数据：不能停止推送！
//  ctx.body = "hello";
//  res.write("hello");
//  res.end();

const http = require("http");   // 创建服务器
const fs = require("fs");   // 操作文件  读写
const url = require("url"); // 解析 处理路径


let server = http.createServer((req,res)=>{
    // console.log(req.url);
    let urlObj = url.parse(req.url,true);
    // console.log(urlObj);

    // 判断路径
    if(urlObj.pathname === "/" || urlObj.pathname === "/index"){
        // 加载页面
        let resData = fs.readFileSync("./index.html");
        // res.write(resData);
        res.end(resData)
    }else if(urlObj.pathname === "/sse"){
        // 推送数据
        // 1.设置文件头
        res.setHeader("content-type","text/event-stream");
        setInterval(()=>{
            // 2.设置声明数据开头 和 结尾
            let obj = {
                name : "ajax",
                age : 20
            }
            res.write("data:"+ JSON.stringify(obj) +"\r\n\r\n");
            // res.end();
        },1000)
    }
});

server.listen(8080);

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>主页</h1>
    <script>
        let source = new EventSource("/sse");

        source.onopen = function(){ // 建立连接后发生
            console.log("建立连接后");
        }

        source.onmessage = function(d){
            console.log(d);
        }

        source.onerror = function(err){ // 发生问题时发生
            console.log(err)
        }

    </script>
</body>
</html>