spring boot+vue实现stomp协议

一、后端
1、安装依赖

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

2、定义消息实体类（根据特定业务来定义）

@Data
@AllArgsConstructor
public class ChatMessage {
    String sender;
    String message;
}

3、定义配置文件类

package com.example.stomptest.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.messaging.simp.stomp.StompCommand;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.messaging.support.ChannelInterceptor;
import org.springframework.messaging.support.MessageHeaderAccessor;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
@Slf4j
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 注册Stomp服务端点
     * @param registry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // addEndpoint 设置与客户端建立连接的url
        registry.addEndpoint("/ws")
                // 设置允许跨域
                .setAllowedOriginPatterns("*")
                // 允许SocketJs使用，是为了防止某些浏览器客户端不支持websocket协议的降级策略
                .withSockJS();
    }

    /**
     * 配置消息代理
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 客户端发送消息的请求前缀
        registry.setApplicationDestinationPrefixes("/app");

        // 客户端订阅消息的请求前缀，topic一般用于广播推送，queue用于点对点推送
        registry.enableSimpleBroker("/topic", "/queue");

        // 服务端通知客户端的前缀，可以不设置，默认为user
        registry.setUserDestinationPrefix("/user");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(new ChannelInterceptor() {
            @Override
            public Message<?> preSend(Message<?> message, MessageChannel channel) {
//                log.info("--websocket信息发送前--");
                StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
                if (accessor != null) {
                    // 判断是否是连接Command 如果是,需要获取token对象
                    if (StompCommand.CONNECT.equals(accessor.getCommand())) {
                        String token = accessor.getFirstNativeHeader("token");//下方可执行解析token逻辑
                        log.info("toekn信息："+token);
//                        final String token = accessor.getFirstNativeHeader(Constant.HEADER_TOKEN);
//                        if (!TokenUtil.validateToken(token)) {
//                            return null;
//                        }
//                        final LoginUser user = TokenUtil.getUserFromToken(token);
//                        UserUtil.setUser(user);
                        // sendToUser 需要与这里的user获取的principal一样
//                        accessor.setUser(new SocketUser(user));
                        accessor.setUser(() -> "test");
                        log.info("websocket 连接成功");
                    }
                }
                return message;
            }
        });
    }
}

4、定义监视器

package com.example.stomptest.handle;

import com.example.stomptest.entity.ChatMessage;
import jakarta.annotation.Resource;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.event.EventListener;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.SessionConnectEvent;
import org.springframework.web.socket.messaging.SessionDisconnectEvent;

@Component
@Slf4j
public class WebSocketEventListener {
    @Resource
    private SimpMessageSendingOperations messagingTemplate;

    /**
     * 连接建立事件
     * @param event
     */
    @EventListener
    public void handleWebSocketConnectListener(SessionConnectEvent event) {
        log.info("建立一个新的连接");
    }


    @EventListener
    public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) {

//        StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());
//
//        String username = (String) headerAccessor.getSessionAttributes().get("login");
        log.info("用户断开连接");
    }
}

5、定义控制器测试用

package com.example.stomptest.controller;


import com.example.stomptest.entity.ChatMessage;
import jakarta.annotation.Resource;
import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.handler.annotation.DestinationVariable;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.security.Principal;

@RestController
@Slf4j
public class ChatController {
    @Resource
    private SimpMessagingTemplate messagingTemplate;


    @MessageMapping("/sendToAll")
//    @SendTo("/topic/notice")
    public String sendToAll(String message) {
        String result="服务端通知: " + message;
        messagingTemplate.convertAndSend("/topic/notice",result);
        return result;
    }

    /**
     * 点对点发送消息
     * <p>
     * 模拟 张三 给 李四 发送消息场景
     * @param username  接收消息的用户
     * @param message   消息内容
     */
    @MessageMapping("/sendToUser/{username}")
    public void sendToUser(@DestinationVariable String username, String message) {
        String sender="1910";
        String receiver = username; // 接收人

        log.info("发送人:{}; 接收人:{}", sender, receiver);
        // 发送消息给指定用户 /user/{username}/queue/greeting
        messagingTemplate.convertAndSendToUser(receiver, "/queue/message", new ChatMessage(sender, message));
    }

}

二、前端
1、安装依赖

npm i stompjs -S

npm i sockjs-client -S

2、测试代码

<template>
  <el-button type="primary" @click="startSub">订阅广播</el-button>
  <el-input v-model="input" placeholder="Please input" />
  <el-button type="primary" @click="sendMessage">群发消息</el-button>
  <el-button type="primary" @click="subscribeMessagePoint">点对点订阅消息</el-button>
  <el-button type="primary" @click="sendMessagePoint">点对点发消息</el-button>
  <el-button type="primary" @click="connect">建立连接</el-button>
  <el-button type="primary" @click="disconnect">关闭连接</el-button>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, onBeforeUnmount, nextTick, reactive, watch } from 'vue';
import SockJS from 'sockjs-client/dist/sockjs.min.js';
import Stomp from 'stompjs';

const stompClient = ref(null);
const input = ref('');

onMounted(() => {
  connect();
});

const connect = () => {
  let socket = new SockJS('http://localhost:3301/ws');

  stompClient.value = Stomp.over(socket);

  stompClient.value.connect(
    {
      login: 'test',//对于点对点通信必不可少
      token: '3224sdsdfgdfdfsfddfsf',
    },
    () => {
      console.log('连接成功');
    },
    (error) => {
      console.log('连接失败: ' + error);
    }
  );
};

const disconnect = () => {
  if (stompClient.value && stompClient.value.connected) {
    stompClient.value.disconnect(() => {
      console.log('断开连接');
    });
  }
};

const startSub = () => {
  //订阅广播消息
  stompClient.value.subscribe('/topic/notice', (res) => {
    console.log('订阅广播成功：' + res.body);
  });
};

const sendMessage = () => {
  //广播发布消息
  stompClient.value.send('/app/sendToAll', {}, input.value);
};

const subscribeMessagePoint = () => {
  //订阅用户消息
  stompClient.value.subscribe('/user/queue/message', (res) => {
    let response = JSON.parse(res.body);
    console.log('订阅点对点成功：');
    console.log(response);
    console.log(response.message);
  });
};

const sendMessagePoint = () => {
  //给指定用户发送消息
  stompClient.value.send('/app/sendToUser/test', {}, input.value);
};
</script>

<style lang="scss" scoped></style>