1、广播式WebSocket

「爱情、让人受尽委屈。」 2022-05-28 09:10 234阅读 0赞

## 前言 ##

不好意思，今天没有前言

## 1、导入依赖 ##

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

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.hlj.websocket</groupId>
        <artifactId>com-hlj-websocket</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <packaging>jar</packaging>
    
        <name>com-hlj-websocket</name>
        <description>Demo project for Spring Boot</description>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.0.0.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-rest</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>
    
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    
    </project>

## 2、springBoot开启Websocket支持 ##

注解：EnableWebSocketMessageBroker

package com.hlj.websocket.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;
    
    /** * 1 通过 @EnableWebSocketMessageBroker * 开启使用stomp协议来传输 基于代理的 message broker, * 这个时候控制器支持使用MessageMapping * */
    @Configuration
    @EnableWebSocketMessageBroker //1
    public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { 
    
        /** * 注册Stomp的协议的节点，并映射指定的url * @param registry */
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
            //注册一个stomp的节点，并指定使用SockJS协议 ，提供给用户进行连接
            //广播式
            registry.addEndpoint("/endpointWisely").withSockJS();
    
        }
    
        /** * 配置信息代理 * @param registry */
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) {
          //广播式应配置一个topic的消息代理 ，
          //表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息，@SendTo("/topic/getResponse") 下文出现
    
            registry.enableSimpleBroker("/topic"); //2
    
        }
    
    }

## 3、添加收发消息的Bean类 ##

1、浏览器像服务端发送的消息的类

package com.hlj.websocket.WebSocket.domain;
    
    /** * 浏览器向服务器发送的消息，用这个接受 */
    public class WiselyMessage { 
        private String name;
    
        public String getName(){
            return name;
        }
    }

2、服务器向浏览器发送从此勒的消息

package com.hlj.websocket.WebSocket.domain;
    
    /** * 服务器向浏览器发送从此勒的消息 */
    public class WiselyResponse { 
        private String responseMessage;
        public WiselyResponse(String responseMessage){
            this.responseMessage = responseMessage;
        }
        public String getResponseMessage(){
            return responseMessage;
        }
    }

## 4、添加控制器与用户交互 ##

/** * * Created by HealerJean on 2017/4/8. */
    @Controller
    public class WsController { 
        /** * 广播式 */
        @MessageMapping("/welcome")//客户端浏览器用户发送信息时候的地址
        @SendTo("/topic/getResponse") //服务器有消息时候，会对订阅了这个路径中的浏览器发送消息
        public WiselyResponse say(WiselyMessage message) throws  Exception{
            Thread.sleep(3000);
            return  new WiselyResponse("welcome,"+message.getName());
        }
    }

## 5、客户端 页面，注意观察里面的JS 函数 ##

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Spring Boot+WebSocket+广播式</title>
    
    </head>
    <body onload="disconnect()">
    <noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
    <div>
        <div>
            <button id="connect" onclick="connect();">连接</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
        </div>
        <div id="conversationDiv">
            <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.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'; $('#response').html(); } function connect() { var socket = new SockJS('/endpointWisely'); //1 stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); stompClient.subscribe('/topic/getResponse', function(respnose){ //2 showResponse(JSON.parse(respnose.body).responseMessage); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { var name = $('#name').val(); //3 stompClient.send("/welcome", {}, JSON.stringify({ 'name': name })); } function showResponse(message) { var response = $("#response"); response.html(message); } </script>
    </body>
    </html>

## 代码和后面的点对点一起下载 ##

如果满意，请打赏博主任意金额，感兴趣的请下方留言吧。可与博主自由讨论哦

<table> 
 <thead> 
  <tr> 
   <th align="center">支付包</th> 
   <th align="center">微信</th> 
   <th align="center">微信公众号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/tctip/alpay.jpg" alt="支付宝" title=""></td> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/tctip/weixin.jpg" alt="微信" title=""></td> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/my/qrcode_for_gh_a23c07a2da9e_258.jpg" alt="微信公众号" title=""></td> 
  </tr> 
 </tbody> 
</table>