• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Erste Versuche mit Websockets

Hallo!

Ich versuche gerade das erste einfache Skript für Real-Time-Applications zu schreiben und arbeite mich hierfür in Websockets ein. Habe dabei ein Problem mit einer Funktion auf der Serverseite:

Javascript:
var WebSocketServer = require('ws').Server
wss = new WebSocketServer({ port: 9001 });

// Broadcast method to send message to all the users

wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    for(var i in this.clients) {
        console.log("Ich spreche Client  " + i + "an.");
        this.clients[i].send(data);
    }
};

// Websocket connection open handler
wss.on('connection', function connection(ws) {
    // Websocket message receive handler
    ws.on('message', function incoming(message){
        // Broadcasting the message to all users
        wss.broadcast(message);
        console.log('Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:' + message);
    });
    console.log('Ein Client hat die Verbindung aufgebaut');
    // When user is connected sending the current slide information for the users who joined later
    ws.send("Verbindung aufgebaut");
});

Das Problem liegt hier scheinbar in der Funktion Broadcast, und zwar funktioniert hier scheinbar die Iteration durch das Objekt this.clients nicht. Die Konsole gibt hier noch "Habe zum Versand bekommen..." aus, die zweite console.log Anweisung innerhalb der Schleife ("Ich spreche Client soundso an") wird nicht mehr ausgeführt. Hat jemand Erfahrung mit Websockets? Wo liegt das Problem?
 
Werbung:
Hallo!

Ich versuche gerade das erste einfache Skript für Real-Time-Applications zu schreiben und arbeite mich hierfür in Websockets ein. Habe dabei ein Problem mit einer Funktion auf der Serverseite:

Javascript:
var WebSocketServer = require('ws').Server
wss = new WebSocketServer({ port: 9001 });

// Broadcast method to send message to all the users

wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    for(var i in this.clients) {
        console.log("Ich spreche Client  " + i + "an.");
        this.clients[i].send(data);
    }
};

// Websocket connection open handler
wss.on('connection', function connection(ws) {
    // Websocket message receive handler
    ws.on('message', function incoming(message){
        // Broadcasting the message to all users
        wss.broadcast(message);
        console.log('Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:' + message);
    });
    console.log('Ein Client hat die Verbindung aufgebaut');
    // When user is connected sending the current slide information for the users who joined later
    ws.send("Verbindung aufgebaut");
});

Das Problem liegt hier scheinbar in der Funktion Broadcast, und zwar funktioniert hier scheinbar die Iteration durch das Objekt this.clients nicht. Die Konsole gibt hier noch "Habe zum Versand bekommen..." aus, die zweite console.log Anweisung innerhalb der Schleife ("Ich spreche Client soundso an") wird nicht mehr ausgeführt. Hat jemand Erfahrung mit Websockets? Wo liegt das Problem?

Sollte es nicht "wss.clients" statt "this.clients" heißen?
 
Javascript:
wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    for(var i in wss.clients) {
        console.log("Ich spreche Client Nr. " + i + "an.");
        wss.clients[i].send(data);
    }
};

funktioniert auch nicht. Ich würde annehmen, dass clients als Eigenschaft des Objektes der Klasse WebSocketServer hier mit this angesprochen werden kann, weil Broadcast ebenso eine Methode des gleichen Objekts ist.
 
Werbung:
Javascript:
wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    for(var i in wss.clients) {
        console.log("Ich spreche Client Nr. " + i + "an.");
        wss.clients[i].send(data);
    }
};

funktioniert auch nicht. Ich würde annehmen, dass clients als Eigenschaft des Objektes der Klasse WebSocketServer hier mit this angesprochen werden kann, weil Broadcast ebenso eine Methode des gleichen Objekts ist.

Möglich. Habe ich von hier übernommen - wie du auch denke ich:
https://www.npmjs.com/package/ws#server-broadcast

Sonst fällt mir jetzt auch nichts auf.

Hast du denn überhaupt Clients?
Bekommst du keine Fehler?

Ich denke hier ist klassisches Debugging angesagt ;)
 
Klar habe ich clients. Das wäre der Code für die Clientseite:

Code:
<html>
<body>
<input id="eingabe">
<input type="button" value="Senden" onclick="nachricht_senden()">
</body>
</html>

<script>
function init() {
    ws = new WebSocket('ws://localhost:9001');
    ws.onopen = function(evt) {
        ws.send('Verbindung offen');
    }
    
    // Beim Erhalt einer Nachricht vom Server
    ws.onmessage = function(message) {
        console.log('Vom Server erhaltene Nachricht: ' + message);
        document.getElementById("eingabe").value = message;
    }
    
}
function nachricht_senden() {
        var nachricht = document.getElementById("eingabe").value;
        ws.send(nachricht);
}
window.addEventListener("load", init, false);  // sobald die Seite geladen wurde, wird die Funktion init aufgerufen   
</script>

Dann habe ich zwei Browserfenster in welchen die Seite mit dem Clientcode aufgemacht ist. Beide Seiten bauen korrekt die Verbindung auf, in einer wird dann ein Teststring ins Inputfeld eingegeben und der Button "Senden" gedrückt. Das gewünschte Ergebnis wäre, dass der gleiche Text dann im Inputfeld im anderen Browserfenster erscheint, was aber nicht passiert, weil der Code innerhalb der Schleife in der Broadcast - Funktion offensichtlich nicht ausgeführt wird. Die Konsole auf der Serverseite gibt folgendes aus:

Last login: Thu Jul 5 16:46:30 on ttys000
Arkadiuszs-Mini:~ werkstatt$ cd documents/socket_test
Arkadiuszs-Mini:socket_test werkstatt$ node server.js
Ein Client hat die Verbindung aufgebaut
Habe zum Versand bekommen: Verbindung offen
Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:Verbindung offen
Ein Client hat die Verbindung aufgebaut
Habe zum Versand bekommen: Verbindung offen
Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:Verbindung offen
Habe zum Versand bekommen: Das ist ein Test
Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:Das ist ein Test
 
Du verwendest offenbar keine IDE mit Intellisense.

Installiere mal die Trial von Webstorm. Der zeigt dir, welche Methoden für ein Object zur Verfügung stehen.
 
Werbung:
Gut, die Schleife in der Funktion Broadcast läuft, wenn sie so aufgebaut wird:
Javascript:
wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    wss.clients.forEach(function each(client){
        console.log("Bin in der Schleife");
        
            console.log("Sende Daten");
            client.send(data);
        
    })
};

Dann kommt beim anderen Client tatsächlich auch etwas an. ABER..... Ich schreibe dann einen Text in mein Inputfeld und drücke auf "senden". Der Text kommt auch korrekt beim Server an:

Bin in der Schleife
Sende Daten
Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:test loremp ipsum


"test lorem ipsum" ist als String beim Server angekommen. Die Konsole des Clients sagt aber

Vom Server erhaltene Nachricht: [object MessageEvent]

und genau dieser Text [object MessageEvent] erscheint dann im Inputfeld des anderen Browserfensters. Nun ist mir aber der Aufbau dieses Objekts nicht klar und ich weiß nicht, wie ich von diesem Objekt auf den Inhalt "test lorem ipsum", der eigentlich im Eingabefeld des anderen Browserfensters erscheinen sollte, komme... Bin für jede Hilfe dankbar!
 
Gut, die Schleife in der Funktion Broadcast läuft, wenn sie so aufgebaut wird:
Javascript:
wss.broadcast = function broadcast(data) {
    console.log("Habe zum Versand bekommen: " + data);
    wss.clients.forEach(function each(client){
        console.log("Bin in der Schleife");
      
            console.log("Sende Daten");
            client.send(data);
      
    })
};

Dann kommt beim anderen Client tatsächlich auch etwas an. ABER..... Ich schreibe dann einen Text in mein Inputfeld und drücke auf "senden". Der Text kommt auch korrekt beim Server an:

Bin in der Schleife
Sende Daten
Folgende von einem Client erhaltene Nachricht wird nun an alle geschickt:test loremp ipsum


"test lorem ipsum" ist als String beim Server angekommen. Die Konsole des Clients sagt aber

Vom Server erhaltene Nachricht: [object MessageEvent]

und genau dieser Text [object MessageEvent] erscheint dann im Inputfeld des anderen Browserfensters. Nun ist mir aber der Aufbau dieses Objekts nicht klar und ich weiß nicht, wie ich von diesem Objekt auf den Inhalt "test lorem ipsum", der eigentlich im Eingabefeld des anderen Browserfensters erscheinen sollte, komme... Bin für jede Hilfe dankbar!

https://developer.mozilla.org/de/docs/Web/API/MessageEvent

Also message.data
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben