以下是一个简化的Java Spring Boot后端代码示例，用于创建WebSocket端点，并在Vue前端接收和显示消息。
Java后端代码:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(messageHandler(), "/ws/messages")
.setAllowedOrigins("http://localhost:8080"); // 允许Vue前端的源
}
@Bean
public WebSocketMessageHandler messageHandler() {
return new WebSocketMessageHandler(); // 自定义的WebSocketMessageHandler实现
}
}Vue前端代码:
<template>
<div>
<div v-for="message in messages" :key="message">{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
socket: null
};
},
created() {
this.connectWebSocket();
},
methods: {
connectWebSocket() {
this.socket = new WebSocket('ws://localhost:8080/ws/messages');
this.socket.onmessage = this.handleMessage;
this.socket.onclose = this.handleClose;
this.socket.onerror = this.handleError;
},
handleMessage(event) {
this.messages.push(event.data);
},
handleClose() {
console.log('WebSocket Closed');
},
handleError(event) {
console.error('WebSocket Error', event);
},
sendMessage(message) {
if (this.socket.readyState === WebSocket.OPEN) {
this.socket.send(message);
}
}
},
beforeDestroy() {
this.socket.close();
}
};
</script>在这个例子中，我们创建了一个简单的WebSocket连接，在Vue前端显示从后端接收的消息。记得在实际部署时，WebSocket的URL需要根据实际部署的服务器地址进行相应的替换。