SPRING BOOT -- WEBSOCKET配置

最新推荐文章于 2025-07-03 15:10:06 发布

转载最新推荐文章于 2025-07-03 15:10:06 发布 · 987 阅读

java 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用WebSocket和STOMP协议实现浏览器与服务器之间的双向通信。通过Spring Boot创建了一个简单的广播式聊天应用，演示了配置步骤及客户端与服务器端交互的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket为浏览器为服务器提供了双工异步通信的功能，即浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。websocket需要浏览器的支持(ie10+、chrome 13+、firefox 6+)。

　　websocket是通过一个socket来实现双工异步通信功能，但是直接使用websocket会比较麻烦，我们使用它的子协议stomp，它是一个更高级的协议，stomp使用一个基于帧的格式来定义消息，与http的request和response类似。

　　实战（新建spring boot项目，选择thymeleaf和websocket）

　　1、广播式

　　广播式即服务端有消息时，会将消息发给所有连接了当前endpoint的浏览器。

　　① 配置websocket，需要再配置类上使用@EnableWebSocketMessageBroker开启websocket，并通过AbstractWebSocketMessageBrokerConfigurer类。

package com.example.demo;
 
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;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
 
/**
 * Created by xingzhuipingye on 2017/5/25.
 */
 
@Configuration
//开启stomp协议来传输基于代理message broker的消息
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    //注册stomp协议节点 endpoint
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        //注册一个endpoint 并指定是哟个socketjs
        stompEndpointRegistry.addEndpoint("/endpointWisely").withSockJS();
    }
 
    @Override
    //配置消息代理
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //广播式配置一个topic的消息代理
        registry.enableSimpleBroker("/topic");
    }
}

　　② 浏览器向服务器发送的类

package com.example.demo;
 
/**
 * Created by xingzhuipingye on 2017/5/25.
 */
//浏览器向服务器发送消息用此类接受
public class WiselyMessage {
    private String name;
 
    public String getName() {
        return name;
    }
}

　　③ 服务器向浏览器发送此类的消息

package com.example.demo;
 
/**
 * Created by xingzhuipingye on 2017/5/25.
 */
public class WiselyResponse {
    private String responseMessage;
 
    public WiselyResponse(String responseMessage) {
        this.responseMessage = responseMessage;
    }
 
    public String getResponseMessage() {
        return responseMessage;
    }
}

　　④ 控制器

package com.example.demo;
 
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
 
/**
 * Created by xingzhuipingye on 2017/5/25.
 */
@Controller
public class WsController {
    //当浏览器向服务器发送请求的时候通过@MessageMapping 映射/welcome 这个地址 类似 RequestMapping
    @MessageMapping("/welcome")
    //当服务器有消息的时候，会对订阅了@SendTo中的路径浏览器发送消息
    @SendTo("/topic/getResponse")
    public WiselyResponse say(WiselyMessage wiselyMessage) throws InterruptedException {
        Thread.sleep(3000);
        return new WiselyResponse("Welcome," + wiselyMessage.getName());
    }
}

　　⑤ 页面

<!DOCTYPE html>
<html lang="cn" xml:th="http://www.thymeleaf.org" xmlns:link="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="http://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body onload="disconnect()">
 
    <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>
 
</body>
<script>
    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');
        stompClient = Stomp.over(socket);
        stompClient.connect({},function (frame) {
            setConnected(true);
            console.log('connected'+ frame);
            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',{},JSON.stringify({'name':name}));
    }
    function  showResponse(message) {
        var response = $('#response');
        response.html(message);
    }
 
</script>
</html>