是什么?
- 浏览器与服务器建立连接后,浏览器发送请求,如果服务器没有该请求的数据或者无法处理该请求时,此连接不会关闭,等有了之后服务器会主动推送(只要不关闭就会一直推送)。
- 一个连接只能一个请求,建立后服务器主动向浏览器推送。
- 使用流信息向浏览器推送信息,基于http。
• 浏览器与服务器建立连接后,浏览器发送请求,如果服务器没有该请求的数据或者无法处理该请求时,此连接不会关闭,等有了之后服务器会主动推送(只要不关闭就会一直推送)。
• 一个连接只能一个请求,建立后服务器主动向浏览器推送。
• 使用流信息向浏览器推送信息,基于http。
前端实现
if (window.EventSource) {
var source = new EventSource(`请求url`)
source.onopen = (e) => {
}
source.onmessage = (e) => {
const data = JSON.parse(e.data)
if (data.state === 0) {
if (data.res.state === '0') {
console.log(data.res.info)
source.close()
} else if (data.res.state === '1') {
console.log(data.res.info)
source.close()
}
} else {
console.error(data.res.info)
source.close()
}
}
source.onerror = (e) => {
if (e.srcElement.readyState === 2) {
console.log('服务异常')
}
}
} else {
console.log('您的浏览器不支持SSE!')
}
EventSource 实例的 readyState 状态
- 0:相当于常量EventSource.CONNECTING,表示连接还未建立,或者断线正在重连。
- 1:相当于常量EventSource.OPEN,表示连接已经建立,可以接受数据。
- 2:相当于常量EventSource.CLOSED,表示连接已断,且不会重连。