Document

--- theme: channing-cyan highlight: ascetic --- # 前言在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如*数据大屏的实时数据*，比如*消息中心的未读消息*，比如*聊天功能*等等。本文主要介绍SSE的使用场景和如何使用SSE。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3402830d6c9c4c0083d12f0d04f51569~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=700\&h=700\&s=164704\&e=png\&b=fdfdfd) # 服务端向客户端推送数据的实现方案有哪几种？我们常规实现这些需求的方案有以下三种 1. 轮询 2. websocket 3. SSE ### 轮询简介在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的*伪推送*，为什么说轮询是伪推送？因为*轮询本质上还是通过客户端向服务端发起一个单项传输的请求*，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。 **轮询的缺点：** 1. 首先轮询需要不断的发起请求，*每一个请求都需要经过http建立连接的流程*（比如三次握手，四次挥手），是没有必要的消耗。 2. 客户端需要从页面被打开的那一刻开始就*一直处理请求*。虽然每次轮询的消耗不大，但是一直处理请求对于客户端来说一定是不友好的。 3. *浏览器请求并发是有限制的*。比如Chrome 最大并发请求数目为 6，这个限制还有一个前提是针对同一域名的，超过这一限制的后续请求将会被阻塞。*而轮询意味着会有一个请求长时间的占用并发名额*。 4. 而如果轮询时间较长，可能又*没有办法非常及时的获取数据* ### websocket简介 websocket是一个双向通讯的协议，他的优点是，可以同时支持客户端和服务端彼此相互进行通讯。功能上很强大。缺点也很明显，websocket是一个新的协议，ws/wss。也就是说，支持http协议的浏览器不一定支持ws协议。相较于SSE来说，websocket因为功能更强大。结构更复杂。所以相对比较*重*。 **websocket对于各大浏览器的兼容性↓** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/286a0f228bf3430fb7405874704e1844~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1963\&h=760\&s=145503\&e=png\&b=efe4ce) ### SSE简介 sse是一个单向通讯的协议也是一个*长链接*，它只能支持服务端主动向客户端推送数据，但是无法让客户端向服务端推送消息。长链接是一种HTTP/1.1的持久连接技术，它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应，而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。 SSE的优点是，它是一个轻量级的协议，相对于websockte来说，他的复杂度就没有那么高，*相对于客户端的消耗也比较少*。而且*SSE使用的是http协议*（websocket使用的是ws协议），也就是现有的服务端都支持SSE，无需像websocket一样需要服务端提供额外的支持。注意:IE大魔王不支持SSE **SSE对于各大浏览器的兼容性↓** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e3195f6cfe54c898d07877600a2687e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1987\&h=637\&s=136971\&e=png\&b=f0e5d0) 注意哦，上图是SSE对于浏览器的兼容不是对于服务端的兼容。 # websocket和SSE有什么区别？ ### 轮询对于当前计算机的发展来说，几乎很少出现同时不支持websocket和sse的情况，所以轮询是在极端情况下浏览器实在是不支持websocket和see的下策。 ### Websocket和SSE 我们一般的服务端和客户端的通讯基本上使用这两个方案。首先声明:这两个方案没有绝对的好坏，只有在不同的业务场景下更好的选择。 SSE的官方对于SSE和Websocket的评价是 1. WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。 2. WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。 3. SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。 4. SSE默认支持断线重连，WebSocket则需要额外部署。 5. SSE支持自定义发送的数据类型。 ### Websocket和SSE分别适用于什么业务场景？对于SSE来说，它的*优点就是轻*，而且对于服务端的支持度要更好。换言之，*可以使用SSE完成的功能需求，没有必要使用更重更复杂的websocket。* 比如：数据大屏的实时数据，消息中心的消息推送等一系列只需要服务端单方面推送而*不需要客户端同时进行反馈的需求*，SSE就是不二之选。对于Websocket来说，*他的优点就是可以同时支持客户端和服务端的双向通讯*。所适用的业务场景：最典型的就是*聊天功能*。这种服务端需要主动向客户端推送信息，并且客户端也有向服务端推送消息的需求时，Websocket就是更好的选择。 # SSE有哪些主要的API? ```js 建立一个SSE链接：var source = new EventSource(url); ``` #### SSE连接状态 **source.readyState** * 0，相当于常量EventSource.CONNECTING，表示连接还未建立，或者连接断线。 * 1，相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。 * 2，相当于常量EventSource.CLOSED，表示连接已断，且不会重连。 #### SSE相关事件 * open事件(连接一旦建立，就会触发open事件，可以定义相应的回调函数) * message事件(收到数据就会触发message事件) * error事件(如果发生通信错误（比如连接中断），就会触发error事件) #### 数据格式 ```js Content-Type: text/event-stream //文本返回格式 Cache-Control: no-cache //不要缓存 Connection: keep-alive //长链接标识 ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1b7bc6147324436aeb5d32a6a304a92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=198\&h=153\&s=31248\&e=png\&b=f4f4f4) [SSE：相关文档，文档入口文档入口文档入口文档入口](https://www.w3cschool.cn/nwfchn/wpi3cozt.html) 显然，如果直接看api介绍不论是看这里还是看官网，大部分同学都是比较懵圈的状态，*那么我们写个demo来看一下?* ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46b374e9362d4f69a3ce23fd2c902866~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=399\&s=87458\&e=png\&b=fbfbfb) demo请看下方我更建议您先把Demo跑起来，然后在看看上面这个[w3cschool的SSE文档](https://www.w3cschool.cn/nwfchn/wpi3cozt.html)。两个配合一起看，会更方便理解些。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e2847967c0a4b3aac87d900eaadc614~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=640\&h=428\&s=150988\&e=png\&b=fcfcfc) # 如何实操一个SSE链接？Demo↓ 这里Demo前端使用的就是最基本的html静态页面连接，没有使用任何框架。后端选用语言是node，框架是Express。理论上，把这两段端代码复制过去跑起来就直接可以用了。 1. 第一步，建立一个index.html文件，然后复制前端代码Demo到index.html文件中，打开文件 2. 第二步，进入一个新的文件夹，建立一个index.js文件，然后将后端Demo代码复制进去，然后在该文件夹下执行 ```js npm init //初始化npm npm i express //下载node express框架 node index //启动服务 ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4fb67e360bf42b5ac81b139b66cb5c9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1705\&h=1288\&s=298557\&e=png\&b=1f1f1f) 在这一层文件夹下执行命令。完成以上操作就可以把项目跑起来了 ### 前端代码Demo ```js Document

``` ### 后端代码Demo（node的express） ```js const express = require('express'); //引用框架 const app = express(); //创建服务 const port = 8088; //项目启动端口 //设置跨域访问 app.all("*", function(req, res, next) { //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin", '*'); //允许的header类型 res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With"); //跨域允许的请求方式 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 可以带cookies res.header("Access-Control-Allow-Credentials", true); if (req.method == 'OPTIONS') { res.sendStatus(200); } else { next(); } }) app.get("/sse",(req,res) => { res.set({ 'Content-Type': 'text/event-stream', //设定数据类型 'Cache-Control': 'no-cache',// 长链接拒绝缓存 'Connection': 'keep-alive' //设置长链接 }); console.log("进入到长连接了") //持续返回数据 setInterval(() => { console.log("正在持续返回数据中ing") const data = { message: `Current time is ${new Date().toLocaleTimeString()}` }; res.write(`data: ${JSON.stringify(data)}\n\n`); }, 1000); }) //创建项目 app.listen(port, () => { console.log(`项目启动成功-http://localhost:${port}`) }) ``` ### 效果 ![动画3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/797d5538572943c6ad6b5db9989d33a5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2145\&h=1284\&s=5820785\&e=gif\&f=400\&b=202020) # 总结 1. SSE比websocket更轻 2. SSE是基于http/https协议的 3. websocket是一个新的协议，ws/wss协议 4. 如果只需要服务端向客户端推送消息，推荐使用SSE 5. 如果需要服务端和客户端双向推送，请选择websocket 6. 不论是SSE还是websocket，对于浏览器的兼容性都不错 7. 轮询是下策，很占用客户端资源，不建议使用。（不过偷懒的时候他确实方便） 8. *IE不支持SSE* 9. 小白同学demo如果跑不明白可以私信我 **对了，小程序不支持SSE哦** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e43b847fa704498cb2a2abdb47108480~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=181\&h=198\&s=48098\&e=png\&b=f2f2ef) ### 最后如果文章对您有帮助的话。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/076a5a28f5604f44a0bb7641c2ca2563~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=300\&h=300\&s=42273\&e=png\&b=fefefe) ##### 欢迎技术沟通，摸鱼聊天～备注来自掘金～ wx:XXF1096032096