EventSource---SSE

711 阅读1分钟

是什么?

  • 浏览器与服务器建立连接后,浏览器发送请求,如果服务器没有该请求的数据或者无法处理该请求时,此连接不会关闭,等有了之后服务器会主动推送(只要不关闭就会一直推送)。
  • 一个连接只能一个请求,建立后服务器主动向浏览器推送。
  • 使用流信息向浏览器推送信息,基于http。 • 浏览器与服务器建立连接后,浏览器发送请求,如果服务器没有该请求的数据或者无法处理该请求时,此连接不会关闭,等有了之后服务器会主动推送(只要不关闭就会一直推送)。 • 一个连接只能一个请求,建立后服务器主动向浏览器推送。 • 使用流信息向浏览器推送信息,基于http。

bg2017052702.jpg

前端实现

// 1.判断是否支持EventSource 
if (window.EventSource) {
    //2. 创建一个EventSource实例
   var source = new EventSource(`请求url`)
   // 第二种创建实例写法,可以添加一些配置,比如打开withCredentials属性,表示是否一起发送 Cookie。
    // var source = new EventSource(url,{options})
// 3.打开通道建立连接
    source.onopen = (e) => {
      // console.log('开始建立链接')
    }
// 4. 客户端收到服务器发来的数据,触发message事件,接收数据
    source.onmessage = (e) => {
      const data = JSON.parse(e.data)
      if (data.state === 0) {
        if (data.res.state === '0') {
          console.log(data.res.info)
        // 	5. 关闭连接
          source.close()
        } else if (data.res.state === '1') {
          console.log(data.res.info)
          source.close()
        }
      } else {
         console.error(data.res.info)
        source.close()
      }
    }
  // 通讯失败触发的error事件
    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,表示连接已断,且不会重连。