sse

//  服务器推送数据:不能停止推送!
//  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>
08-06
### 什么是SSE(Server-Sent Events)? Server-Sent Events(SSE)是一种轻量级的实时通信协议,允许服务器向客户端推送实时数据。与传统的轮询和WebSocket不同,SSE专注于单向通信,即服务器向客户端发送数据[^1]。这种技术特别适用于需要实时数据更新的应用场景,例如股票行情、物流信息和在线人数统计。 ### SSE的核心特点 - **单向通信**:SSE协议设计为服务器向客户端的单向数据流,简化了实时数据推送的实现。 - **轻量级**:相比WebSocket,SSE的实现更为简单,减少了服务器和客户端的资源消耗。 - **自动重连**:如果连接中断,SSE客户端会自动尝试重新连接。 - **事件流格式**:SSE使用简单的文本格式传输数据,支持事件类型和自定义字段。 ### SSE的基本使用 SSE的实现主要依赖于`EventSource`对象。客户端通过创建`EventSource`实例与服务器建立连接,并监听服务器推送的事件。 #### 客户端代码示例 ```javascript const eventSource = new EventSource('https://example.com/sse'); eventSource.onmessage = function(event) { console.log('收到消息:', event.data); }; eventSource.addEventListener('customEvent', function(event) { console.log('收到自定义事件:', event.data); }); ``` #### 服务器端响应格式 服务器端需要返回`Content-Type: text/event-stream`的响应头,并按照SSE协议格式发送数据: ``` event: customEvent data: 这是一个自定义事件的消息 ``` ### SSE的应用场景 SSE技术适用于需要实时数据更新的场景,包括但不限于: - **股票行情**:实时展示股票价格变化。 - **物流信息**:实时更新物流状态。 - **在线人数**:实时显示在线用户数量。 - **新闻推送**:实时推送新闻或公告。 ### SSE与WebSocket的对比 | 特性 | SSE | WebSocket | |------------------|------------------------------|------------------------------| | **通信方向** | 单向(服务器到客户端) | 双向 | | **实现复杂度** | 简单 | 复杂 | | **资源消耗** | 低 | 高 | | **适用场景** | 实时数据推送 | 实时双向通信(如聊天应用) | ### SSE的优势与局限性 #### 优势 - **简单易用**:SSE的实现简单,适合快速集成。 - **低资源消耗**:相比WebSocket,SSE对服务器和客户端的资源消耗更低。 - **自动重连**:内置的自动重连机制提高了连接的可靠性。 #### 局限性 - **单向通信**:SSE仅支持服务器向客户端的数据推送,无法实现客户端向服务器的实时通信。 - **兼容性**:虽然现代浏览器普遍支持SSE,但某些旧版浏览器可能不兼容。 ### 实战示例:Node.js实现SSE服务端 以下是一个使用Node.js实现的简单SSE服务端示例: ```javascript const http = require('http'); http.createServer((req, res) => { if (req.url === '/sse') { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // 每隔5秒发送一条消息 setInterval(() => { res.write(`data: ${new Date().toLocaleTimeString()}\n\n`); }, 5000); } else { res.writeHead(404); res.end(); } }).listen(3000, () => { console.log('SSE服务已启动,端口3000'); }); ``` ### 结论 SSE技术为实时数据推送提供了一种简单高效的解决方案。通过减少资源消耗和简化实现过程,SSE成为许多Web应用的首选技术。尽管其单向通信特性限制了某些场景的应用,但在特定需求下,SSE仍然是一个非常有价值的选择。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值