feat: stomp websocket实例补全

Author: liuyueyi

pom.xml

@@ -39,6 +39,10 @@
             <groupId>com.alibaba</groupId>
             <artifactId>fastjson</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter</artifactId>

spring-boot/203-websocket/src/main/java/com/git/hui/boot/websocket/Application.java

@@ -34,6 +34,7 @@ public void sc1() throws IOException {
         String rspMsg = Thread.currentThread().getName() + " 自动返回 | sc1：" + LocalDateTime.now();
 //        MyWebSocketHandler.groupSend();
 
+        // 后端主动给前端发送消息
         simpMessagingTemplate.convertAndSend("/topic/hello", rspMsg);
     }
 

spring-boot/203-websocket/src/main/java/com/git/hui/boot/websocket/stomp/StompConfiguration.java

@@ -13,13 +13,29 @@
 @EnableWebSocketMessageBroker
 public class StompConfiguration implements WebSocketMessageBrokerConfigurer {
 
+    /**
+     * 这里定义的是客户端接收服务端消息的相关信息
+     *
+     * @param registry
+     */
     @Override
     public void configureMessageBroker(MessageBrokerRegistry registry) {
-        // 消息代理指定了客户端订阅地址，以及发送消息的路由地址
+        // 消息代理指定了客户端订阅地址，前端订阅的就是这个路径, 接收后端发送的消息
+        // 对应 index.js中的 stompClient.subscribe('/topic/hello'
         registry.enableSimpleBroker("/topic");
+
+        // 表示配置一个或多个前缀，通过这些前缀过滤出需要被注解方法处理的消息。
+        // 例如，前缀为 /app 的 destination 可以通过@MessageMapping注解的方法处理，
+        // 而其他 destination （例如 /topic /queue）将被直接交给 broker 处理
         registry.setApplicationDestinationPrefixes("/app");
     }
 
+    /**
+     * 添加一个服务端点，来接收客户端的连接
+     * 即客户端创建ws时，指定的地址, let socket = new WebSocket("ws://ws/hello");
+     *
+     * @param registry
+     */
     @Override
     public void registerStompEndpoints(StompEndpointRegistry registry) {
         // Endpoint指定了客户端建立连接时的请求地址

spring-boot/203-websocket/src/main/resources/static/css/bootstrap.min.css

@@ -12,7 +12,8 @@ function setConnected(connected) {
 }
 
 function connect() {
-    var socket = new SockJS('/ws/hello');
+    // var socket = new SockJS($("#endpoint").val());
+    var socket = new SockJS("/ws/hello");
     stompClient = Stomp.over(socket);
     stompClient.connect({}, function (frame) {
         setConnected(true);
@@ -34,12 +35,12 @@ function disconnect() {
 }
 
 function sendName() {
-    // 表示讲消息转发到那个目标，类似与http请求中的path路径
+    // 表示将消息转发到哪个目标，类似与http请求中的path路径，对应的是后端 @MessageMapping 修饰的方法
     stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
 }
 
 function showGreeting(message) {
-    $("#greetings").append("<tr><td>" + message + "</td></tr>");
+    $("#greetings").prepend("<tr><td>" + message + "</td></tr>");
 }
 
 $(function () {