后端主动向前端发送通知的两种方式

一. websocket :长连接,双向的。

服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。
较为常用的一种通信方式,可自行查询相关使用方式

二. server-sent event (简称 SSE):只能从服务器端往客户端单向传输数据

简介:前端页面需要实时展示最新数据时,使用WebSocket这种方式对于后端来说相对复杂。可以使用SSE。

SSE特点


  1. SSE 与 WebSocket 作用相似,都是建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送消息。
  2. SSE 是单向通道,只能服务器向浏览器发送,不像WebSocket可以双向通讯
  3. SSE 使用简单;WebSocket 协议相对复杂。

浏览器端
SSE客户端 部署在 EventSource 对象上。

const url = 'http://...';
const eventSource = new EventSource(url);

// 连接建立,会触发open事件,在onopen属性定义回调函数
eventSource.onopen = (event) => {
  // 连接成功...
}

// 客户端收到服务器发来的数据,触发message事件,在onmessage属性定义回调函数
eventSource.onmessage = (event) => {
  // data就是服务器传回的数据(文本格式)
  const data = event.data; 
  ...
}

// 通信发生错误,触发error事件,在onerror属性定义回调函数
eventSource.onerror = () => {
  // 处理错误事件
}

// 关闭连接
eventSource.close();

源地址:https://www.cnblogs.com/wfblog/p/9814620.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。