springboot實現服務器端消息推送（websocket + sockjs + stomp）

時間 2019-11-07

標籤 springboot 實現服務器消息推送 websocket sockjs stomp 欄目 Spring 简体版

原文原文鏈接

　　服務器端推送技術在web開發中比較經常使用，可能早期不少人的解決方案是採用ajax向服務器輪詢消息，這種方式的輪詢頻率很差控制，因此大大增長了服務器的壓力，後來有了下面的方案：當客戶端向服務器發送請求時，服務器端會抓住這個請求不放，等有數據更新的時候才返回給客戶端，當客戶端接收到數據後再次發送請求，周而復始，這樣就大大減小了請求次數，減輕了服務器的壓力，當前主要有SSE(Server Send Event 服務器端事件發送)的服務器端推送和基於Servlet3.0+異步方法特性實現的服務器端推送。而本次我將利用webSokcet實現服務器端消息推送。話很少說上代碼：javascript

　　一、pom.xml，新建springboot項目，加入webSocket啓動包spring-boot-starter-websocket；html

　　二、WebSocketConfigjava

package com.example.demo.websocket;

import org.springframework.context.annotation.Configuration;  
import org.springframework.messaging.simp.config.MessageBrokerRegistry;  
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;  
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;  
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;  
  
@Configuration  
@EnableWebSocketMessageBroker  //註解開啓STOMP協議來傳輸基於代理的消息，此時控制器支持使用@MessageMapping
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {  
  
    @Override  
    public void configureMessageBroker(MessageBrokerRegistry config) {  
        config.enableSimpleBroker("/topic","/user");//topic用來廣播，user用來實現p2p
    }  
  
    @Override  
    public void registerStompEndpoints(StompEndpointRegistry registry) {  
        registry.addEndpoint("/webServer").withSockJS();  
        registry.addEndpoint("/queueServer").withSockJS();//註冊兩個STOMP的endpoint，分別用於廣播和點對點  
    }  
  
}

　　三、接收消息類：ReceiveMessagejquery

package com.example.demo.websocket;

public class ReceiveMessage {

    private String name;
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

　　四、響應消息類：ResponseMessageweb

package com.example.demo.websocket;

public class ResponseMessage {

    private String id;
    private String name;
    private String content;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public ResponseMessage(String id, String name, String content) {
        super();
        this.id = id;
        this.name = name;
        this.content = content;
    }
    
}

　　五、控制器類：SubControllerajax

package com.example.demo.websocket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class SubController {
    @Autowired
    public SimpMessagingTemplate template;  
      
    
    @MessageMapping("/subscribe")
    public void subscribe(ReceiveMessage rm) {
        for(int i =1;i<=20;i++) {
            //廣播使用convertAndSend方法，第一個參數爲目的地，和js中訂閱的目的地要一致
            template.convertAndSend("/topic/getResponse", rm.getName());
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

    }
    
    @MessageMapping("/queue")
    public void queuw(ReceiveMessage rm) {
        System.out.println("進入方法");
        for(int i =1;i<=20;i++) {
            /*廣播使用convertAndSendToUser方法，第一個參數爲用戶id，此時js中的訂閱地址爲
            "/user/" + 用戶Id + "/message",其中"/user"是固定的*/
            template.convertAndSendToUser("zhangsan","/message",rm.getName());
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

    }
}

　　六、在src/main/resource包下建一個static包，引入jquery-3.2.1.min.js、sock.js、stomp.js,建立topic.html和queue.html。spring

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello topic</title>
    <script src="sock.js"></script>
    <script src="stomp.js"></script>
    <script src="jquery-3.2.1.min.js"></script>   
    <script type="text/javascript">
        var stompClient = null;
        function setConnected(connected){
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            $("#response").html();
        }
        function connect() {
            var socket = new SockJS("/webServer");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/getResponse', function(response){
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(response.body));
                    response1.appendChild(p);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
        
        function sendName() {
            var name = document.getElementById('name').value;
            console.info(1111111111);
            stompClient.send("/subscribe", {}, JSON.stringify({ 'name': name }));
        }
    </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <labal>名字</labal><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>

</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello queue</title>
    <script src="sock.js"></script>
    <script src="stomp.js"></script>
    <script src="jquery-3.2.1.min.js"></script>   
    <script type="text/javascript">
        var stompClient = null;
        function setConnected(connected){
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            $("#response").html();
        }
        function connect() {
            var socket = new SockJS("/queueServer");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/user/'+document.getElementById('user').value+'/message', function(response){
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(response.body));
                    response1.appendChild(p);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
        
        function sendName() {
            var name = document.getElementById('name').value;
            console.info(1111111111);
            stompClient.send("/queue", {}, JSON.stringify({ 'name': name}));
        }
    </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <labal>用戶</labal><input type="text" id="user" />
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <labal>名字</labal><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>

</body>
</html>