SpringBoot+WebScoket广播

最新推荐文章于 2024-05-13 19:49:02 发布

在下蔡盛

最新推荐文章于 2024-05-13 19:49:02 发布

阅读量125

点赞数

分类专栏：关于java 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/cs844715586/article/details/132057095

版权

关于java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求：在多个页面中的一个页面发送一个信息，其他的页面都可以收到这个信息。

分析：多个页面连接服务器，在其中的一个页面上输入信息，其他页面可以收到这个信息。

设置端点以及端点的协议

package com.wisely.ch7_6;

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;

/**
 * Created by cs on 2017/1/4.
 */
@Configuration
@EnableWebSocketMessageBroker
//开启使用STOMP协议来传输基于代理(message broker)的消息，这时控制器Controller支持使用@MessageMapping。就像@RequestMapping
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints (StompEndpointRegistry registry){    //注册一个端点endpoint
        registry.addEndpoint("/endpointWisely").withSockJS();   //指定注册的端点endpointWisely使用SockJS协议
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry){ //配置消息代理(Message Broker)
        registry.enableSimpleBroker("/topic");      //广播式需要配置消息代理，这里配置的是/topic。
    }
}

domian

浏览器向服务器发送消息

package com.wisely.domin;

/**
 * Created by cs on 2017/1/4.
 */
public class WiselyMessage {
    private String name;

    public String getName() {
        return name;
    }
}

服务器向浏览器发送消息

package com.wisely.domin;

/**
 * Created by cs on 2017/1/4.
 */
public class WiselyResponse {
    private String responseMessage;

    public WiselyResponse(String responseMessage){
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }

}

controller

package com.wisely.web;

import com.wisely.domin.WiselyMessage;
import com.wisely.domin.WiselyResponse;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

/**
 * Created by cs on 2017/1/4.
 */
@Controller
public class WsController {
    @MessageMapping("/welcome")     //相当于RequestMapping("/welcome")
    @SendTo("/topic/getResponse")   //当服务端有消息时,会对订阅了@SendTo中的路径的浏览器发送消息
    public WiselyResponse say(WiselyMessage message) throws InterruptedException {
        Thread.sleep(3000);
        return new WiselyResponse("Welcome,"+message.getName()+"!");
    }
}

页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>spring boot+WebSocket+广播式</title>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2> </noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>
<!--
    引入STOMP协议的客户端脚本 stomp.js
    引入SockJS客户端脚本 sockjs.js
    引人jQuery脚本
-->
<script src="//cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="//cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
    var stompClient = null;
    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = ! connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }
    
    <!--
        /endpointWisely:上面定义的基于SockJS协议的端点
        二：使用STOMP协议的WebSocket客户端
        三：连接WebScoket服务端
        四：stompClient.subscribe订阅/topic/getResponse目标(destination)发送的消息，这里的
        /topic/getResponse是在控制器的@SendTo中定义的。
        五：stompClient.send向/welcome目标(destination)发送的消息，这里的
        /welcome是在控制器的@MessageMapping中定义的。
    -->
    function connect() {
        var socket = new SockJS('/endpointWisely');
        stompClient = Stomp.over(socket);   //二
        stompClient.connect({},function (frame){ //三
            setConnected(true);
            console.log('Connect:'+frame);
            stompClient.subscribe('/topic/getResponse',function (respnose) {    //四
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }
    function disconnect() {
        if(stompClient != null){
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected!!!");
    }
    function sendName() {
        var name = $('#name').val();
        stompClient.send("/welcome",{},JSON.stringify({'name':name}));      //五
    }
    function showResponse(message) {
        var response = $("#response");
        response.html(message);
    }

</script>
</body>
</html>

页面跳转controller

package com.wisely.ch7_6;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * Created by cs on 2017/1/4.
 */
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        //访问路径的方法是/ws，跳向ws.html页面
        registry.addViewController("/ws").setViewName("/ws");
    }
}