在Springboot中,我们需要使用Stomp协议来实现WebSocket连接。首先,需要添加以下依赖项:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.40</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>sockjs-client</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>stomp-websocket</artifactId>
<version>2.3.3</version>
</dependency>
创建WebSocket的配置文件:
@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("/websocket").setAllowedOrigins("*").withSockJS();
}
}
这里定义了WebSocket的消息代理和端点。
创建WebSocketController,处理WebSocket的请求:
@Controller
public class WebSocketController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) {
return new Greeting("Hello, " + message.getName() + "!");
}
@MessageMapping("/chat")
@SendTo("/topic/messages")
public ChatMessage chat(ChatMessage message) {
return new ChatMessage(message.getContent(), message.getSender());
}
}
这里定义了两个WebSocket请求(/hello和/chat),并将它们的响应发送到特定的主题(/topic/greetings和/topic/messages)。
在Vue.js中,我们需要使用SockJS和Stomp.js库来实现WebSocket连接。首先,需要添加以下依赖项:
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/dist/stomp.min.js"></script>
创建Vue.js组件,处理WebSocket的连接和消息:
<template>
<div>
<label for="name">Name:</label>
<input v-model="name" type="text" id="name">
<button @click="connect">Connect</button>
<div v-if="connected">
<label for="message">Message:</label>
<input v-model="message" type="text" id="message">
<button @click="sendMessage">Send</button>
<ul>
<li v-for="greeting in greetings" :key="greeting.id">{{ greeting.content }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
connected: false,
name: "",
message: "",
greetings: [],
};
},
methods: {
connect() {
const socket = new SockJS("http://localhost:8080/websocket");
this.ws = Stomp.over(socket);
this.ws.connect({}, () => {
this.connected = true;
this.ws.subscribe("/topic/greetings", (greeting) => {
this.greetings.push(JSON.parse(greeting.body));
});
});
},
sendMessage() {
const message = { name: this.name };
this.ws.send("/app/hello", {}, JSON.stringify(message));
this.message = "";
},
},
};
</script>
这里定义了一个Vue.js组件,用于建立WebSocket连接并发送和接收WebSocket消息。点击“Connect”按钮将建立WebSocket连接,然后可以发送消息并接收来自主题“/topic/greetings”的响应。
这只是一个基本的示例,您可以根据需要修改代码和逻辑。