一. websocket :长连接,双向的。
服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。
较为常用的一种通信方式,可自行查询相关使用方式
二. server-sent event (简称 SSE):只能从服务器端往客户端单向传输数据
简介:前端页面需要实时展示最新数据时,使用WebSocket这种方式对于后端来说相对复杂。可以使用SSE。
SSE特点
- SSE 与 WebSocket 作用相似,都是建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送消息。
- SSE 是单向通道,只能服务器向浏览器发送,不像WebSocket可以双向通讯
- 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();