Wie überprüfen wann der User online oder offline ist?

[RezaScript]

Hallo,

ich benutze Websocket und möchte erfahren, wann der User online und wann er offline ist.

@OnClose
public void handleClose(Session userSession) throws IOException {
    users.remove(userSession);
    // Post the message
    for (Session user : users) {
        Helper helper = new Helper();
        String currentTime = helper.getTheDate("HH:mm:ss");
        user.getBasicRemote().sendText(String.format("[%s] %s %s<br>", currentTime, userSession.getUserProperties().get("username"), "has just quit."));
    }
}

Der Code oben gibt jedem User die Information, dass der User nun offline ist. So weit ist alles gut.

Ich habe eine User-Liste mit folgendem Code:

<img class="profile-pic" src="../assets/img/jessica.png" alt="Jessica"> <i class="status offline"></i>Jessica
<img class="profile-pic" src="../assets/img/reza.png" alt="Reza"> <i class="status offline"></i>Reza
<img class="profile-pic" src="../assets/img/kevin.png" alt="Kevin"> <i class="status offline"></i>Kevin
...

Ihr seht die CSS-Klassen "status" und "offline". "offline" ist momentan nur statisch, sollte aber dynamisch sein.

Ich möchte also, dass die Methode handleClose() nicht nur die Information an User mitteilt, sondern, dass ich die Information auch in JavaScript bekomme, damit ich die CSS-Klasse dann entsprechend eingeben kann. Zwar liefert der Server einen String (und zwar eben das was der User sieht), hier ein Beispiel:

[01:34:33] reza has just quit.

Aber ich denke es müsste irgendwie eine bessere Lösung geben.

const log = console.log.bind(console);

/* CHAT */
const webSocket = new WebSocket('ws://localhost:8080/test_war_exploded/chat');
const chatResult = document.querySelector('.result');
const loginArea = document.querySelector('.login-area');

// Open
webSocket.onopen = (msg) => {
    log("Server is now connected\n");
    log(msg);
};

// Message
webSocket.onmessage = (msg) => {
    chatResult.innerHTML += msg.data;
};

// Close
webSocket.onclose = (msg) => {
    webSocket.send('has just quit.');
    log(msg.data); // <-- liefert nichts zurück
};

// Error
webSocket.onerror = () => {
  log("There is an error. Try it again later.");
};

Falls ihr eine Idee hättet, würde ich mich sehr freuen!

Falls euch der ganze Code interessiert: https://bitbucket.org/rezasript/zt-productions/

 

[thecain]

https://developer.mozilla.org/de/docs/Web/API/NavigatorOnLine/onLine sollte helfen.

 

[mihe7]

an User mitteilt, sondern, dass ich die Information auch in JavaScript bekomme, damit ich die CSS-Klasse dann entsprechend eingeben kann.

Du bekommst die Info doch in JavaScript (onmessage). Wenn ich Dein Problem richtig verstehe, dann schickst Du die Info nur in einer Form raus, die sich auf Client-Seite nicht einfach verarbeiten lässt. Nicht zuletzt weil der Client meist in JavaScript geschrieben ist, verwendet man dazu in der Regel JSON.

Unabhängig vom Format musst Du Dir überlegen, wie die Nachrichten aufgebaut sein sollen, die Du zwischen Client und Server austauschst, denn es werden ja verschiedene Arten von Nachrichten verschickt: Textnachrichten, Ereignisse, ggf. Befehle. Du könntest beispielsweise ein Nachrichtenobjekt wie folgt strukturieren:

{
    "type": <Art der Nachricht>
    "content": <Inhalt der Nachricht>
}

Dann könntest Du z. B. festlegen, dass im Fall einer Textnachricht gilt: "type" == "text" und der content dann wie folgt aufgebaut ist:

{
    "timestamp": <Zeitstempel>
    "sender": <Benutzername des Absenders>
    "text": <Text der Nachricht>
}

Für ein Ereignis könnte "type" == "event" gelten und der content

{
    "timestamp": <Zeitstempel>
    "sender": <Benutzername des Absenders>
    "eventType": <Art des Ereignisses>
    "eventData": <Zusätzliche Daten zum Ereignis>
}

sein. Wenn z. B. Zeitstempel und Sender in jeder Nachricht relevant sind, könnte man das natürlich hochziehen.

Dann könnte eine Quit-Nachricht so aussehen:

{"type":"event","content":{"timestamp":"2019-06-05T07:27:30Z","sender":"mihe7","eventType":"quit"}}

In onmessage auf Client-Seite verarbeitest Du dann die Nachricht:

webSocket.onmessage = (event) => {
    let msg = JSON.parse(event.data);
    // msg.type liefert den Typ der Nachricht
    // gilt msg.type === 'text', dann gibt msg.content.text den Text an
    // usw.
};

 

[RezaScript]

Das mit JSON war eine super Idee! Das bringt mich weiter und ist auf jeden Fall auch viel sauberer. Dankeschön!

 

[mihe7]

Das mit JSON war eine super Idee!

Ja, leider nicht von mir und auch nicht ganz neu

Serverseitig gibt's hierfür übrigens JSON-P und JSON-B. Infos zur Verwendung z. B. unter https://www.baeldung.com/jee7-json bzw. https://www.baeldung.com/java-json-binding-api (ob Du die Maven-Dependencies brauchst, hängt davon ab, welchen Server Du verwendest. Ein vollständiger Java EE 8 Server bringt den Spaß von Haus aus mit und in der pom.xml reicht der Verweis auf die Java EE APIs, scope provided; ein Java EE 7 Server hat "nur" JSON-P dabei).

 

[RezaScript]

Danke, gut zu wissen. Ich hab's einfach mit Gson gemacht. Funktioniert einwandfrei, so wie ich es wollte