Websocket (Programmierung): Unterschied zwischen den Versionen
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 5: | Zeile 5: | ||
Als erstes benoetigt man eine Instanz eines Websocket-Objektes (Javascript-API des W3C (/ˈdʌbəl.juː ˈkjuːbd/ C)). | Als erstes benoetigt man eine Instanz eines Websocket-Objektes (Javascript-API des W3C (/ˈdʌbəl.juː ˈkjuːbd/ C)). | ||
− | var meinWebSocket = new WebSocket('<URL>',['<Subprotokoll>',...]) | + | var meinWebSocket = new WebSocket('<URL>',['<Subprotokoll>',...]); |
Die Angabe des Subprotokolls ist optional. | Die Angabe des Subprotokolls ist optional. | ||
Zeile 103: | Zeile 103: | ||
Hiermit sind dann auch mehrere Handler-Funktionen pro Event moeglich. | Hiermit sind dann auch mehrere Handler-Funktionen pro Event moeglich. | ||
+ | |||
+ | =First Contact= | ||
+ | |||
+ | Achtung [https://piehost.com/blog/echo-websocket-org-alternative][https://github.com/websocket-client/websocket-client/issues/779] | ||
+ | Es gibt irgendwie keinen oeffentlichen EchoServer mehr. | ||
+ | |||
+ | Das Angebot der [https://www.postman.com/product/what-is-postman/ Website von postman.com] lohnt einen tieferen Blick. Das [https://learning.postman.com/docs/introduction/overview/ "Learning Center"] sieht sehr interessant aus. Mal [https://learning.postman.com/docs/developer/echo-api/ den] Echoservice ausprobieren. | ||
+ | |||
+ | <syntaxhighlight lang="javascript"> | ||
+ | <!doctype html> | ||
+ | <html lang="de"> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var meinWebSocket = new WebSocket('wss://ws.postman-echo.com/raw'); | ||
+ | |||
+ | meinWebSocket.onopen = function() { | ||
+ | console.log('WebSocket-Verbindung aufgebaut.'); | ||
+ | meinWebSocket.send('Hallo Welt!'); | ||
+ | console.log('WebSocket-Nachricht verschickt.'); | ||
+ | } | ||
+ | |||
+ | meinWebSocket.onerror = function(event) { | ||
+ | let reason = event.reason; | ||
+ | let code = event.code; | ||
+ | console.log('WebSocket-Verbindung Error: ' + reason + '(' + code + ')'); | ||
+ | } | ||
+ | |||
+ | meinWebSocket.onmessage = function(message) { | ||
+ | let data = message.data; | ||
+ | console.log('WebSocket-Nachricht vom Server: ' + data); | ||
+ | } | ||
+ | |||
+ | meinWebSocket.onclose = function(event) { | ||
+ | let state = event.readyState; | ||
+ | console.log('WebSocket-ReadyState: ' + state); | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | Die Console zeigt nach der Ausfuehrung folgende Eintraege. | ||
+ | WebSocket-ReadyState: undefined websocketechojs.html:25:10 | ||
+ | WebSocket-Verbindung aufgebaut. websocketechojs.html:8:10 | ||
+ | WebSocket-Nachricht verschickt. websocketechojs.html:10:10 | ||
+ | WebSocket-Nachricht vom Server: Hallo Welt! websocketechojs.html:21:10 | ||
+ | |||
+ | | ||
+ | |||
+ | |||
+ | |||
+ | Weiterer Quellcode [https://socketsbay.com/test-websockets] | ||
+ | |||
+ | Und [http://websocketstest.com/ hier] ein WebsocketTester. | ||
=Request for Comments= | =Request for Comments= |
Aktuelle Version vom 13. Februar 2024, 09:24 Uhr
Inhaltsverzeichnis
Allgemeines
Wie programmiert man eine Websocket-Kommunikation in Javascript, Python, PHP, ...?
Javascript
Als erstes benoetigt man eine Instanz eines Websocket-Objektes (Javascript-API des W3C (/ˈdʌbəl.juː ˈkjuːbd/ C)).
var meinWebSocket = new WebSocket('<URL>',['<Subprotokoll>',...]);
Die Angabe des Subprotokolls ist optional.
Das fuehrt zu einem WebSocket Opening-Handshake-Request ueber HTTP.
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlICLhbXBsZSBub14jXY==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat, soap, wamp, ....
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: .......
WebSocket Opening-Handshake-Response
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPCLBiTxaQ9kYGzzhZRbK+OMG= (key nicht valide)
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Accept benutzt den Sec-WebSocket-Key und haengt eine GUID an. Diese Zeichenkette wird dann mittels der Hashfunktion SHA-1 verschlüsselt und dann noch Base64 kodiert, um sie als Textstring uebertragen zu koennen.
TODO Algorithmus
Nachdem Instanzieren und der Verbindungsaufnahme kann sich die Verbindung in 4 moeglichen Zustaenden (readyState) befinden.
Zustand | readyState | Beschrebung |
---|---|---|
CONECTING | 0 | Objekt instanziert; Vebindung zum Server wird aufgebaut |
OPEN | 1 | Verbindung erfolgreich aufgebaut; Kanal kommunikationsbereit |
CLOSING | 2 | Verbindung wird geschlossen (Closing-Handshake) |
CLOSED | 3 | Verbindung geschlossen, oder Verbindungsaufbau gescheitert |
Beim Wechsel des readyStates wird ein Event ausgeloest.
Eventhandler | Event | Beschrebung |
---|---|---|
onopen | open | State geht in OPEN |
onerror | error | Fehler beim Verbindungsaufbau oder bei der Kommunkiation |
onmessage | message | Nachricht trifft ein |
onclose | close | Verbindung geschlossen, oder Verbindungsaufbau gescheitert |
Die Eventhandler sind Attribute des WebSocket-Objektes.
Codeschnipsel
onopen
meinWebSocket.onopen = function() {
console.log('WebSocket-Verbindung aufgebaut!');
meinWebSocket.send('...');
}
onerror
meinWebSocket.onerror = function(event) {
let reason = event.reason;
let code = event.code;
console.log('WebSocket-Verbindung Error: ' + reason + '(' + code + ')');
}
onmessage
meinWebSocket.onmessage = function(message) {
let data = message.data;
console.log('WebSocket-Nachricht: ' + data);
}
onclose
meinWebSocket.onclose = function(event) {
let state = event.readyState;
console.log('WebSocket-ReadyState: ' + state);
}
Es ist auch moeglich die Eventhandler-Funktionen imt der Methode addEventListener() bekannt zu machen.
meinWWebSocket.addEventListener("",funtion()){...};
Hiermit sind dann auch mehrere Handler-Funktionen pro Event moeglich.
First Contact
Achtung [1][2] Es gibt irgendwie keinen oeffentlichen EchoServer mehr.
Das Angebot der Website von postman.com lohnt einen tieferen Blick. Das "Learning Center" sieht sehr interessant aus. Mal den Echoservice ausprobieren.
<!doctype html>
<html lang="de">
<body>
<script type="text/javascript">
var meinWebSocket = new WebSocket('wss://ws.postman-echo.com/raw');
meinWebSocket.onopen = function() {
console.log('WebSocket-Verbindung aufgebaut.');
meinWebSocket.send('Hallo Welt!');
console.log('WebSocket-Nachricht verschickt.');
}
meinWebSocket.onerror = function(event) {
let reason = event.reason;
let code = event.code;
console.log('WebSocket-Verbindung Error: ' + reason + '(' + code + ')');
}
meinWebSocket.onmessage = function(message) {
let data = message.data;
console.log('WebSocket-Nachricht vom Server: ' + data);
}
meinWebSocket.onclose = function(event) {
let state = event.readyState;
console.log('WebSocket-ReadyState: ' + state);
}
</script>
</body>
</html>
Die Console zeigt nach der Ausfuehrung folgende Eintraege.
WebSocket-ReadyState: undefined websocketechojs.html:25:10 WebSocket-Verbindung aufgebaut. websocketechojs.html:8:10 WebSocket-Nachricht verschickt. websocketechojs.html:10:10 WebSocket-Nachricht vom Server: Hallo Welt! websocketechojs.html:21:10
Weiterer Quellcode [3]
Und hier ein WebsocketTester.
Die automatische Aktualisierung der Kommentare aktivieren.