socket.io: correctly change rooms and implement chat in the same HTML page

Question

Problem: I have to implement chat with an option to change a room using socket.io. I tried to do it with a single HTML file on the client-side, but clients from different rooms wrote in the same textarea so rooms do not work. That´s why I created 2 separate HTML pages just to make my rooms work.

And it works just fine, but I want to have a more slick solution: make all client-side logic in 1 single HTML file.

Here´s my server-side 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);

My main room 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>

My second room code is almost the same, except for the line, where I connect to room´s URL:

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

The question: how can I combine 2 rooms into 1 HTML file?

score 1 · Answer 1 · answered Aug 21 '17 at 09:49

I would simply make server-side events for joining and leaving rooms. So you can

add an extra step to define the room to join before connecting
or connecting to the default '/' room and then send back a list of possible rooms to join.

So you would need to make client-side events for emiting "subscribe"(join) & "unsusbscribe"(leave) the rooms and the server does the work.

Here you have an answer that I gave for server-side socket.io joining/leaving rooms

You should also know, a user can be subscribed to multiple rooms, you can avoid that if you wish by unsubscribing the current room when joining a new one.

EDIT: EXTRA OPTIONS

If you are serving your client from node (express for example) you can also make a param in the GET request (/chat/:room) and that :room param is what is used to connect to that room.

I still prefer connecting to the server and then returning to the client a list of possible rooms to join.

Quote: you would need to make client-side events for emiting "subscribe"(join) & "unsusbscribe"(leave) the rooms and the server does the work. Comment: I made it, I have event "changeRoom" that on the server does the following: 1) socket.join(message.roomUri); 2) socket.leave("/"); — Evgeny Kobzev, Aug 21 '17 at 10:38

socket.io: correctly change rooms and implement chat in the same HTML page

1 Answers1