socket.io: Räume korrekt ändern und Chat auf der gleichen HTML-Seite implementieren

Problem: Ich muss Chat mit einer Option implementieren, um einen Raum mit socket.io zu ändern. Ich habe versucht, es mit einer einzigen HTML-Datei auf der Client-Seite zu tun, aber Clients aus verschiedenen Räumen schrieben im selben textarea so Zimmer funktionieren nicht. Aus diesem Grund habe ich zwei separate HTML-Seiten erstellt, um meine Räume zum Laufen zu bringen.socket.io: Räume korrekt ändern und Chat auf der gleichen HTML-Seite implementieren

Und es funktioniert gut, aber ich möchte eine bessere Lösung haben: machen alle clientseitige Logik in 1 einzelne HTML-Datei.

Heres mein serverseitigen Code, chat.js:

"use strict"; 
let app = require('express')(); 
let server = require('http').Server(app); 
let io = require('socket.io')(server); 

app.get('/', (req, res) => { 
    res.sendFile(__dirname + "/logs/chat2.html"); 
}); 

app.get("/room", (req, res) => { 
    res.sendFile(__dirname + "/logs/chat.html"); 
}); 

io.on("connect", (socket) => { 
    // Notify about a new user 
    socket.emit("userSelfNotification", {text: "--SELF-- You successfully entered the server"}); 
    socket.broadcast.emit("newUserNotification", {text: "--BROADCAST-- New user joined the server"}); 
    // Send message 
    socket.on("message", (message) => { 
    io.sockets.emit("newMessage", {text: message}); 
    }); 
    socket.on("changeRoom", (socket, message) => { 
    socket.join(message.roomUri); 
    socket.leave("/"); 
    }); 
}); 

// Create a new room 
const room = io.of("/room"); 

room.on("connect", (socket) => { 
    socket.emit("userSelfChangeNotification", {text: "--SELF-- You successfully changed the room"}); 
    socket.broadcast.emit("newUserNotification", {text: "--BROADCAST-- New user joined the room"}); 
    socket.on("message", (message) => { 
    room.emit("newMessage", {text: message}); 
    }); 
}); 

server.listen(3000);

Mein Hauptraum Code, mainRoom.html:

<!DOCTYPE html> 
<html lang="eng"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Chat</title> 
<script src="https://code.jquery.com/jquery-3.1.0.min.js" charset="utf-8"></script> 
<script src="http://localhost:3000/socket.io/socket.io.js"></script> 
<script> 
    let socket = io.connect('http://localhost:3000'); 
    socket.on("userSelfNotification", (message)=> { 
    $("textarea").val($("textarea").val() + message.text + "\n"); 
    }); 
    socket.on("newUserNotification", (message) => { 
    $("textarea").val($("textarea").val() + message.text + "\n"); 
    }); 
    socket.on("newMessage", (message) => { 
    $("textarea").val($("textarea").val() + message.text + "\n"); 
    }); 
</script> 
</head> 
<body> 
<textarea name="name" rows="8" cols="40"></textarea> 
<p></p> 
<input type="text" name="text" size="20"> 
<button type="button" name="button">Send</button> 
<button type="button" onclick="location.href='http://localhost:3000/room';" name="changeRoomButton">Change room</button> 

<script> 
    $(document).on('click', 'button',() => { 
    let message = $('input').val(); 
    socket.emit("message", message); 
    $('input').val(null); 
    }); 
    $(document).on("click", "changeRoomButton",() => { 
    socket.emit("changeRoom", {roomUri: "/room"}); 
    }); 
</script> 
</body> 
</html>

Mein zweites Zimmer-Code ist fast das gleiche, mit Ausnahme der Zeile, wo ich mich mit der URL des Zimmers verbinde:

let socket = io('http://localhost:3000/room');

Die Frage: Wie kann ich 2 Räume in 1 HTML-Datei kombinieren?

Quelle

2017-08-21 Evgeny Kobzev

Ich würde einfach Server-Side-Events für Beitritt und Verlassen von Räumen machen. So können Sie

einen zusätzlichen Schritt hinzufügen, um den Raum zu definieren, um den Standard ‚/‘ Raum zu betreten vor dem Anschluss
oder verbinden und dann eine Liste von möglich Zimmer zu verbinden zurückzuschicken.

So müssten Sie clientseitige Ereignisse für das Ausstrahlen „subscribe“ (zusammen) & „unsusbscribe“ (lassen), die Zimmer und der Server macht die Arbeit machen.

Hier finden Sie eine Antwort, die ich für gab server-side socket.io joining/leaving rooms

Sie sollten auch wissen, kann ein Benutzer auf mehrere Räume abonniert werden, können Sie vermeiden, dass, wenn Sie möchten, indem Sie die aktuelle Raum abzumelden, wenn eine neue Verbindung ein.

EDIT: EXTRA OPTIONEN

Wenn Sie Ihre Client-Knoten dienen (Express zum Beispiel) Sie können auch ein param in der GET-Anfrage machen (/ Chat /: Zimmer) und die :room Param ist, was verwendet wird, um sich mit diesem Raum zu verbinden.

Ich bevorzuge immer noch die Verbindung mit dem Server und dann eine Liste der möglichen Räume zu dem Client zurückzukehren, um beizutreten.

Quelle

2017-08-21 09:49:09 EMX

Quote: Sie müssten clientseitige Ereignisse für das Ausstellen von "subscribe" (beitreten) und "unsusbscribe" (verlassen) die Räume und der Server macht die Arbeit. Kommentar: Ich habe es gemacht, ich habe das Ereignis "changeRoom", das auf dem Server Folgendes macht: 1) socket.join (message.roomUri); 2) socket.leave ("/"); –

socket.io: Räume korrekt ändern und Chat auf der gleichen HTML-Seite implementieren

Antwort

Verwandte Themen