前端重新部署如何优雅地通知用户刷新网页？

最新推荐文章于 2024-05-05 18:17:26 发布

一方净土城南旧事

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量94

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_37993468/article/details/133993877

版权

前端重新部署如何优雅地通知用户刷新网页？

入行两年多了，HTML5出了好多新的东西都不知道，最近准备重新学习一下，恰好今天看到了HTML5 服务器发送事件SSE (Server-Sent Events)的内容，就准备实操记录一下。写文章之前看了【小满zs】的文章，关注他好久了，这里提及一下，跟随大佬的步伐往下走。

SSE介绍

Server-Sent-Event 指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

SSE与Websocket的区别

WebSocket是另一种用于实现实时双向通信的Web技术，它与SSE在某些方面有所不同。下面是SSE和WebSocket之间的比较：

数据推送方向：SSE是服务器向客户端的单向通信，服务器可以主动推送数据给客户端。而WebSocket是双向通信，允许服务器和客户端之间进行实时的双向数据交换。
连接建立：SSE使用基于HTTP的长连接，通过普通的HTTP请求和响应来建立连接，从而实现数据的实时推送。WebSocket使用自定义的协议，通过建立WebSocket连接来实现双向通信。
兼容性：由于SSE基于HTTP协议，它可以在大多数现代浏览器中使用，并且不需要额外的协议升级。WebSocket在绝大多数现代浏览器中也得到了支持，但在某些特殊的网络环境下可能会遇到问题。
适用场景：SSE适用于服务器向客户端实时推送数据的场景，如股票价格更新、新闻实时推送等。WebSocket适用于需要实时双向通信的场景，如聊天应用、多人协同编辑等。

根据具体的业务需求和场景，选择SSE或WebSocket取决于您的实际需求。如果您只需要服务器向客户端单向推送数据，并且希望保持简单易用和兼容性好，那么SSE是一个不错的选择。如果您需要实现双向通信，或者需要更高级的功能和控制，那么WebSocket可能更适合您的需求。

midway.js实现服务端

  @Get('/stream')  
  @ContentType('text/event-stream')  
  async stream() {  
    this.ctx.request.socket.setTimeout(0);  
    this.ctx.request.socket.setNoDelay(true);  
    this.ctx.request.socket.setKeepAlive(true);  
    this.ctx.set({  
      'Cache-Control': 'no-cache',  
      '`Connection`': 'keep-alive',  
    });
    const stream = new PassThrough();  
    this.ctx.status = 200;  
    this.ctx.body = stream;  
    const listener = (data: any) => {  
      stream.write(`data: ${data}\n\n`);  
    };
    events.on('data', listener);  
    stream.on('close', () => {  
      events.off('data', listener);  
    });
  }

前端demo(直接引用了菜鸟的在线示例，修改了服务端地址)

<!DOCTYPE html>   
<html lang="en">   
  <head>   
    <meta charset="UTF-8" />   
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />



    <title>Document</title>   
  </head>   
  <body>   
    <script>   
      if (typeof EventSource !== "undefined") {   
        let source = new EventSource("http://1.117.144.51:7001/stream");
        source.onmessage = (event) => {   
          console.log(event);   
        };
      }
    </script>   
  </body> </body>     
</html>