5 changed files with 0 additions and 139 deletions
-
1build.gradle
-
79demo/ws_demo.html
-
30src/main/java/com/qyft/gd/config/WebSocketConfig.java
-
25src/main/java/com/qyft/gd/controller/WebSocketController.java
-
4src/main/java/com/qyft/gd/service/CMDService.java
@ -1,79 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en"> |
|
||||
<head> |
|
||||
<meta charset="UTF-8"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||
<title>WebSocket with STOMP</title> |
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script> |
|
||||
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script> |
|
||||
</head> |
|
||||
<body> |
|
||||
<h2>WebSocket STOMP Client</h2> |
|
||||
<input type="text" id="messageInput" placeholder="Enter your message"> |
|
||||
<button onclick="sendMessage()">Send</button> |
|
||||
<div id="response"></div> |
|
||||
|
|
||||
<script> |
|
||||
let stompClient = null; |
|
||||
let socket = null; |
|
||||
const wsUrl = 'http://localhost:8080/ws'; // WebSocket 服务器地址 |
|
||||
const reconnectInterval = 5000; // 重连间隔(5秒) |
|
||||
|
|
||||
function connectWebSocket() { |
|
||||
console.log("尝试连接 WebSocket..."); |
|
||||
socket = new SockJS(wsUrl); |
|
||||
stompClient = Stomp.over(socket); |
|
||||
stompClient.debug = null; // 关闭调试日志 |
|
||||
|
|
||||
stompClient.connect({}, function (frame) { |
|
||||
console.log('WebSocket 连接成功:', frame); |
|
||||
|
|
||||
// 订阅服务器的推送消息 |
|
||||
stompClient.subscribe('/topic/greetings', function (greeting) { |
|
||||
const response = document.getElementById('response'); |
|
||||
response.innerHTML = 'Server says: ' + greeting.body; |
|
||||
}); |
|
||||
|
|
||||
stompClient.subscribe('/topic/cmd', function (result) { |
|
||||
console.log("命令执行反馈:", result.body); |
|
||||
}); |
|
||||
|
|
||||
}, function (error) { |
|
||||
console.error("WebSocket 连接失败:", error); |
|
||||
attemptReconnect(); |
|
||||
}); |
|
||||
|
|
||||
// 监听 WebSocket 关闭事件,自动重连 |
|
||||
socket.onclose = function () { |
|
||||
console.warn("WebSocket 连接已断开!"); |
|
||||
attemptReconnect(); |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
// **重连机制** |
|
||||
function attemptReconnect() { |
|
||||
if (stompClient !== null) { |
|
||||
stompClient.disconnect(); |
|
||||
} |
|
||||
console.log(`将在 ${reconnectInterval / 1000} 秒后尝试重新连接 WebSocket...`); |
|
||||
setTimeout(connectWebSocket, reconnectInterval); |
|
||||
} |
|
||||
|
|
||||
// **发送消息** |
|
||||
function sendMessage() { |
|
||||
if (stompClient && stompClient.connected) { |
|
||||
const messageInput = document.getElementById('messageInput'); |
|
||||
const message = messageInput.value; |
|
||||
stompClient.send("/app/hello", {}, message); // 发送消息到 "/app/hello" |
|
||||
console.log("消息已发送:", message); |
|
||||
} else { |
|
||||
console.warn("WebSocket 未连接,无法发送消息!"); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// **初始化 WebSocket 连接** |
|
||||
connectWebSocket(); |
|
||||
</script> |
|
||||
|
|
||||
</body> |
|
||||
</html> |
|
@ -1,30 +0,0 @@ |
|||||
package com.qyft.gd.config; |
|
||||
|
|
||||
import lombok.RequiredArgsConstructor; |
|
||||
import lombok.extern.slf4j.Slf4j; |
|
||||
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; |
|
||||
|
|
||||
@Configuration |
|
||||
@EnableWebSocketMessageBroker |
|
||||
@RequiredArgsConstructor |
|
||||
@Slf4j |
|
||||
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { |
|
||||
@Override |
|
||||
public void configureMessageBroker(MessageBrokerRegistry registry) { |
|
||||
// 配置消息代理 |
|
||||
registry.enableSimpleBroker("/topic"); // 消息广播前缀 |
|
||||
registry.setApplicationDestinationPrefixes("/app"); // 客户端发送消息的前缀 |
|
||||
} |
|
||||
|
|
||||
@Override |
|
||||
public void registerStompEndpoints(StompEndpointRegistry registry) { |
|
||||
// 使用相对路径注册 WebSocket 端点 |
|
||||
registry.addEndpoint("/ws") |
|
||||
.setAllowedOriginPatterns("*") |
|
||||
.withSockJS(); |
|
||||
} |
|
||||
} |
|
@ -1,25 +0,0 @@ |
|||||
package com.qyft.gd.controller; |
|
||||
|
|
||||
import lombok.RequiredArgsConstructor; |
|
||||
import lombok.extern.slf4j.Slf4j; |
|
||||
import org.springframework.messaging.handler.annotation.MessageMapping; |
|
||||
import org.springframework.messaging.handler.annotation.SendTo; |
|
||||
import org.springframework.messaging.simp.SimpMessagingTemplate; |
|
||||
import org.springframework.stereotype.Controller; |
|
||||
|
|
||||
import java.security.Principal; |
|
||||
|
|
||||
@Controller |
|
||||
@RequiredArgsConstructor |
|
||||
@Slf4j |
|
||||
public class WebSocketController { |
|
||||
private final SimpMessagingTemplate messagingTemplate; |
|
||||
|
|
||||
@MessageMapping("/hello") |
|
||||
@SendTo("/topic/greetings") |
|
||||
public String sendGreeting(String message) throws Exception { |
|
||||
// 处理收到的消息并发送到主题 "/topic/greetings" |
|
||||
return "Hello, " + message; |
|
||||
} |
|
||||
|
|
||||
} |
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue