server sent event

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上不停的更新

server sent event相关推荐

Spark History Server和Event Log详解
前言 Spark如何持久化event SHS启动参数 SHS工作流程 DiskCache 读取eventlog 参考前言这篇文章会overall的介绍一下Spark History Server和 ...
h5 server send event(sse)
1. sse概述概念: H5支持使用JS脚本不间断的访问服务器(推送) 轮询: 页面使用js的定时器,定时发送请求查询最新数据使用js将最新数据加载至页面每发送一次数据,需要建立新的连接时间间 ...
SQL Server Extended Events 进阶 3：使用Extended Events UI
开始采用Extended Events 最大的阻碍之一是需要使用Xquery和XML知识用来分析数据.创建和运行会话可以用T-SQL完成,但是无论使用什么目标,数据都会被转换为XML.这个限制在SQL ...
SQL Server 2014新特性——基数评估（白皮书阅读笔记）
基数评估目录基数评估说明基数评估准确的重要性模型假设启用新的基数评估验证基数评估的版本在迁移到新的基数评估前要测试校验基数评估偏差问题需要手动处理的变化避免因为新的CE造成性能 ...
day32-1 事件Event
事件Event-线程每一个线程都是独立运行且状态不可预测.你把一个任务丢到子线程中,这个任务将异步执行,如何获取到这个任务的执行状态?使用threading库中的Event对象.对象包含一个可由线程 ...
SQL Server扩展事件（Extended Events）-- 将现有 SQL 跟踪脚本转换为扩展事件会话
SQL Server扩展事件(Extended Events)-- 将现有 SQL 跟踪脚本转换为扩展事件会话如果您具有想要转换为扩展事件会话的现有 SQL 跟踪脚本,则可以使用本主题中的过程创建等 ...
基于Server-Sent Event的简单在线聊天室
一.Web即时通信所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
Attachment assignment block里选择的文件是如何传到application server
Created by Jerry Wang, last modified on Dec 12, 2014 使用Chrome debug attachment upload page:从local la ...
pads中如何设置等长_如何在SQL Server中设置扩展，监控系统性能
dbForge Studio for SQL Server为有效的探索.分析SQL Server数据库中的大型数据集提供全面的解决方案,并设计各种报表以帮助作出合理的决策. dbForge Studi ...

server sent event

server sent event相关推荐

最新文章

热门文章