CODEWITHSUNDEEP
javascriptsocket.iochatroom
chubby marschmallow
chubby marschmallow

Reputation: 59

Server creates room socket.io and specific url

I would like to create dynamic room by the server and personalize the URL like this: localhost:3000/path/path.php?roomId.

I have a form for the user to enter their name, then they click a submit button "create a room" and they will enter a page with this type of url : " localhost:3000/path/path.php?roomId " where roomId is created by the server when the button is clicked.

For the moment when I create a room I just have the URL " localhost:3000/path/path.php " but I would like to personalize the URL so it becomes localhost:3000/path/path.php?roomId

The idea behind it is to be able to then share the link localhost:3000/path/path.php?roomId to other users so they can directly join the room only by clicking on the shared link (the code is for a multi player game, so I would like to create a shareable url and unique link like for the game skribbl.io).

However; I only see tutorials where the user enters the name of the room so I don't know how to approach this problem.

Here is my code : server.js

const express = require('express');
const app = express();
const httpServer = require('http').createServer(app);
const { getRandomString } = require("../utils/utils");

const io = require("socket.io")(httpServer, {
  cors: {
    optionSuccesStatus: 200,
    origin: "http://localhost",
    methods: ["GET", "POST"],
    credentials: true,
  }
});
//tbh I don't really understand all those lines, I just got it by following lots of tutorials
app.set('views', '../../path.php');
app.set('view engine', 'php');
app.use(express.urlencoded({ extended: true }));

io.on('connection', client => {

  //Creation private room
  client.on('createRoom', () => {
    var roomId = getRandomString(7); // use a function to create a random code room
    console.log("player joined");
    client.join(roomId);
  });
}

client.js :

const socket = io(document.location.protocol+'//'+document.location.host +":3000");

socket.emit('createRoom');

the form page.php :

<form id = "formulaire_creation_jeu" method='POST' action="path.php">
    <div id="pseudo" class='form-group mb-6'>
         <label for="username" class='form-label inline-block mb-2 text-gray-700'>Pseudo</label>
         <input id="username" type='text' name="username" required minlength="2" maxlength="15" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                        class='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-black focus:outline-none'>
          <div id="error_container_pseudo"></div>
     </div>    
     <div>
          <button type="submit" class="inline-block px-6 py-2.5 bg-yellow-400 text-black font-medium text-xs font-serif leading-tight uppercase rounded shadow-md hover:bg-yellow-500 hover:shadow-lg focus:bg-yellow-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-yellow-500 active:shadow-lg transition duration-150 ease-in-out">
              Create a room
          </button>  
     </div>
</form>

With my following code, when I submit my form, I just have a link like this : localhost:3000/path/path.php . The server and client are connected but I am not sure it even created a room. Thank you in advance for your help

Upvotes: 1

Views: 899

Answers (1)

Rasmus Edvardsen
Rasmus Edvardsen

Reputation: 169

So the only thing you want is for the roomId to be generated server-side - I don't see what would prevent you from emitting this on the client-side:

const socket = io(document.location.protocol+'//'+document.location.host +":3000");
socket.emit('createRoom');

And then on the server-side:

io.on('connection', client => {

  // Create private room
  client.on('createRoom', ({roomId}) => {
    console.log("Player wants to create a room");
    client.join(getRandomString(7));
  });
}

The only difference is that I moved the getRandomString(7) from the client to the server.

Upvotes: 1

Related Questions