### Vue3与Spring Boot实现WebSocket示例教程
#### 一、引入依赖
为了使项目支持WebSocket，在`pom.xml`文件中添加`sprig-boot-starter-websocket`依赖[^2]。
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
#### 二、WebSocket配置类编写
创建一个新的Java配置类，用于设置WebSocket的相关参数以及定义消息代理。通过此类可以指定哪些路径允许建立WebSocket连接，并注册特定的消息处理器来监听来自客户端的信息[^1]。
```java
@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
();
}
}
```
此段代码实现了两个主要的功能：一是启用了简单内存中的消息代理以转发带有前缀"/topic/"的目标；二是设置了应用程序目的地的前缀为"/app"。另外还开放了一个名为“/ws”的STOMP端点供
前端页面连接使用[^4]。
#### 三、控制器层处理逻辑
接下来需要在Controller里边写一些方法用来接收从前台传来的信息并广播给其他在线用户。这里假设有一个叫ChatController.java 的控制类负责管理聊天室内的对话交流活动：
```java
@Controller
public class ChatController {
private final SimpMessagingTemplate template;
@Autowired
public ChatController
(SimpMessagingTemplate template
){
this.template = template;
}
@MessageMapping
("/sendMessage"
)
public void sendMessage
(@Payload String message,@Header
("simp
SessionId"
)String
sessionId
){
System.out.println
(sessionId
);
// 发送消息到/topic/public主题下所有的订阅者那里去
template.convertAndSend
("/topic/messages",message
);
}
}
```
上述代码片段展示了当接收到一条新的聊天记录时怎样将其分发至所有已订阅对应频道（即“/topic/messages”）下的参与者手中。同时利用SimpMessagingTemplate工具向目标位置推送更新通知。
#### 四、Vue组件交互设计
最后一步是在Vite驱动下的Vue3单页应用内完成UI界面搭建工作。下面给出一段简化版
HTML模板配合JavaScript脚本来展示如何初始化Socket.IO实例并与后台保持持续性的双向通讯联系[^3]。
```
html
<!-- index.
html -->
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Real-Time Chat App</title>
<script src="/path/to/socket.io.js"></script><!-- 引入sockjs库 -->
</head>
<body>
<div id="app">
<input v-model="msgText"/><button @click="sendMsg
()">发送</button><br/>
<ul>
<li v-for="
(item,index
) in msgs">{{ item }}</li>
</ul>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@next';
const app=createApp
({
data
(){
return{
msgs:[],
msgText:''
};
},
methods:{
async sendMsg
(){
let socket=new SockJS
('/ws'
);
stompClient=await Stomp.over
(socket
).connect
({},frame=>{
console.log
('Connected:'
+frame
);
// 订阅消息队列
this.subscribeToTopic
(stompClient
);
}
);
stompClient.send
("/app/sendMessage",{body:this.msgText},{}
);
},
subscribeToTopic
(client
){
client.subscribe
('/topic/messages',response=>{
this.msgs.push
(JSON.parse
(response.body
));
}
);
}
}
}
).mount
('#app'
);
</script>
</body>
</
html>
```
这段代码首先加载了必要的外部资源，接着声明了一个小型的应用程序状态对象包含待发送的文字内容和历史聊天列表两项属性。之后定义了一系列辅助函数用作触发事件响应机制的核心部分——比如点击按钮后调用`sendMsg
()`尝试提交当前输入框里的文字作为新消息发布出去；而每当成功连上服务器以后便会立即执行一次`subscribeToTopic
()`动作从而确保能够及时
获取最新的群聊动态变化情况[^5]。
扫一扫
2074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
