Erweiterungen
This commit is contained in:
159
flutter_websocket_test.html
Normal file
159
flutter_websocket_test.html
Normal file
@@ -0,0 +1,159 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user