使用websocket+socket.js+stomp.js+springboot

赫连宏伯

2023-12-01

一、配置websocket

package com.kail.socketjsdome.socketjs.conf;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @author :Dingmingming
 * @program :socketjs
 * @description :websocket configure
 * @create :2019-03-08  13:01
 **/
@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfigure implements WebSocketMessageBrokerConfigurer{
    /**
    * @Description: 注册stomp端点并将端点映射到特定的路径
    * @Param:
    * @return:
    * @Author: Dingmingming
    * @Date: 19-3-8
    **/
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocketjs") //注册一个断点 也可以理解为一个握手的地址
                .setAllowedOrigins("*")   //允许websocket跨域
                .withSockJS();            //启用websocket备选方案(浏览器不支持的话就会启动)
    }



    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //启用简单的消息代理
        registry.enableSimpleBroker("/user","/topic");
        //一对一时使用 给某个用户发送信息的前缀
        registry.setUserDestinationPrefix("/user");
        //前段访问服务端的前缀
        registry.setApplicationDestinationPrefixes("/app");
    }
}

二、controll配置

package com.kail.socketjsdome.socketjs.controll;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.annotation.SendToUser;
import org.springframework.messaging.simp.annotation.SubscribeMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author :Dingmingming
 * @program :socketjs
 * @description :websocket controller
 * @create :2019-03-08  13:17
 **/
@RestController
public class WebSocketControll {
    
    //这个方法主要是用于前段的stompclient.send方法用的
    @MessageMapping("/message")
    public String methodWithMesssage(String name){
        System.out.println("进入了message注解方法"+name);
        return "message测试";
    }

    //这个可以不使用send方法进行访问，可以直接通过订阅(subscribe)进行访问
    @SubscribeMapping("/subscribe")
    public String methodWithSubscribe(){
        System.out.println("进入了subscribe注解方法");
        return "测试";
    }
}

三、页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="username" />
    <input type="button" onclick="conn()" value="连接"/>
    <input type="button" value="发送"/>
</body>
</html>
<!-- 这两个js一定要导入 -->
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script>
    //创建websocket对象用于握手
    var websocket=new SockJS("http://localhost:8080/websocketjs");
    //这个stompCLient对象主要是用于前后台交互用的
    var stompClient = Stomp.over(websocket);
    stompClient.connect(
        {},
        function connectCallback(frame) {
            // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
            //这个是测试用的，你会发现这种访问是一次性的
            stompClient.subscribe("/app/subscribe",function(response){
                console.log(response.body);
            });
            //这个是订阅频道
            stompClient.subscribe("/topic/subscribe",function(response){
                console.log(response);
            });

            //给后台传递参数
            stompClient.send("/app/message",{},"zhangsan")

            //这种方式没什么用没有响应
            stompClient.subscribe("/app/message",function(response){
                console.log(response);
            });

        },
        function errorCallBack(error) {
            // 连接失败时（服务器响应 ERROR 帧）的回调方法
            console.error("连接失败");
        }
    );
    //这个是订阅用户频道
    function conn(){
        var username=document.getElementById('username').value;
        stompClient.subscribe('/user/' + username + '/message',function (response) {
            console.log("服务器推送内容为：   :"+response);
        });
    };


</script>

四、相关解释

后端推送信息到前端有有两种方式（注解和SimpMessagingTemplate）

@SendTo("广播地址") 如前段订阅了/topic/subscribe 那么就是在message方法上使用@SendTo(/topic/subscribe) 这是广播

@SendToUser("用户地址") 如前段订阅了subscribe（'/user/' + username + '/message'）那么在相应的@MessageMapping注解方法上加上SendToUser（"/username/message"）//这个username是前台的名称，至于为什么没有加入/user 那是因为注解会自己加入

其次就是SimpMessagingTemplate

创建对象

@Autowired
private SimpMessagingTemplate simpMessagingTemplate;

发送广播

 simpMessagingTemplate.convertAndSend("/topic/message","topic推送消息");

一对一(发送给用户)

simpMessagingTemplate.convertAndSendToUser("username","/message","推送消息");

/**
 *什么时候用app和topic
 * app是页面发送消息到达客户端(stompClient.seng()方法和带有@SubscribeMapping注解的方法可以使用（该方法发送完成接收数据之后就会断开，不像订阅那样保持一个不会断开的连接）)，topic是页面订阅的路径(这个一般只有在stompClient.subscribe()方法才会用到)
 * sendto注解是将参数转发到其他某个频道，换种说法就是转发（广播形式）
 *sendtouser注解是将参数到某个用户频道，这种就是一对一的方式，同上（一对一）
 *什么时候用messagemapping和subscribemapping
 *messagemapping注解方法，通过stompclient.send（）会执行方法体（加入sendto注解就不会执行了）也能够订阅
 *subscribemapping注解方法可以通过stompclient.subscribe（“/app/subscribe”）进行访问可以执行方法体，也可以订阅
**/

看完可以评论一下，有什么高见也可以告诉楼主哦，也是没有学多久，希望对大家有用！！！

使用websocket+socket.js+stomp.js+springboot

相关阅读

相关文章

相关问答

相关文档