160 lines
5.9 KiB
HTML
160 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flutter WebSocket Test</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.0/bundles/stomp.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Flutter WebSocket STOMP Test</h1>
|
|
<div id="status">Nicht verbunden</div>
|
|
<button onclick="connectWebSocket()">WebSocket Verbinden</button>
|
|
<button onclick="connectSockJS()">SockJS Verbinden</button>
|
|
<button onclick="disconnect()">Trennen</button>
|
|
<br><br>
|
|
<input type="text" id="messageInput" placeholder="Nachricht eingeben" />
|
|
<button onclick="sendMessage()">Nachricht senden</button>
|
|
<br><br>
|
|
<div id="messages"></div>
|
|
|
|
<script>
|
|
let stompClient = null;
|
|
|
|
function connectWebSocket() {
|
|
// WICHTIG: Für native WebSocket MUSS ws:// verwendet werden, NICHT http://
|
|
const socket = new WebSocket('ws://192.168.180.196:8080/websocket');
|
|
stompClient = Stomp.over(socket);
|
|
|
|
stompClient.debug = function(str) {
|
|
console.log('STOMP Debug: ' + str);
|
|
addMessage('DEBUG: ' + str);
|
|
};
|
|
|
|
stompClient.connect({}, function(frame) {
|
|
console.log('WebSocket Connected: ' + frame);
|
|
document.getElementById('status').innerHTML = 'WebSocket Verbunden';
|
|
addMessage('WebSocket erfolgreich verbunden');
|
|
|
|
// Nachrichten abonnieren
|
|
stompClient.subscribe('/topic/messages', function(message) {
|
|
addMessage('Empfangen: ' + message.body);
|
|
});
|
|
}, function(error) {
|
|
console.error('WebSocket Connection Error:', error);
|
|
document.getElementById('status').innerHTML = 'WebSocket Fehler: ' + error;
|
|
addMessage('WebSocket Fehler: ' + error);
|
|
});
|
|
}
|
|
|
|
function connectSockJS() {
|
|
// Für SockJS kann http:// verwendet werden
|
|
const socket = new SockJS('http://192.168.180.196:8080/ws');
|
|
stompClient = Stomp.over(socket);
|
|
|
|
stompClient.debug = function(str) {
|
|
console.log('STOMP Debug: ' + str);
|
|
addMessage('DEBUG: ' + str);
|
|
};
|
|
|
|
stompClient.connect({}, function(frame) {
|
|
console.log('SockJS Connected: ' + frame);
|
|
document.getElementById('status').innerHTML = 'SockJS Verbunden';
|
|
addMessage('SockJS erfolgreich verbunden');
|
|
|
|
// Nachrichten abonnieren
|
|
stompClient.subscribe('/topic/messages', function(message) {
|
|
addMessage('Empfangen: ' + message.body);
|
|
});
|
|
}, function(error) {
|
|
console.error('SockJS Connection Error:', error);
|
|
document.getElementById('status').innerHTML = 'SockJS Fehler: ' + error;
|
|
addMessage('SockJS Fehler: ' + error);
|
|
});
|
|
}
|
|
|
|
function disconnect() {
|
|
if (stompClient !== null) {
|
|
stompClient.disconnect();
|
|
document.getElementById('status').innerHTML = 'Getrennt';
|
|
addMessage('Verbindung getrennt');
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
const messageInput = document.getElementById('messageInput');
|
|
if (stompClient && messageInput.value) {
|
|
stompClient.send('/app/message', {}, JSON.stringify({
|
|
'content': messageInput.value,
|
|
'sender': 'WebTest'
|
|
}));
|
|
addMessage('Gesendet: ' + messageInput.value);
|
|
messageInput.value = '';
|
|
}
|
|
}
|
|
|
|
function addMessage(message) {
|
|
const messagesDiv = document.getElementById('messages');
|
|
const messageElement = document.createElement('div');
|
|
messageElement.innerHTML = new Date().toLocaleTimeString() + ': ' + message;
|
|
messagesDiv.appendChild(messageElement);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
</script>
|
|
|
|
<h2>Flutter Dart Code Beispiel:</h2>
|
|
<pre><code>
|
|
import 'package:stomp_dart_client/stomp.dart';
|
|
import 'package:stomp_dart_client/stomp_config.dart';
|
|
import 'package:stomp_dart_client/stomp_frame.dart';
|
|
import 'dart:convert';
|
|
|
|
// RICHTIG: ws:// für WebSocket verwenden
|
|
final stompClient = StompClient(
|
|
config: StompConfig(
|
|
url: 'ws://192.168.180.196:8080/websocket', // ws:// NICHT http://
|
|
onConnect: (StompFrame frame) {
|
|
print('Connected to STOMP server');
|
|
|
|
// Nachrichten abonnieren
|
|
stompClient.subscribe(
|
|
destination: '/topic/messages',
|
|
callback: (StompFrame frame) {
|
|
print('Received: ${frame.body}');
|
|
},
|
|
);
|
|
},
|
|
onWebSocketError: (dynamic error) => print('WebSocket Error: $error'),
|
|
onStompError: (StompFrame frame) => print('Stomp Error: ${frame.body}'),
|
|
onDisconnect: (StompFrame frame) => print('Disconnected'),
|
|
),
|
|
);
|
|
|
|
// Verbindung aktivieren
|
|
stompClient.activate();
|
|
|
|
// Nachricht senden
|
|
void sendMessage(String content) {
|
|
stompClient.send(
|
|
destination: '/app/message',
|
|
body: jsonEncode({
|
|
'content': content,
|
|
'sender': 'FlutterApp',
|
|
}),
|
|
);
|
|
}
|
|
</code></pre>
|
|
|
|
<h2>Verfügbare Endpunkte:</h2>
|
|
<ul>
|
|
<li><strong>ws://192.168.180.196:8080/websocket</strong> - Native WebSocket (empfohlen für Flutter)</li>
|
|
<li><strong>ws://192.168.180.196:8080/stomp</strong> - Alternative WebSocket Endpunkt</li>
|
|
<li><strong>http://192.168.180.196:8080/ws</strong> - SockJS Endpunkt (nur für Browser)</li>
|
|
</ul>
|
|
|
|
<h2>Häufiger Fehler:</h2>
|
|
<p><strong>FALSCH:</strong> <code>http://192.168.180.196:8080/websocket</code></p>
|
|
<p><strong>RICHTIG:</strong> <code>ws://192.168.180.196:8080/websocket</code></p>
|
|
</body>
|
|
</html>
|