SpringBoot之Using WebSocket to build an interactive web application

最新推荐文章于 2021-07-10 16:12:25 发布

xuanfengling

最新推荐文章于 2021-07-10 16:12:25 发布

阅读量645

点赞数

分类专栏：微服务文章标签： websocket

本文链接：https://blog.csdn.net/xuanfengling/article/details/51672640

版权

微服务专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过 STOMP来简单实现WebSocket的交互。

1 服务端接收的消息model类

package websocket.interactive.web.application.hello;

public class HelloMessage {

    private String name;

    public String getName(){
        return name;
    }
}

2 客户端接收的消息model类

package websocket.interactive.web.application.hello;

public class Greeting {

    private String content;

    public Greeting(String content){
        this.content = content;
    }

    public String getContent(){
        return content;
    }
}

3 controller类

package websocket.interactive.web.application.hello;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws InterruptedException{
        Thread.sleep(500L);
        return new Greeting("Hello, " + message.getName() + "!");
    }
}

说明：

The @MessageMapping annotation ensures that if a message is sent to destination “/hello”, then the greeting() method is called.

Internally, the implementation of the method simulates a processing delay by causing the thread to sleep for 3 seconds. This is to demonstrate that after the client sends a message, the server can take as long as it needs to process the message asynchronously. The client may continue with whatever work it needs to do without waiting on the response.
The return value is broadcast to all subscribers to “/topic/greetings” as specified in the @SendTo annotation.

4 STOMP消息配置

package websocket.interactive.web.application.hello;

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;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/hello").withSockJS();
    }

}

说明：

@EnableWebSocketMessageBroker enables WebSocket message handling, backed by a message broker.

The configureMessageBroker() method overrides the default method in WebSocketMessageBrokerConfigurer to configure the message broker. It starts by calling enableSimpleBroker() to enable a simple memory-based message broker to carry the greeting messages back to the client on destinations prefixed with “/topic”. It also designates the “/app” prefix for messages that are bound for @MessageMapping-annotated methods.

The **registerStompEndpoints() **method registers the “/hello” endpoint, enabling SockJS fallback options so that alternative messaging options may be used if WebSocket is not available. This endpoint, when prefixed with “/app”, is the endpoint that the GreetingController.greeting() method is mapped to handle.

5 客户端html

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="sockjs-0.3.4.js"></script>
    <script src="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('/hello');
            stompClient = Stomp.over(socket);            
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function(greeting){
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
    <div>
        <div>
            <button id="connect" onclick="connect();">Connect</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        </div>
        <div id="conversationDiv">
            <label>What is your name?</label><input type="text" id="name" />
            <button id="sendName" onclick="sendName();">Send</button>
            <p id="response"></p>
        </div>
    </div>
</body>
</html>

xuanfengling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot之Using WebSocket to build an interactive web application

通过 STOMP来简单实现WebSocket的交互。1 服务端接收的消息model类package websocket.interactive.web.application.hello;public class HelloMessage { private String name; public String getName(){ return name; }
复制链接

扫一扫