SpringBoot之WebSocket广播式

来源：互联网发布：linux启动mysql 编辑：程序博客网时间：2024/06/05 03:10

广播式是指服务端有消息时会将消息发送给所有连接了当前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的消息，这时控制器支持使用@MessageMappingpublic 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;@Controllerpublic 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实战

阅读全文

0 0