Multiplayer tutorial 2: chat room

Favourite 80 favourites
Tutorial written by AshleyOriginally published on 14th, March 2014 - 3 revisions

Login layout

The first layout Login does not need much explanation. It is essentially just a text box with a Join button. The entered name is stored in a global variable and no connection actually happens until the next layout.

The events for the layout simply deal with focusing the text box, ensuring you can't join before typing in a name, and storing the entered name in the MyUsername global variable when joining. Also it checks the Is supported condition in the Multiplayer object - not all browsers support WebRTC yet, and we should inform the user if it won't work for them.

Chat layout

The Chat layout connects in On start of layout, using the name stored in the MyUsername global variable.

The objects in the layout are designed to mimic a common chat room app: the main ChatLog is where chat messages appear, the PeerList on the right lists the names of the other people in the chat room, and there is a text box with a Send button along the bottom to send messages with. (You can also press return to send a message.)

The events for this layout will deal with:

- connecting to the signalling server and logging in
- joining the chat room
- listing who else is in the room and updating the list as people join and leave
- displaying received chat messages
- sending any chat messages entered locally
- dealing with any errors or disconnections that occur

We'll begin looking at the actual events on the next page of the tutorial.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

5
Tedg 9,849 rep

Wow this is fantastic .!

Friday, March 14, 2014 at 3:36:23 PM
2
GodSpear 2,741 rep

Спасибо хороший

Friday, March 14, 2014 at 4:00:21 PM
6
RamPackWobble 30.8k rep

Thanks for this - its going to need a few reads before it gets through my thick skull, but I'm sure it will.

Friday, March 14, 2014 at 4:40:00 PM
4
iceangel 32.1k rep

chat room ... interesting!!!

Friday, March 14, 2014 at 4:53:08 PM
2
jardelbr 4,857 rep

PERFECT! Chat room is so much important for MP games!

Friday, March 14, 2014 at 6:06:41 PM
3
AllanR 17.5k rep

VERY Exciting stuff!!! Can't wait to get started!

Friday, March 14, 2014 at 7:04:49 PM
1
exertia 2,625 rep

@Ashley - say my game can only work well with 2 players i.e. one host and one peer - is there anyway I can limit my multiplayer sessions to 2 players only?

Friday, March 14, 2014 at 8:40:35 PM
3
sggs 3,555 rep

Thanks for laying the foundation for all my new games.

Friday, March 14, 2014 at 9:40:55 PM
2
edisone 18.3k rep

very very interesting...

Saturday, March 15, 2014 at 4:01:29 PM
2
Mohorelien 3,220 rep

We'll translate these tutorials soon.

Sunday, March 16, 2014 at 12:59:32 PM
1
Matiu 921 rep

So awesome:D One question however I am trying to get the chat example to work on a server with https protocol. I get this message...

Connecting to server...
Signalling error: SyntaxError: Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss'. 'https' is not allowed.

Anyone know if it is possible to run multiplayer over a https connection?

Monday, March 17, 2014 at 9:24:17 AM
1
Ashley 190.8k rep

@Matiu - the signalling server uses secure websockets, not https. The connection is already secure (since it uses wss: instead of ws:).

Monday, March 17, 2014 at 4:53:33 PM
2
Matiu 921 rep

Thanks Ashley, I have since been reading up on wss:)

Tuesday, March 18, 2014 at 7:49:36 AM
4
Miu3 7,561 rep

Can you maybe later describe more the signaling server part? Can we use this address for our own projects forever? Any possible tutorials for other alternatives?

Wednesday, March 19, 2014 at 10:00:58 PM
4
fassFlash 4,377 rep

Civilization V uses a system where when the host leaves the game, another player with the best connection/at random gets the host position. Can you implement this in the example?

Sunday, March 23, 2014 at 10:01:42 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.