Springboot整合websocket实现一对一消息推送和广播消息推送

springboot基础环境

请参考springboot文档

maven依赖

1        <dependency>
2            <groupId>org.springframework.boot</groupId>
3            <artifactId>spring-boot-starter-websocket</artifactId>
4        </dependency>

代码准备

准备常量类

1    //webSocket相关配置
2    //链接地址
3    public static String WEBSOCKETPATHPERFIX = "/ws-push";
4    public static String WEBSOCKETPATH = "/endpointWisely";
5    //消息代理路径
6    public static String WEBSOCKETBROADCASTPATH = "/topic";
7    //前端发送给服务端请求地址
8    public static final String FORETOSERVERPATH = "/welcome";
9    //服务端生产地址,客户端订阅此地址以接收服务端生产的消息
10    public static final String PRODUCERPATH = "/topic/getResponse";
11    //点对点消息推送地址前缀
12    public static final String P2PPUSHBASEPATH = "/user";
13    //点对点消息推送地址后缀,最后的地址为/user/用户识别码/msg
14    public static final String P2PPUSHPATH = "/msg";

接收前端消息实体

1public class WiselyMessage {
2    private String name;
3
4    public String getName() {
5        return name;
6    }
7
8    public void setName(String name) {
9        this.name = name;
10    }
11}

后台发送消息实体

1private String responseMessage;
2
3    public WiselyResponse(String responseMessage){
4        this.responseMessage = responseMessage;
5    }
6
7    public String getResponseMessage() {
8        return responseMessage;
9    }
10
11    public void setResponseMessage(String responseMessage) {
12        this.responseMessage = responseMessage;
13    }
14配置websocket
15@Configuration
16// @EnableWebSocketMessageBroker注解用于开启使用STOMP协议来传输基于代理（MessageBroker）的消息，这时候控制器（controller）
17// 开始支持@MessageMapping,就像是使用@requestMapping一样。
18@EnableWebSocketMessageBroker
19public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
20
21    @Override
22    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
23        //注册一个Stomp的节点（endpoint）,并指定使用SockJS协议。
24        stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).withSockJS();
25    }
26
27    @Override
28    public void configureMessageBroker(MessageBrokerRegistry registry) {
29        //服务端发送消息给客户端的域,多个用逗号隔开
30        registry.enableSimpleBroker(Constant.WEBSOCKETBROADCASTPATH, Constant.P2PPUSHBASEPATH);
31        //定义一对一推送的时候前缀
32        registry.setUserDestinationPrefix(Constant.P2PPUSHBASEPATH);
33        //定义websoket前缀
34        registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);
35    }
36}
37service
38@Service
39public class WebSocketService {
40
41    @Autowired
42    private SimpMessagingTemplate template;
43
44    /**
45     * 广播
46     * 发给所有在线用户
47     *
48     * @param msg
49     */
50    public void sendMsg(WiselyResponse msg) {
51        template.convertAndSend(Constant.PRODUCERPATH, msg);
52    }
53
54    /**
55     * 发送给指定用户
56     * @param users
57     * @param msg
58     */
59    public void send2Users(List<String> users, WiselyResponse msg) {
60        users.forEach(userName -> {
61            template.convertAndSendToUser(userName, Constant.P2PPUSHPATH, msg);
62        });
63    }
64}

控制器

1@Controller
2public class WsController {
3
4    @Resource
5    WebSocketService webSocketService;
6
7    @MessageMapping(Constant.FORETOSERVERPATH)//@MessageMapping和@RequestMapping功能类似，用于设置URL映射地址，浏览器向服务器发起请求，需要通过该地址。
8    @SendTo(Constant.PRODUCERPATH)//如果服务器接受到了消息，就会对订阅了@SendTo括号中的地址传送消息。
9    public WiselyResponse say(WiselyMessage message) throws Exception {
10        List<String> users = Lists.newArrayList();
11        users.add("d892bf12bf7d11e793b69c5c8e6f60fb");//此处写死只是为了方便测试,此值需要对应页面中订阅个人消息的userId
12        webSocketService.send2Users(users, new WiselyResponse("admin hello"));
13
14        return new WiselyResponse("Welcome, " + message.getName() + "!");
15    }
16}

页面

1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4    <meta charset="UTF-8" />
5    <title>Spring Boot+WebSocket+广播式</title>
6
7</head>
8<body onload="disconnect()">
9<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
10<div>
11    <div>
12        <button id="connect" onclick="connect();">连接</button>
13        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
14    </div>
15    <div id="conversationDiv">
16        <label>输入你的名字</label><input type="text" id="name" />
17        <button id="sendName" onclick="sendName();">发送</button>
18        <p id="response"></p>
19        <p id="response1"></p>
20    </div>
21</div>
22<!--<script th:src="@{sockjs.min.js}"></script>
23<script th:src="@{stomp.min.js}"></script>
24<script th:src="@{jquery.js}"></script>-->
25<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
26<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
27<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
28<script th:inline="javascript">
29    var stompClient = null;
30    //此值有服务端传递给前端,实现方式没有要求
31    var userId = [[${userId}]];
32
33    function setConnected(connected) {
34        document.getElementById('connect').disabled = connected;
35        document.getElementById('disconnect').disabled = !connected;
36        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
37        $('#response').html();
38    }
39
40    function connect() {
41        var socket = new SockJS('/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
42        stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
43        stompClient.connect({}, function(frame) {//3连接webSocket的服务端。
44            setConnected(true);
45            console.log('开始进行连接Connected: ' + frame);
46            //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
47            stompClient.subscribe('/topic/getResponse', function(respnose){
48                showResponse(JSON.parse(respnose.body).responseMessage);
49            });
50            //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
51            stompClient.subscribe('/user/' + userId + '/msg', function(respnose){
52                console.log(respnose);
53                showResponse1(JSON.parse(respnose.body).responseMessage);
54            });
55        });
56    }
57
58
59    function disconnect() {
60        if (stompClient != null) {
61            stompClient.disconnect();
62        }
63        setConnected(false);
64        console.log("Disconnected");
65    }
66
67    function sendName() {
68        var name = $('#name').val();
69        //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
70        stompClient.send("/ws-push/welcome", {}, JSON.stringify({ 'name': name }));
71    }
72
73    function showResponse(message) {
74        var response = $("#response");
75        response.html(message);
76    }
77    function showResponse1(message) {
78        var response = $("#response1");
79        response.html(message);
80    }
81</script>
82</body>
83</html>

测试

点击连接控制台输出

此时服务端控制器接收到请求

同时给指定用户发送了消息,所以控制台接收到消息

同时因为控制器有注解@SendTo所以会向@SendTo的地址广播消息,客户端订阅了广播地址所有控制台显示接收了消息

Springboot整合websocket实现一对一消息推送和广播消息推送

评论区

相关推荐