server sent event

最新推荐文章于 2024-08-28 10:36:00 发布

渣渣前端

最新推荐文章于 2024-08-28 10:36:00 发布

阅读量691

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/dtbk123/article/details/106500305

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

h5提出的server sent event支持服务端数据发生改变时向客户端发送数据，而不用使用ajax长轮询来请求数据。Server sent event技术有几个优点：①轻量，相对简单②单向传送数据③支持http协议④默认支持断线重连⑤自定义发送数据类型

来看个例子，首先新建一个see.html文件，然后创建一个EventSource对象，监听服务端发送的数据

<!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>
    <span id='status'>Connection close</span>
    <br/>
    <span id="output"></span>
    <script>
      
        window.addEventListener('load',function(){
            var status=document.getElementById('status')
            var output=document.getElementById('output')

            var source;
         function connect(){
                source=new EventSource("stream")//向服务端建立连接
                
            //监听message事件，获取服务端发送的数据
                source.addEventListener('message',function(event){
                    output.textContent=event.data;
                },false)
                //监听open事件，判断连接是否进行中
                source.addEventListener('open',function(event){
                   status.textContent='连接打开'
                })
            //监听连接关闭
                source.addEventListener('error',function(event){
                    if(event.target.readyState==EventSource.CLOSED){
                        source.close()
                        status.textContent='连接关闭了'
                    }else{
                        status.textContent="连接关闭了，位置错误"
                    }
                })
            }
            if(!!window.EventSource){
            connect()
        }else{
            console.log('浏览器不支持')
        }
        },false)
    </script>
</body>
</html>

再在同级目录下新建一个index.js文件

var http=require('http')
var fs=require('fs')
http.createServer((req,res)=>{
    var index='./see.html'
    var filename;
    var interval;
    if(req.url==='/'){
        filename=index;
    }else{
        filename='.'+req.url;
    }
    if(filename==='./stream'){
    //设置响应头
        res.writeHead(200,{"Content-Type":'text/event-stream',
        'Catch-Control':'no-cache','Connection':'keep-alive'})
        res.write('retry:1000\n')//过1000秒重试
        res.write("data:"+new Date()+"\n\n")
        interval=setInterval(function(){
            res.write("data:"+new Date()+'\n\n')
        },1000)//每秒钟发送一次数据

        req.connection.addListener('close',function(){
            clearInterval(interval)
        },false)
    }else if(filename===index){
        fs.exists(filename,function(exists){
            if(exists){
            //读取see.html文件内容并展示在页面上
                fs.readFile(filename,function(error,content){
                    if(error){
                        res.writeHead(500)
                        res.end()
                    }else{
                        res.writeHead(200,{"Content-Type":"text/html"})
                        res.end(content,'utf-8')
                    }
                })
            }else{
                res.writeHead(404)
                res.end()
        
            }
        })
    }else{
        res.writeHead(404)
        res.end();
    }
}).listen(8000)

这样就实现了时间在see.html上不停的更新