springboot 如何使用websokit 实时更新表单和按钮状态

要使用WebSocket实现实时更新表单和按钮状态，可以按照以下步骤：

1. 在pom.xml文件中添加Spring Boot WebSocket依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 创建一个WebSocket配置类，继承自`AbstractWebSocketMessageBrokerConfigurer`类，实现`registerStompEndpoints()`方法，并添加`@EnableWebSocketMessageBroker`注解，以启用WebSocket消息代理：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
 
}

3. 创建一个WebSocketController，添加`@Controller`和`@MessageMapping`注解，用于处理WebSocket消息：

@Controller
public class WebSocketController {
 
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + message.getName() + "!");
    }
 
}

4. 在HTML页面中添加WebSocket JavaScript代码，连接到WebSocket服务器，并订阅消息：

<script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
<script>
    var stompClient = null;
 
    function connect() {
        var socket = new SockJS('/websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/greetings', function (greeting) {
                showGreeting(JSON.parse(greeting.body).content);
            });
        });
    }
 
    function showGreeting(message) {
        $("#greetings").append("<tr><td>" + message + "</td></tr>");
    }
 
    $(function () {
        $("form").on('submit', function (e) {
            e.preventDefault();
        });
        connect();
    });
</script>

以上是一个简单的WebSocket实时更新表单和按钮状态的实现示例。其中，`HelloMessage`和`Greeting`是自定义的消息类，`/hello`和`/topic/greetings`是自定义的消息目的地。具体实现时，需要根据实际需求进行调整。