spring -mvc - @EnableWebSocket

@EnableWebSocket

1.在Spring中启用WebSocket

首先,我们启用 WebSocket 功能。为此,我们需要向应用程序添加配置并使用@EnableWebSocketMessageBroker注释此类。
顾名思义,它支持 WebSocket 消息处理,并由消息代理支持:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
         registry.addEndpoint("/chat");
         registry.addEndpoint("/chat").withSockJS();
    }
}

这里我们可以看到configureMessageBroker方法用于配置消息代理。
首先,我们启用内存中消息代理将消息返回到前缀为“/topic”的目的地上的客户端。
我们通过指定“/app”前缀来过滤目标应用程序注释方法(通过@MessageMapping )来完成我们的 简单配置。
registerStompEndpoints方法注册“ /chat”端点,启用Spring 的STOMP支持。请记住,为了弹性起见,我们还在此处添加了一个无需 SockJS 即可工作的端点。
当此端点以“/app”为前缀时,它是ChatController.send()方法映射到句柄的端点。
它还启用了SockJS后备选项 ,以便在 WebSocket 不可用时可以使用替代消息传递选项。这很有用,因为并非所有浏览器都支持 WebSocket,并且可能会受到限制性网络代理的阻止。
回退让应用程序可以使用 WebSocket API,但在运行时需要时可以优雅地降级为非 WebSocket 替代方案。

2.创建消息模型

现在我们已经设置了项目并配置了 WebSocket 功能,我们需要创建一条要发送的消息。
端点将接受包含发送者名称和 STOMP 消息中文本的消息,该消息的正文是JSON对象。
该消息可能如下所示:

{
    "from": "John",
    "text": "Hello!"
}

为了对携带文本的消息进行建模,我们可以创建一个带有from和text 属性的简单Java 对象:

public class Message {

    private String from;
    private String text;

    // getters and setters
}

默认情况下,Spring 将使用Jackson库将我们的模型对象与 JSON 相互转换。

3.创建消息处理控制器

正如我们所看到的,Spring 使用 STOMP 消息传递的方法是将控制器方法关联到配置的端点。我们可以通过@MessageMapping注解来做到这一点。
端点和控制器之间的关联使我们能够在需要时处理消息:

@MessageMapping("/chat")
@SendTo("/topic/messages")
public OutputMessage send(Message message) throws Exception {
    String time = new SimpleDateFormat("HH:mm").format(new Date());
    return new OutputMessage(message.getFrom(), message.getText(), time);
}

在我们的示例中,我们将创建另一个名为OutputMessage的模型对象来表示发送到配置的目的地的输出消息。我们用发件人以及从传入消息中获取的消息文本填充对象,并使用时间戳对其进行丰富。
处理消息后,我们将其发送到使用@SendTo注释定义的适当目的地。“ /topic/messages ”目的地的所有订阅者都将收到该消息。

4.创建浏览器客户端

在服务器端进行配置后,我们将使用sockjs-client库构建一个与消息系统交互的简单 HTML 页面。
首先,我们需要导入sockjs和stomp JavaScript 客户端库。
接下来,我们可以创建一个connect()函数来打开与端点的通信,一个sendMessage()函数来发送我们的 STOMP 消息,以及一个disconnect()函数来关闭通信:

<html>
    <head>
        <title>Chat WebSocket</title>
        <script src="resources/js/sockjs-0.3.4.js"></script>
        <script src="resources/js/stomp.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';
                document.getElementById('response').innerHTML = '';
            }
            
            function connect() {
                var socket = new SockJS('/chat');
                stompClient = Stomp.over(socket);  
                stompClient.connect({}, function(frame) {
                    setConnected(true);
                    console.log('Connected: ' + frame);
                    stompClient.subscribe('/topic/messages', function(messageOutput) {
                        showMessageOutput(JSON.parse(messageOutput.body));
                    });
                });
            }
            
            function disconnect() {
                if(stompClient != null) {
                    stompClient.disconnect();
                }
                setConnected(false);
                console.log("Disconnected");
            }
            
            function sendMessage() {
                var from = document.getElementById('from').value;
                var text = document.getElementById('text').value;
                stompClient.send("/app/chat", {}, 
                  JSON.stringify({'from':from, 'text':text}));
            }
            
            function showMessageOutput(messageOutput) {
                var response = document.getElementById('response');
                var p = document.createElement('p');
                p.style.wordWrap = 'break-word';
                p.appendChild(document.createTextNode(messageOutput.from + ": " 
                  + messageOutput.text + " (" + messageOutput.time + ")"));
                response.appendChild(p);
            }
        </script>
    </head>
    <body onload="disconnect()">
        <div>
            <div>
                <input type="text" id="from" placeholder="Choose a nickname"/>
            </div>
            <br />
            <div>
                <button id="connect" onclick="connect();">Connect</button>
                <button id="disconnect" disabled="disabled" onclick="disconnect();">
                    Disconnect
                </button>
            </div>
            <br />
            <div id="conversationDiv">
                <input type="text" id="text" placeholder="Write a message..."/>
                <button id="sendMessage" onclick="sendMessage();">Send</button>
                <p id="response"></p>
            </div>
        </div>

    </body>
</html>

5.其他

@EnableWebSocket注释用于配置 Web 套接字请求的处理。可以通过实现WebSocketConfigurer类来完成自定义:

@Configuration
@EnableWebSocket
public class MyConfiguration implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(echoWebSocketHandler(), "/echo").withSockJS();
    }

    @Bean
    public WebSocketHandler echoWebSocketHandler() {
        return new EchoWebSocketHandler();
    }
}
posted @ 2024-03-08 22:29  dkpp  阅读(100)  评论(0编辑  收藏  举报