spring stomp websocket demo

時間 2019-12-01

標籤 spring stomp websocket demo 欄目 Spring 简体版

原文原文鏈接

配置信息

package com.ssyouxia.config;

import java.util.Map;

import javax.servlet.http.HttpSession;

import org.springframework.context.annotation.Configuration;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;

@Configuration
@EnableWebSocketMessageBroker
//@ServerEnd
public class AppWebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        //這句話表示在topic和user這兩個域上能夠向客戶端發消息。
//        config.enableSimpleBroker("","/topic");
        config.enableSimpleBroker("/queue","/user","/topic");
        //表示客戶單向服務器端發送時的主題上面須要加"/calcApp"做爲前綴
        config.setApplicationDestinationPrefixes("/calcApp");
        //表示給指定用戶發送一對一的主題前綴是"/user"
        config.setUserDestinationPrefix("/user");
        //What the UserDestinationResolver makes is removing '/user' prefix. Then in the non-working case the destination remianed was '/search/{'user'+userSessionId}', but '/search' is filtered out, because there was not simpleBroker is enabled there.
//		config.set
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // TODO Auto-generated method stub
        //指定socket鏈接url
        registry.addEndpoint("/liyh").setHandshakeHandler(new DefaultHandshakeHandler() {

            public boolean beforeHandshake(
                    ServerHttpRequest request,
                    ServerHttpResponse response,
                    WebSocketHandler wsHandler,
                    Map attributes) throws Exception {

                if (request instanceof ServletServerHttpRequest) {
                    ServletServerHttpRequest servletRequest
                            = (ServletServerHttpRequest) request;
                    HttpSession session = servletRequest
                            .getServletRequest().getSession();
                    attributes.put("sessionId", session.getId());
                }
                return true;
            }
        }).setAllowedOrigins("*").withSockJS();
//		registry.set
    }


}

controller

package com.ssyouxia.controller;


import com.ssyouxia.vo.CalcInput;
import com.ssyouxia.vo.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.messaging.simp.annotation.SendToUser;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AppWebSocketController {

    @Autowired
    private SimpMessagingTemplate template;

    @MessageMapping("/add")
    @SendTo("/topic/showResult")
    public Result addNum(CalcInput input) throws Exception {
        Thread.sleep(2000);
        Result result = new Result(input.getNum1() + "+" + input.getNum2() + "=" + (input.getNum1() + input.getNum2()));
        return result;
    }

    @RequestMapping("/start")
    public String start() {
        return "/start";
    }

	/*@MessageMapping("/sendToOne")
	@SendToUser()
	public Object sendToUser(){
		Map<String, Object> map = new HashedMap();
		map.put("name", "liyuhang");
		return map;
	}*/

    @MessageMapping("/search")
    @SendToUser // <- maps to "/user/queue/search"
    public String search(@Payload String xxx) {
        return "TEST1234";
    }

    @GetMapping("/sendToUser")
    public void sendToUser(){
//		this.template.convertAndSendToUser("123", "/event", "Hello");
        this.template.convertAndSendToUser("123","/message","後臺具體用戶消息");
    }

    public SimpMessagingTemplate getTemplate() {
        return template;
    }

    public void setTemplate(SimpMessagingTemplate template) {
        this.template = template;
    }
}

操做界面

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculator App Using Spring 4 WebSocket</title>
    <script type="text/javascript">
        var baseSocketPath='<%=request.getAttribute("baseSocketPath")%>';
        var basePath='<%=request.getAttribute("basePath")%>';
    </script>
    <script src="<%=request.getAttribute("basePath")%>js/sockjs-0.3.4.js"></script>
    <%--<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>--%>
    <script src="<%=request.getAttribute("basePath")%>js/stomp.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('calculationDiv').style.visibility = connected ? 'visible'
                : 'hidden';
            document.getElementById('calResponse').innerHTML = '';
        }
        function connect() {
        	var socket = new SockJS('/liyh');
            //var socket = new WebSocket("ws:/localhost:8080/wsocketdemo/ss");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/showResult', function(calResult) {
                    showResult(JSON.parse(calResult.body).result);
                });

                stompClient.subscribe('/user/queue/search', function(data){
                    alert(data.body);
                });

                stompClient.subscribe('/user/' + 123 + '/message', function(message){
                    console.log("收到session消息："+message.body);//body中爲具體消息內容
                });
            });
        }
        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }
        function sendNum() {
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            stompClient.send("/calcApp/add", {}, JSON.stringify({
                'num1' : num1,
                'num2' : num2
            }));
        }
        function showResult(message) {
            var response = document.getElementById('calResponse');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }

        function send123() {
            stompClient.send("/calcApp/search", {}, "test");
        }
    </script>
</head>
<body>
<noscript>
    <h2>Enable Java script and reload this page to run Websocket Demo</h2>
</noscript>
<h1>Calculator App Using Spring 4 WebSocket</h1>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        <br />
        <br />
    </div>
    <div id="calculationDiv">
        <label>Number One:</label><input type="text" id="num1" /><br /> <label>Number
        Two:</label><input type="text" id="num2" /><br />
        <br />
        <button id="sendNum" onclick="sendNum();">Send to Add</button>
        <p id="calResponse"></p>
    </div>
    <button id="send" onclick="send123();">send</button>
</div>
</body>
</html>