springboot websocket stompjs socketjs 按主题订阅

最新推荐文章于 2024-06-29 13:58:51 发布

Fisher_yu01

最新推荐文章于 2024-06-29 13:58:51 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/Fisher_yu01/article/details/89607967

版权

package com.example.lesson1.config;

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;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{

    public void configureMessageBroker(MessageBrokerRegistry config){
        config.enableSimpleBroker("/topic");
//        config.setApplicationDestinationPrefixes("/app");
    }

    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/webServer").withSockJS();
    }

}

package com.example.lesson1.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.DestinationVariable;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.messaging.simp.annotation.SubscribeMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class WebSocketController {

    @Autowired
    public SimpMessagingTemplate simpMessagingTemplate;

    @RequestMapping("/websocket")
    public ModelAndView websocket(){
        return new ModelAndView("websocket");
    }

    @MessageMapping("/subscribe")
    @SendTo("/topic/getResponse/{topicId}")
    public String subscribe(@PathVariable int topicId) {
        return "服务器发送消息"+topicId;
    }

    @SubscribeMapping("/topic/getResponse/{topicId}")
    public String sub2112(@DestinationVariable int topicId) {
        return "初始化订阅消息"+topicId;
    }

    @GetMapping("/serverMessage")
    @ResponseBody
    public void serverMessage() throws InterruptedException {

        while(true){

            simpMessagingTemplate.convertAndSend("/topic/getResponse/1","服务器端消息1");
            simpMessagingTemplate.convertAndSend("/topic/getResponse/0","服务器端消息0");
            Thread.sleep(1000);
        }


    }

}

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello topic</title>

</head>
<body>
<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" οnclick="connect();">Connect</button>
        <button id="disconnect"  οnclick="disconnect();">Disconnect</button>
        <button id="unsubscribe"  οnclick="unsubscribe();">unsubscribe</button>
        <button id="resubscribe"  οnclick="resubscribe();">resubscribe</button>
    </div>
    <div id="conversationDiv">
        <labal>名字</labal><input type="text" id="name" />
        <button id="sendName" οnclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>

<script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js" ></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js" ></script>

<script type="text/javascript">
    var stompClient = null;
    function connect() {
        var socket = new SockJS("/spring-boot-vue/webServer");
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {

            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/getResponse/0', 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();
        }
        console.log("Disconnected");
    }

    function unsubscribe() {

        console.log(stompClient.subscriptions);

        for (var sub in stompClient.subscriptions) {
            if (stompClient.subscriptions.hasOwnProperty(sub)) {
                stompClient.unsubscribe(sub);
            }
        }
    }

    function resubscribe(){
        stompClient.subscribe('/topic/getResponse/1', 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 sendName() {
        var name = document.getElementById('name').value;
        stompClient.send("/subscribe", {}, JSON.stringify({ 'name': name }));
    }
</script>
</body>
</html>

Fisher_yu01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot websocket stompjs socketjs 按主题订阅

package com.example.lesson1.config;import org.springframework.context.annotation.Configuration;import org.springframework.messaging.simp.config.MessageBrokerRegistry;import org.springframework.we...
复制链接

扫一扫