springboot整合websocket基于STOMP

WebSocke介绍

WebSocket协议是应用程序处理实时消息的方法之一。最常见的替代方案是长轮询(long polling)和服务器推送事件(server-sent events)。

目录结构大概是这样的

pom

 <!-- thymeleaf 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- web 启动类 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- WebSocket 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- test 单元测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

JAVA代码

1配置基于STOMP的websocket

@Configuration
@EnableWebSocketMessageBroker//注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    //方法表示注册STOMP协议的节点，并指定映射的URL
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //用来注册STOMP协议节点，同时指定使用SockJS
        registry.addEndpoint("/endpoint")
                .setAllowedOrigins("*") //解决跨域问题
                .withSockJS();
    }

    //用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/queue
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //点对点应配置一个/user消息代理，广播式应配置一个/topic消息代理
        registry.enableSimpleBroker("/topic","/user");
        // 客户端向服务端发送消息需有/app 前缀
       // registry.setApplicationDestinationPrefixes("/app");
        //点对点使用的订阅前缀（客户端订阅路径上会体现出来），不设置的话，默认也是/user/
        registry.setUserDestinationPrefix("/user");
    }
}

2客户端发往服务器消息实体类

/**
 * 客户端发往服务器消息实体
 */
public class Message {
    private String name;

    public String getName() {
        return name;
    }
}

3服务器发往客户端消息实体类

/**
 * 服务器发往客户端消息实体
 */
public class Response {
    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }

    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }
}

4User

public class User {
    private int id;
    private String name;
    private int age;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

5页面控制

//注意，这里使用的是 @Controller 注解，用于匹配 html 前缀，加载页面。
@Controller
public class ViewController {

    @GetMapping("/index")
    public String getViewIndex(){
        return "index";
    }

    @GetMapping("/queue")
    public String getView(){
        return "queue";
    }

    @GetMapping("/response")
    public String getViewResponse(){
        return "response";
    }
}

6 controller

@RestController
public class WebSocketController {

    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;

    //广播推送消息
    @MessageMapping("/hello") // @MessageMapping 和 @RequestMapping 功能类似，浏览器向服务器发起消息，映射到该地址。
    @SendTo("/topic/say") // 如果服务器接受到了消息，就会对订阅了 @SendTo 括号中的地址的浏览器发送消息。
    public Response say(Message message) throws Exception {
        Thread.sleep(3000);
        return new Response("Hello," + message.getName() + "!");
    }

    //广播推送消息,作用同上
    @MessageMapping("/response")
    public void sendTopicMessage() {
        System.out.println("后台广播推送！");
        User user=new User();
        user.setName("杨杰");
        user.setAge(10);
        simpMessagingTemplate.convertAndSend("/topic/response",user);
    }


    //聊天
    @MessageMapping("/chat")
    public void sendMsg(){
        System.out.println("后台一对一推送！");
        User user=new User();
        user.setId(1);
        user.setName("oyzc");
        user.setAge(10);
        simpMessagingTemplate.convertAndSendToUser(user.getId()+"","/user/chat",user);
    }

}

HTML页面

1queue.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 src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.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() {
        // 连接 SockJs 的 endpoint 名称为 "/endpointNasus"
        var socket = new SockJS('/endpoint');
        // 使用 STOMP 子协议的 WebSocket 客户端
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log('Connected: ' + frame);
            // 通过 stompClient.subscribe 订阅 /queue 目标发送的信息，对应控制器的 SendTo 定义
            stompClient.subscribe('/topic/say', function(respnose){
                // 展示返回的信息，只要订阅了 /queue 目标，都可以接收到服务端返回的信息
                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 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        stompClient.send("/hello", {}, JSON.stringify({ 'name': name }));
    }

    function showResponse(message) {
        // 接收返回的消息
        var response = $("#response");
        response.html(message);
    }
</script>
</body>
</html>

2index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>websocket.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body onload="disconnect()">
<div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    <div id="conversationDiv">
        <p>模拟发送消息</p>
        <button id="sendName" onclick="sendName();">发送</button>
    </div>
    <p id="response"></p>
</div>

<!-- 独立JS -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript">
    var stompClient = null;
    //加载完浏览器后  调用connect（），打开双通道
    (function(){
        //打开双通道
        connect()
    })
    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function() {
        disconnect()
    }
    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 userId=1;
        var socket = new SockJS('/endpoint'); //连接SockJS的endpoint名称为"endpointOyzc"
        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
        stompClient.connect({},function(frame){//连接WebSocket服务端
            console.log('Connected:' + frame);
            setConnected(true);
            //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
            stompClient.subscribe('/user/' + userId + '/user/chat',function(response){
                console.log('1:'+response);
                showResponse(JSON.parse(response.body))
            });
        });
    }
    function sendName() {
        // 向服务端发送消息
        // 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        stompClient.send("/chat", {}, {});
    }
    //关闭双通道
    function disconnect(){
        if(stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }
    function showResponse(message){
        var response = $("#response");
        response.append("<p>只有userID为"+message.id+"的人才能收到</p>");
    }
</script>
</body>
</html>

3response.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>websocket.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body onload="disconnect()">
<div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    <div id="conversationDiv">
        <p>模拟发送消息</p>
        <button id="sendName" onclick="sendName();">发送</button>
    </div>
    <p id="response"></p>
</div>

<!-- 独立JS -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript">
    var stompClient = null;
    //加载完浏览器后  调用connect（），打开双通道
    (function(){
        //打开双通道
        connect()
    })
    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function() {
        disconnect()
    }
    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }
    function sendName() {
        // 向服务端发送消息
        // 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        stompClient.send("/response", {}, {});
    }
    function connect(){
        var socket = new SockJS('/endpoint'); //连接SockJS的endpoint名称为"endpointOyzc"
        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
        stompClient.connect({},function(frame){//连接WebSocket服务端
            console.log('Connected:' + frame);
            setConnected(true);
            //通过stompClient.subscribe订阅/topic/response 目标(destination)发送的消息
            stompClient.subscribe('/topic/response',function(response){
                console.log('1:'+response);
                showResponse(JSON.parse(response.body))
            });
        });
    }
    //关闭双通道
    function disconnect(){
        if(stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }
    function showResponse(message){
        var response = $("#response");
        response.append("<p>用户名为:"+message.name+"</p>");
    }
</script>
</body>
</html>