Spring Boot向Vue发送消息通过WebSocket实现通信

后端实现步骤

  • 添加Spring Boot WebSocket依赖
  • 配置WebSocket端点和消息代理
  • 创建控制器,使用SimpMessagingTemplate发送消息

前端实现步骤

  • 安装sockjs-client和stompjs库
  • 封装WebSocket连接工具类
  • 在Vue组件中建立连接,订阅主题

详细实现步骤

后端(Spring Boot)实现步骤

1. 添加依赖
复制代码
<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2. 配置WebSocket
复制代码
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册WebSocket端点,前端连接此地址
        registry.addEndpoint("/ws")
                .setAllowedOriginPatterns("*") // 解决跨域问题
                .withSockJS(); // 支持SockJS
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 客户端订阅的主题前缀
        registry.enableSimpleBroker("/topic");
    }
}
3. 发送消息的Controller
复制代码
@RestController
public class MessageController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    // 发送消息到所有客户端
    @GetMapping("/send")
    public void sendToAll(String message) {
        messagingTemplate.convertAndSend("/topic/messages", message);
    }

}

前端(Vue)实现步骤

1. 安装依赖
复制代码
npm install sockjs-client stompjs
2. 封装WebSocket工具类
复制代码
// src/utils/websocket.js
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
let stompClient = null;
export function connect(url,callback) {
    const socket = new SockJS(url);
    stompClient = Stomp.over(socket);
    stompClient.connect({}, () => {
        stompClient.subscribe('/topic/messages', (message) => {
            callback(message.body)
        });
    });
}
export function disconnect() {
    if (stompClient) {
        stompClient.disconnect();
    }
}
3. Vue组件集成
复制代码
<template>
  <div>
    <div>收到消息: {{ receivedMsg }}</div>
  </div>
</template>
<script>
import { connect, disconnect } from '@/ws/websocket';

export default {
  data() {
    return {
      inputMsg: '',
      receivedMsg: ''
    };
  },
  mounted() {
    connect('http://localhost:8088/ws',(msg)=>{
      this.receivedMsg = msg;
    });
  },
  beforeDestroy() {
    disconnect();
  },
  methods: {
  }
};
</script>

测试

向指定客户端发送消息

后端

复制代码
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

package com.config;

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 cyz
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 客户端连接的端点(WebSocket URL)
        registry.addEndpoint("/ws")
                // 允许所有来源(根据需求调整)
                .setAllowedOrigins("*")
                // 支持 SockJS 降级(兼容不支持 WebSocket 的浏览器)
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 客户端订阅的地址前缀(STOMP 主题)
        registry.enableSimpleBroker("/portCheckProgress");
    }
}

package com;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
/**
 * @author cyz
 * @since 2025/4/1 下午5:15
 */
@RestController
public class MessageController {
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    @GetMapping("/send-to-user")
    public void sendToUser(@RequestParam String userCode, @RequestParam String message) {
        String destination =  "/portCheckProgress/info/"+userCode;
        messagingTemplate.convertAndSend(destination, message);
    }
}

package com;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author cyz
 * @since 2025/4/1 下午5:12
 */
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

前端

复制代码
// src/utils/websocket.js
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
let stompClient = null;
export function connect(url,userCode,callback) {
    const socket = new SockJS(url);
    stompClient = Stomp.over(socket);
    stompClient.connect({}, () => {
        stompClient.subscribe('/portCheckProgress/info/'+userCode, (message) => {
            callback(message.body)
        });
    });
}
export function disconnect() {
    if (stompClient) {
        stompClient.disconnect();
    }
}

<template>
  <div>
    <div>收到消息: {{ receivedMsg }}</div>
  </div>
</template>
<script>
import { connect, disconnect } from '@/ws/websocket';

export default {
  data() {
    return {
      inputMsg: '',
      receivedMsg: ''
    };
  },
  mounted() {
    var split = location.href.split("?userCode=");
    var userCode = split[1]
    connect('http://localhost:8088/ws',userCode,(msg)=>{
      this.receivedMsg = msg;
    });
  },
  beforeDestroy() {
    disconnect();
  },
  methods: {
  }
};
</script>

测试

向2中发送消息

向3中发送消息

相关推荐
jingling5552 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Minyy112 小时前
SpringBoot程序的创建以及特点,配置文件,LogBack记录日志,配置过滤器、拦截器、全局异常
xml·java·spring boot·后端·spring·mybatis·logback
武昌库里写JAVA3 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
曹天骄5 小时前
100个用户的聊天系统:轮询 vs WebSocket 综合对比
网络·websocket·网络协议
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
李白的粉8 小时前
基于springboot的在线教育系统
java·spring boot·毕业设计·课程设计·在线教育系统·源代码
小马爱打代码9 小时前
SpringBoot原生实现分布式MapReduce计算
spring boot·分布式·mapreduce
iuyou️9 小时前
Spring Boot知识点详解
java·spring boot·后端
一弓虽9 小时前
SpringBoot 学习
java·spring boot·后端·学习