Collabrative scene

🌵 Needle Engine
1

Is there a way to enter room code to join the room instead of using a link?

2

Hello Saad Baig,

Yes, you can implement a way to join a collaborative room using a room code instead of a link. The SyncedRoom component allows you to join a room programmatically by calling methods in your code.

Here’s a simple pseudocode plan to achieve this:

  1. Add an Input Field: Create an input field in your UI where users can enter the room code.
  2. Join Room Logic:
    • Capture the input value (room code).
    • Call the joinRoom method from the context connection to join the room using the entered room code.

Here’s a code example:

import { Behaviour } from '@needle-tools/engine';
import { RoomEvents } from '@needle-tools/engine';

export class JoinRoomWithCode extends Behaviour {
    private roomCodeInput: HTMLInputElement;

    awake() {
        // Create an input field for room code
        this.roomCodeInput = document.createElement('input');
        this.roomCodeInput.type = 'text';
        this.roomCodeInput.placeholder = 'Enter Room Code';
        document.body.appendChild(this.roomCodeInput);

        const joinButton = document.createElement('button');
        joinButton.textContent = 'Join Room';
        joinButton.onclick = () => this.joinRoom();
        document.body.appendChild(joinButton);
    }

    joinRoom() {
        const roomCode = this.roomCodeInput.value;
        if (roomCode) {
            this.context.connection.joinRoom(roomCode);
        } else {
            console.warn('Please enter a room code.');
        }
    }
}

With this implementation, users can input a room code and click “Join Room” to join the specified room.

For detailed foundational information on how SyncedRoom works, you can refer to the relevant documentation (see the documentation).

Feel free to ask if you need further clarifications or additional features!

3 replies left
thread_WnNq47LxAlToEFTvFLYMr4nb
Reply to this message to continue the conversation

3

Hi, you can setup the SyncedRoom component to not automatically join (disable joinRandomRoom) and then set the roomName property from your script / UI and call tryJoinRoom()

or you can do what the bot suggested - your HTML code can be external and you just access the Needle Engine context to call joinRoom(...) (just make sure to also disconnect previously joined rooms)

4

I want to create my custom “create room” or “join room” kind of logic. The bots tells on how to join a room if you have the room code already.
Is there any place where I can find different room events documentation?

5

No the bot told you how to create UI and call the core connection.joinRoom method which is responsible for connecting your users to a networked room. You don’t need any room code but you can enter any string you like (please read the reply again).

I would also suggest that (if you use the shared networking server) that you enter a fixed prefix to any user-entered room code (e.g. your project name)

You can find networking docs in our documentation:

6

wss://needle-tiny-starter.glitch.me/socket’ failed:
This is error msg I’m receiving when tried to use

this.context.connection.joinRoom(“myroomcode”);

Am I missing something? Do I have to clone and run local networking example or should it be working by default?

7

Hi, no you dont need to run the networking local. Please share a bit more information about the error and the context in which you called the method. This is what the SyncedRoom does under the hood too.

if (!this.context.connection.isConnected) {
      await this.context.connection.connect();
}
this.context.connection.joinRoom(<roomName>);

You could also invoke it like this:

this.context.connection.connect().then(connected => {
  if(connected)  this.context.connection.joinRoom(<roomName>);
});
8

image
image871Ă—592 19.9 KB

this is what im trying to achieve. I want the user to add his own room code to join/create a new room.

This made the error disappear but evertime the page refresh, I see the join room button on the needle menu is changed to leave room. The rest of the logic doesn’t change the url either.

9

image