SpringBoot2实战训练demo2之WebSocket广播式

第一步：创建SpringBoot项目：我们要勾选web、Thymeleaf、websocket三个

第二步：配置WebSocket：广播式即服务端有消息时，会将消息发送给所有连接了当前endpoint（端点）的浏览器

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协议来传输基于代理（message broker）的消息，
// 这时控制器支持使用@MessageMapping，就像使用@RequestMapping一样
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    //注册STOMP协议的节点（endpoint），并映射的指定的URL
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        //注册一个STOMP的endpoint，并指定使用SocketJS协议
        registry.addEndpoint("/endpointDemo").withSockJS();
    }
    //配置消息代理（Message Broker）
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry){
        //广播式应配置一个/topic消息代理
        registry.enableSimpleBroker("/topic");
    }
}

第三步：浏览器向服务端发送的消息接受类

//浏览器向服务器发送的消息用此类接受
public class DemoMessage {
    private String name;

    public String getName() {
        return name;
    }
}

第四步：服务器端向浏览器发送的此类的消息

//服务器端向浏览器发送的此类的消息
public class DemoResponse {
    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }
}

第五步：演示控制器

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

//演示控制器
@Controller
public class WsController {

    //当浏览器向服务端发送请求时，通过@MessageMapping映射/welcome这个地址，类似于@RequestMapping
    @MessageMapping("/welcome")
    //当服务端有消息时，会对订阅了@SendTo中的路径的浏览器发送消息
    @SendTo("/topic/getResponse")
    public DemoResponse say(DemoMessage message) throws Exception {
        Thread.sleep(3000);
        return new DemoResponse("欢迎你：" + message.getName() + "!");
    }
}

第六步：演示页面

<!DOCTYPE html>
<html xmlns:th="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>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.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();
    }

    function connect() {
        //连接SocketJS的endpoint名称为“/endpointDemo”
        var socket = new SockJS('/endpointDemo');
        //使用STOMP子协议的WebSocket客户端
        stompClient = Stomp.over(socket);
        //连接WebSocket服务端
        stompClient.connect({}, function (frame) {
            setConnected(true);
            console.log('Connected:' + frame);
            //通过stompClient.subscribe订阅/topic/gerResponse目标（destination）发送的消息，
            // 这个是在控制器的@SendTo中定义的
            stompClient.subscribe('/topic/getResponse', function (response) {
                showResponse(JSON.parse(response.body).responseMessage);
            });
        });
    }

    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $('#name').val();
        //通过stompClient.send向。welcome目标（destination）发送消息，
        //这个是在控制器的@MessageMapping中定义的
        stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
    }

    function showResponse(message) {
        var response = $("#response");
        response.html(message);
    }
</script>
</body>
</html>

第七步：配置viewController，为ws.html提供便捷的路径映射

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

/**
 * 配置viewController，为ws.html提供便捷的路径映射
 */
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        registry.addViewController("/ws").setViewName("/ws");
    }
}

第八步：运行项目：打开两个以上浏览器界面，并访问http://localhost:8080/ws，分别连接服务器，然后在一个浏览器上发送消息，其他浏览器也能接受消息

posted @ 2019-11-20 15:53 乡野小猫阅读(147) 评论(0) 收藏举报

刷新页面返回顶部

学无止境，达为先！

SpringBoot2实战训练demo2之WebSocket广播式

公告