SpringBoot之WebSocket广播式

最新推荐文章于 2024-03-19 01:06:30 发布

wangtuoyuan

最新推荐文章于 2024-03-19 01:06:30 发布

阅读量842

点赞数

分类专栏： springboot 文章标签： springBoot

本文链接：https://blog.csdn.net/qq_34912469/article/details/75084639

版权

springboot 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

1.首先新建SpringBoot项目

略

2.引入sockjs.min.js、stomp.min.js、jquery.min.js

可自行下载。下载后放在src/main/resources/static下。

3. 配置webSocket

package com.wangh.sringboot_websocket;

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;
/**
 *广播式：服务端有消息时会将消息发送给所有连接了当前endpoint的浏览器
 */
@Configuration
@EnableWebSocketMessageBroker //开启webSocket支持。开启使用STOMP协议传输基于代理MessageBroker的消息，这时控制器支持使用@MessageMapping
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    //注册STOMP协议的节点Endpoint，并映射指定URL
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //注册一个Endpoint节点，并指定使用SockJS协议
        registry.addEndpoint("/endpointEasted").withSockJS();
    }

    @Override
    //配置消息代理
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //广播式应配置一个/topic消息代理
        registry.enableSimpleBroker("/topic");
    }

}

浏览器向服务器发送消息接受类

package com.wangh.sringboot_websocket;
/**
 * 浏览器向服务器发送消息接受类
 */
public class EastedMessage {

    private String name;

    public String getName() {
        return name;
    }
}

服务器端向浏览器端发送消息类

package com.wangh.sringboot_websocket;
/**
 *服务器端向浏览器端发送消息类
 */
public class EastedResponse {

    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }
}

控制器类

package com.wangh.sringboot_websocket;

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

@Controller
public class EastedController {

    @MessageMapping("/welcome")//当浏览器向服务器发送请求时，通过@MessageMapping映射此路径。
    @SendTo("/topic/getResponse")//当服务端有消息时对订阅了@SendTo的路径浏览器发送消息
    public EastedResponse say(EastedMessage message) throws InterruptedException{
        Thread.sleep(3000);
        return new EastedResponse("Welcome" + message.getName() + "!");
    }
}

新建页面

在src\main\resources\templates下新建easted.html

<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
  <head>
    <title>WebSocket广播式</title>
    <meta name="content-type" content="text/html; charset=UTF-8"/>
  </head>

  <body onload="disconnect()">
    <div>
        <div>
            <button id="connect" onclick="connect()">连接</button>
            <button id="disconnect" onclick="disconnect()">断开连接</button>
        </div>
        <div id="conversionDiv">
            <label>输入你的名字</label><input type="text" id="name"/>
            <button id="sendname" onclick="sendname()">发送</button>
            <p id="response"></p>
        </div>
    </div>
    <script th:src="@{sockjs.min.js}"></script>
    <script th:src="@{stomp.min.js}"></script>
    <script th:src="@{jquery.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("conversionDiv").style.visibility=connected ? "visible" : "hidden";
            $("#response").html();
        }

        function connect(){
            var socket = new SockJS("/endpointEasted");
            stompClient = Stomp.over(socket);
            stompClient.connect({},function frame(){
                setConnected(true);
                stompClient.subscribe("/topic/getResponse", function(response){
                    showResponse(JSON.parse(response.body).responseMessage);
                });
            });
        }

        function disconnect(){
            if(stompClient != null){
                stompClient.disconnect();
            }
            setConnected(false);
        }

        function sendname(){
            var name = $("#name").val();
            stompClient.send("/welcome", {}, JSON.stringify({'name':name}));
        }

        function showResponse(message){
            var response = $("#response");
            response.html(message);
        }
    </script>
  </body>
</html>

运行

预期为：当一个浏览器发送消息到服务器时，其他浏览器也能接受到该消息。
开启三个浏览器窗口，访问http://localhost:8080,分别连接服务器，然后在一个浏览器发送消息，其他浏览器接收消息。

源自：JavaEE开发的颠覆者-SpringBoot实战

wangtuoyuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot之WebSocket广播式

广播式是指服务端有消息时会将消息发送给所有连接了当前endpoint的浏览器。1.首先新建SpringBoot项目略2.引入sockjs.min.js、stomp.min.js、jquery.min.js可自行下载。下载后放在src/main/resources/static下。3. 配置webSocketpackage com.wangh.sringboot_websocket;import or
复制链接

扫一扫