实现功能

        基于Springboot与Vue架构，首先使用Websocket实现频道订阅，在实现点对点与群发功能后，在前端调用windows自带的消息通知，实现推送功能。

开发环境

• Springboot 2.6.7
• vue 2.6.11
• socket-client 1.0.0

准备工作

在 Vue.js 项目中安装sockjs-client和stompjs。

npm install sockjs-client stompjs

在后端项目中添加依赖。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocket

         为完成单播或者广播的频道的订阅功能，需要在前端和后端完成WebSocket的基本配置。

前端配置

        需在vue项目中新建websocket.js文件，主要完成：

        1.获取userid

        2.定义WebSocketService，完成connect、subscribe、unsubscribe、sendMessage、disconnect等主要函数。

代码如下所示。

websocket.js
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';const userid = JSON.parse(sessionStorage.getItem('CurUser')).idclass WebSocketService {constructor() {this.stompClient = null;this.subscriptions = new Map(); // 存储订阅的频道}// 连接 WebSocketconnect() {const socket = new SockJS("/api/broadcast"); // 后端地址this.stompClient = Stomp.over(socket);this.stompClient.connect({}, () => {console.log('do connect method');console.log('stompClient', this.stompClient)this.subscribe('/user/' + userid.toString() + '/alone/getResponse', (response) => {if (this.onGlobalNotification) {console.log("message print", response)// this.onGlobalNotification(JSON.parse(message.body));this.onGlobalNotification(response.body);}});});}// 订阅频道subscribe(destination, callback) {const subscription = this.stompClient.subscribe(destination, callback);this.subscriptions.set(destination, subscription);}// 取消订阅unsubscribe(destination) {const subscription = this.subscriptions.get(destination);if (subscription) {subscription.unsubscribe();this.subscriptions.delete(destination);}}// 发送消息到后端sendMessage(destination, message) {console.log("sendMessage method , message is ", message.content)this.stompClient.send(destination, {}, message.content);}// 断开连接disconnect() {if (this.stompClient) {this.stompClient.disconnect();console.log('WebSocket 断开连接！');}}
}export default new WebSocketService();

后端配置

        在后端同样需要完成频道的订阅，新建文件WebSocketConfig.java，代码如下所示。

package com.wms.common;import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;import javax.annotation.Resource;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Resourcepublic AppConfig appConfig;@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/user", "/topic1", "/topic2", "/mass");// 点对点使用的订阅前缀（客户端订阅路径上会体现出来），不设置的话，默认也是 /user/// 注意，这里必须和上面设置的Broker：/user 一致（两个都可以自定义，但必须一致）。否则连接不上registry.setUserDestinationPrefix("/user/");// 指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 注册一个STOMP的endpoint端点,并指定使用SockJS协议// 前端使用这个地址连接后端 WebSocket接口registry.addEndpoint("/broadcast", "/point")// 允许所有源跨域。还可以指定ip配置：http://ip:*// 低版本的SpringBoot（2.1.5.RELEASE 就不行）不行.setAllowedOriginPatterns(appConfig.getFrontHttpUrl()) // 此处填写前端页面地址.withSockJS();}
}

Vue

        在用户登录之后，首先初始化WebSocket 连接，然后定义全局通知的回调，在回调函数onGlobalNotification中实现调用windows自带的通知功能Notification。

// 初始化 WebSocket 连接
WebSocketService.connect();
// 定义全局通知的回调
WebSocketService.onGlobalNotification = (message) => {this.sendNotification('xxx',message)// this.$bus.$emit("postTrigger")
};

    // 发送通知的方法sendNotification (title, body) {// console.log("sendNotification", Notification.permission)// 检查浏览器是否支持 Notification APIif ('Notification' in window) {// 如果通知权限已经授予if (Notification.permission === "granted") {new Notification(title, {body: body,icon: logoIcon,requireInteraction: true});} else if (Notification.permission !== "denied") {// 请求用户授权Notification.requestPermission().then(permission => {if (permission === "granted") {new Notification(title, {body: body,icon: logoIcon,requireInteraction: true});}});}} else {console.log("浏览器不支持通知功能。");}},

        在需要发送消息的地方使用函数sendMessage，在MethodApi处填写后端对应接口。

WebSocketService.sendMessage('/MethodApi', {content: "message you want send"});

Springboot

        在后端需要在controller文件中实现对应的MethodApi接口函数， 确定消息传递的目标用户与对应的消息，调用messagingTemplate中的函数convertAndSendToUser，完成在频道/user/userid/alone/getResponse的消息通知。

controller.java
@Autowired
private SimpMessagingTemplate messagingTemplate;// p2p notification
@MessageMapping("/MethodApi")
public void p2pNotify(String content){System.out.println(content);// 可在此处通过接受到的消息确定目标用户 userid(int) 与 对应的消息 message(string)System.out.println("=====发送通知=====");messagingTemplate.convertAndSendToUser(userid.toString(),"/alone/getResponse",message);
}

效果图

        此时就可以在本地进行测试了，效果如下：

服务器部署

        因为windows系统通知需要浏览器给予网页权限，所以需要vue启用https协议，配置如下：

module.exports = {devServer: {port:8001,https:true,proxy: {'/api': {target: "http://localhost:8091/", // 代理目标的基础路径secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true, // 支持跨域pathRewrite: {'^/api': '',}}}},
}