springboot+vue实现websocket

使用 Spring Boot 和 Vue 实现 WebSocket 功能集成
添加依赖项
为了实现基于 Spring Boot 的 WebSocket 服务，首先需要引入必要的 Maven 或 Gradle 依赖。以下是 Maven 中的配置：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
登录后复制
上述依赖允许开发者构建支持 WebSocket 协议的服务端应用[^1]。
创建 WebSocket 配置类
通过定义一个 WebSocketConfig 类来启用并配置 WebSocket 支持。该类需继承自 AbstractWebSocketMessageBrokerConfigurer 并重写相关方法：
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic"); // 定义广播路径前缀
config.setApplicationDestinationPrefixes("/app"); // 应用程序消息路径前缀
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS(); // 注册 WebSocket 终端点
}
}
登录后复制
此代码片段实现了 STOMP over WebSocket 的基本设置，其中 /ws 是客户端连接到服务器的终端点地址[^2]。
处理消息控制器
创建一个控制器用于接收和响应来自前端的消息。例如：
@Controller
public class ChatController {

@MessageMapping("/chat")
@SendTo("/topic/messages")
public Message sendMessage(Message message) throws Exception {
Thread.sleep(100); // 模拟延迟处理时间
return new Message(message.getFrom(), message.getText());
}
}

// 数据传输对象 (DTO)
class Message {
private String from;
private String text;

// 构造函数、getter 和 setter 方法省略...
}
登录后复制
以上逻辑表明当接收到发往 /chat 路径的消息时会自动将其转发至订阅者列表中的所有客户机上显示出来[^3]。
前端 Vue.js 实现
在 Vue.js 方面，则可以通过 sockjs-client 及 stomp-js 这两个库完成与后台交互的部分工作流程如下所示:
安装所需 npm 包：
npm install --save sockjs-client@latest stompjs@latest
登录后复制
编写组件代码样例:
<script setup lang="ts">
import SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';

let wsClient = null;

onMounted(() => {
const socket = new SockJS('http://localhost:8080/ws');
wsClient = Stomp.over(socket);

wsClient.connect({}, frame => {
console.log(`Connected: ${frame}`);

wsClient.subscribe('/topic/messages', response => {
console.log(response.body);
});
});

});

const sendMessage = () => {
if (!wsClient || !wsClient.connected) return alert("Not connected!");

let msgContent = document.getElementById("messageInput").value.trim();

if(msgContent.length === 0){
alert("Please enter a valid message.");
return ;
}

wsClient.send("/app/chat", {}, JSON.stringify({from:"User",text:msgContent}));
};
</script>

<template>
<div id="container">
<input type="text" placeholder="Type your message here..." id="messageInput"/>
<button v-on:click="sendMessage">Send</button>
</div>
</template>
登录后复制
上面展示了如何利用 JavaScript 封装好的 API 接口去建立持久化双向通信链路以及监听特定主题下的更新通知事件[^4][^5]。