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中发送消息

相关推荐
顽疲4 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
nightunderblackcat34 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
超级小忍38 分钟前
Spring Boot 与 Docker 的完美结合:容器化你的应用
spring boot·后端·docker
麦兜*2 小时前
Spring Boot 企业级动态权限全栈深度解决方案,设计思路,代码分析
java·spring boot·后端·spring·spring cloud·性能优化·springcloud
quant_19864 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
hdsoft_huge7 小时前
SpringBoot 与 JPA 整合全解析:架构优势、应用场景、集成指南与最佳实践
java·spring boot·架构
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
张先shen9 小时前
Elasticsearch RESTful API入门:基础搜索与查询DSL
大数据·spring boot·elasticsearch·搜索引擎·全文检索·restful
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js