SpringBoot+Vue+Websocket 实现服务器端向客户端主动发送消息

本文通过一个实际的场景来介绍在前后端分离的项目中通过 WebSocket 来实现服务器端主动向客户端发送消息的应用。主要内容如下

Websocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 连接成功后，服务端与客户端可以双向通信。在需要消息推送的场景，Websocket 相对于轮询能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

具体如下特点

在客户端的列表数据中有个 status 字段，服务器端需要花费较长的时间进行处理，处理完成后才会更新对应数据的 status 字段值，通过 Websocket 的处理流程如下：

通过注入 ServerEndpointExporter 类，用于在项目启动的时候自动将使用了 @ServerEndpoint 注解声明的 Websocket endpoint 注册到 WebSocketContainer 中。

为什么增加一个 ServerEndpointExporter Bean，并通过在一个类上增加 @ServerEndpoint 和 @Component 注解就可以实现服务器端 Websocket 功能，这里简单解析一下。

java 定义了一套 javax.servlet-api, 一个 HttpServlet 就是一个 HTTP 服务。java websocket 并非基于 servlet-api 简单扩展, 而是新定义了一套 javax.websocket-api。

一个 websocket 服务对应一个 Endpoint。与 ServletContext 对应, websocket-api 也定义了 WebSocketContainer, 而编程方式注册 websocket 的接口是继承自 WebSocketContainer 的 ServerContainer。

一个 websocket 可以接受并管理多个连接, 因此可被视作一个 server。主流 servlet 容器都支持 websocket, 如 tomcat, jetty 等。看 ServerContainer api 文档, 可从 ServletContext attribute 找到 ServerContainer。

W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ，主要用来做持久的离线缓存。

Service Worker 有以下功能和特性：

由于 Workers 与主线程分开运行，因此 Service Worker 独立于与其关联的应用程序。这将导致一下结果：

由于 Service Worker 没有阻塞（它被设计为完全异步），同步 XHR 和localStorage 不能在 Service Worker 中使用。

当应用程序处于没有活动状态时，Service Worker 可以从服务器接收推送消息。这可以让您的应用程序向用户显示推送通知，即使它未在浏览器中打开。

registration.scope 决定 Service Worker 可以控制哪些文件，换句话说 Service Worker 将从哪个路径拦截请求。默认的范围是 Service Worker 文件的位置，并扩展到以下所有目录。因此，如果 service-worker.js 位于根目录中，则服务工作人员将控制来自该域中所有文件的请求。

当然您还可以在注册时通过传入附加参数来设置任意范围。例如：

main.js

激活后，Service Worker 将控制加载在其范围内的所有页面，并开始监听来自这些页面的事件。但是，在 Service Worker 激活之前加载的页面不在 Service Worker 控制之下。当您关闭并重新打开您的应用程序时，或者 Service Worker 调用 clients.claim 时，新的 Service Worker 才会生效。在此之前，来自该页面的请求将不会被新的 Service Worker 拦截。这是可以保证您网站的一致性。

三、具体应用

有了 sw.js 之后就可以使用 workbox 了，你只需要在 sw.js 中导入 workbox 就可以使用了：

比较完整的 sw.js ： https://wangdaodao.com/sw.js

workbox.strategies 对象为我们提供了几种最常用的策略：

Stale-While-Revalidate

Cache First

Cache Only

---