Websockets Rooms

Since Wappler version 3.8.2, Sockets have received advanced features. In several training articles, Teodor outlined how to use functions such as Emit / Direct Message / Broadcast / Socket Identify

However, there is no information in the documentation on how to use Join Room / Leave Room / Get Joined Rooms / Get All Rooms

I would like to get a description of these functions at least in general terms. When and how does it make sense to use them in a Wappler?

Bump

Bump for room/namespace reference docs for sockets.

Anybody implemented this and would care to share some quick pointers before I jump into it? I’ve done the basic chat message, but now need to join various users together in a multitude of dynamic rooms (threads).

@Teodor @George @patrick

Guys, any comment on this? I’m trying to allow users to move from one room to another at will, only being in one room at a time.

The Join room action is only available on the connect socket…how can I group people together in various rooms and allow them to enter/leave at will?

2 Likes

@Teodor @George @patrick

Could use any information you might have on this.

1 Like

You can create socket actions in which you then can use the join/leave room actions. You can call these actions from the client after they have a socket connection.

Available actions:

Join Room Add current client to a room
Leave Room Remove current client from a room
Get Joined Rooms Get all rooms the current client is in
Get All Rooms Get a list of all created room in the current namespace

2 Likes

Ahh, got it. Thanks for that.

I have this working for the default namespace, but can’t figure out how to incorporate a new namespace into this.

Here’s what my message socket looks like with default namespace

But with a test namespace, the Input parameters do not show:

2 Likes

Hi Patrick…

Sorry im a bit stupid on this one… :slight_smile: hahahaha…

Is there perhaps a tutorial to do this… as i did search to documents but could not find anything… as my head is a bit stuck…. I have tried doing this.. but clearly im missing out on how to Join Room… either client side… via the connect.. or creating a Server Connect.. but for the life of me… im stuck.. did @Teodor perhaps create a tutorial “with pictures” as he had done with … * Realtime Data Update with NodeJS and WebSockets * as im just a bit stuck here.. or perhaps have a video please…

Join Room Add current client to a room
Leave Room Remove current client from a room
Get Joined Rooms Get all rooms the current client is in
Get All Rooms Get a list of all created room in the current namespace

mmm found a diffrent document…
https://docs.wappler.io/t/websockets-realtime-messaging/30847/

let me go and have a look at this… :slight_smile:

Hi… i wonder if you can assist when you have a couple of min please.. i think im approaching this wrong…

The idea is to have a page with a url parameter eg say start?id=5

then on that page i want to set a value…. room_5 as a set value

What i then want to do is “dynamically” want to bind that value… eg room_5 …. to where you have currently Room 5…. but i cannot pass a query.id GET…. my head is a bit tired.. but for the life of me im stuck in my head..

AS all i want to do is create diffrent rooms from diffrent query.id’s so that each room is unique… or am i approaching this completely wrong…. please can you help.

You want the user to join a specific room when they enter/load the page. You need to send a message from the client to the server on for example the load event, with that message you pass the query parameter for which room to join.

@Mozzi
This is a small example:

Joining a room

On socket panel create:
image

And create a $_PARAM and a Join Room action:


Socket that sends the message:

Create another socket like:
image

And just a param like message:


Api that sends the message:

Create an API (In my case, send_to_room.json) with an emit action:

Note that I have .toNumber()


Using client side to join the room:

Add sockets:

On socket connect event:

Select emit -> joinroom socket (I have query.queryid.toNumber()) :

Now on the same socket component, select dynamic event -> message:

We want to print the message in the page:

Testing:

In my page with ?queryid=5 I can see the value was sended:

If I send with the api to room 6 (NOT 5):

Nothing is received, because the user it's not in the room 6, it's inside room 5

So let's now test with number 5:

And there it is:

Don't know if that is exactly what you need, but I hope it helps..

4 Likes

@patrick are you sure the on load does the job?

:thinking:

1 Like

@franse Thank you so much. You did such an impressive job with screenshots and explaining it.. i hope you are not to busy with your day job.. because im going to “recommend” you to Wapplers Team… to use you to create tutorials and documents … for stupid / head stuck users like myself …. im sure the Team can employ you on the sideline… as your steps are great…

I just could not get my head around things as they were all in the UI.. but no documentation… i know the Team cant cover everty little detail and things should work “the same” / “same workflow” but when ones mind is stuck. its like a brick wall….

So once again thank you so much @franse for taking the time out of your day to do this.. this “tutorial” should be pinned to the “websockets” documentation / tutorial if possisble… it will also help others.

1 Like

Dont think it will work on the app load.. but rather “load”on the socket on-connect action…but thanks im making headway…

I guess the next step is to check the rooms i have “joined” and then only emit changes to those rooms joined.. ill go and see if i can find more info on that.. but thanks for above as its already making thing “clearer” on how this functions.

Thanks for your words, glad to help!
When I have issues I come here and there's always someone willing to help me so that's enough for me :slight_smile:

1 Like

ok…. so now that i created the rooms…

is there a way to only “Refresh Server Action” for that room?
Because now even if there is diffrent rooms.. when I “Refresh Server Action” it updates accross all rooms… what i really want to achieve is to only “Refresh Server Action” with that room ID..

So my first try was to use emit… and then call the socket action.. as my knowledge is limited on this and trying to wing it before asking for help.. but now im stuck again :slight_smile:

So this is what i have.. and that is working.. but the problem is.. its refreshing all the data in all the rooms regardless…. so even if a person is not part of a room.. it will refresh the Server Action…

So this is what i have tried.. to add a Socket Action

Then rather than refreshing the Server Action above …. to add a Emit action…
As it seems like it has a space for a ROOM .. hence my heads says it will only then refresh the data for that ROOM as the ROOMNUMBER eg… id and “record” id in the database is the same for that item…

anyone might have some ideas about this…. otherwise there is no point in me creating rooms.. if all the data just refreshes regardless in what room is joined / created……