SpringBoot+websocket广播式应用

1、建立一个简单的SpringBoot

项目，推荐使用idea，这里我只选择了websocket，thymeleaf。

2、配置websocket，需要使用@EnableWebSocketMessageBroker//注解开启STOMP协议来传输基于代理（message broker）的消息，并通过实现WebSocketMessageBrokerConfigurer，重写其方法来配置websocket

注：springboot2.x之前的版本是继承AbstractWebSocketMessageBrokerConfigurer,目前已过时

package com.socket.websocket.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;

/**
 * @ClassName WebSocketConfig
 * @Description TODO 配置WebSocket
 * @Author shanzz
 * @Date 2018/12/29 15:55
 * @Version 1.0
 **/
@Configuration
@EnableWebSocketMessageBroker//注解开启STOMP协议来传输基于代理（message broker）的消息，这是控制器支持使用@MessageMaping，就像使用@RequestMapping一样
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//注册STOMP协议的节点（endpoint），并映射指定的URL
        registry.addEndpoint("/endpointWisely").withSockJS();//注册一个STOMP的endpoint，并使用SocketJS协议
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {//配置消息代理
        registry.enableSimpleBroker("/topic");//广播式应配置一个/topic消息代理
    }
}

3、浏览器向服务器发送消息

package com.socket.websocket.domain;

/**
 * @ClassName SocketMessage
 * @Description TODO 浏览器向服务端发送的消息使用此类接收
 * @Author shanzz
 * @Date 2018/12/29 16:15
 * @Version 1.0
 **/
public class SocketMessage {

    private String name;

    public String getName() {
        return name;
    }

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

4、服务器向浏览器发送消息

package com.socket.websocket.domain;

/**
 * @ClassName SocketResponse
 * @Description TODO 服务端向浏览器发送此类的消息
 * @Author shanzz
 * @Date 2018/12/29 16:16
 * @Version 1.0
 **/
public class SocketResponse {

    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }

    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }
}

5、演示控制器

package com.socket.websocket.controller;

import com.socket.websocket.domain.SocketMessage;
import com.socket.websocket.domain.SocketResponse;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

/**
 * @ClassName WebSocketController
 * @Description TODO 控制器
 * @Author shanzz
 * @Date 2018/12/29 16:21
 * @Version 1.0
 **/
@Controller
public class WebSocketController {

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

    }
}

6、演示页面

扫描二维码关注公众号，回复： 4768042 查看本文章

位置：src\main\resources\templates\ws.html

需引入外部资源:

<!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>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.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() {
        var socket = new SockJS('/endpointWisely'); //连接SockJS的endpoint名称为"/endpointWisely"
        stompClient = Stomp.over(socket);//使用STOMP子协议的WebSocket客户端.
        stompClient.connect({}, function(frame) {//连接WebSocket服务端
            setConnected(true);
            console.log('Connected: ' + frame);
            //通过stompClient.subscribe订阅/topic/getResponse目标发送的消息，这个是在控制器的@SendTo中定义的
            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目标发送消息，这个是在控制器的@MessageMapping中定义的
        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));
    }

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

7、配置视图解析器

package com.socket.websocket.config;

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

/**
 * @ClassName WebMvcConfig
 * @Description TODO 配置viewController 提供页面的映射路径
 * @Author shanzz
 * @Date 2018/12/29 16:48
 * @Version 1.0
 **/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/ws").setViewName("/ws");
    }
}

8、运行程序http://localhost:8080/ws

开启多个浏览器窗口，任意一个连接向服务器发送消息，其他浏览器都可以收到

参考自：JavaEE开发的颠覆者：SpringBoot实战第七章，7.6.3

SpringBoot+websocket广播式应用

猜你喜欢