Create a .io game using Game Maker Studio 2 and Node.js (Part 2)

Welcome back to the 2nd Part of this Tutorial! If you’re new here, definitely check out Part 1!

What have we done so far...

We’ve set up our basic GMS2-Project by including the socket.io extension and the Server environment which listens to new connections

So, let’s get to the more interesting part!

This post will cover how to

• Update the SocketIO extension to the latest version (v1.0.2)
• send data between and forth
• how to create callbacks to incoming events
• and how to process the data!

The finished project can be found on GitHub

Update the extension to v1.0.2

Here’s the extensions page: YoYo Marketplace. The update process is very simple, after updating your project to the latest version (by updating from the IDE or deleting the old extension and importing the new one, you don’t need to replace or re-import the scripts, just the extension.)

replace this line

sio_connect(IP, PORT)

with

sio_connect_by_url("http://IP:PORT")

IP and PORT should be replaced with real values ;) That’s all, you’re up2date!

Find out what more has changed by checking out the GitHub page or the YoYo Marketplace.

This time we start with the Server

Every time a client connects to our server, we see in our console his unique ID also known as the session ID (short SID). The session ends when you close and re-news if you reload/open the page.

In order to identify our client later on, we want to tell the client his SID by sending it right after the initial connection.

Add the following code below our “New connection..” message in index.js

client is our socket object which stores for e. g. our SID and the .emit(eventname, data) function. The first parameter ‘client_id’ is the event name and the second parameter is our data we want to send.

We put our data into a JSON object and send it directly to the client (note: this message is received just by client, I’ll link a cheatsheet at the end of the post, so you can check out how to send it to all clients or just specific ones).

We successfully send our first message, great! Let’s take a look at how to receive and read messages from the client! For that we need to create a new event (this event will be called ONLY when the client emits to it), we name this event “login”. Every event has one parameter in which the data is stored.

Maybe you’ve already noticed that we already have an event called “disconnect”, this event is already built-in to detect the client’s disconnection, as the name already states 🤯.

Your task

Create now the “login” event and output the data to the console we just received. (Basically copy & paste the “disconnect” event and change some values 😜)

Client

Create the event “client_id”

Creating a new event here is easy as well! Just navigate to the “sio_init” script and add a new event:

sio_addEvent("client_id");

In order to get access to this event, we have to create a new script called

gmcallback_sio_on_client_id

make sure that you spell “client_id” right, otherwise, it won’t work. (note: event names are always case sensitive).

Put this code inside the script

The .emit function in the server will encode the JSON object to a string by default, so we’ve to decode the data string to a ds_map to easily access it.

Send “login” event with data

Create a new script called “emit_login” and paste this code in

It’s pretty self-explaining: We create a new ds_map, fill it with data, encode the ds_map to a string and send it directly to the server! (Don’t forget to destroy the ds_map again)

That’s it! That’s how you send/receive data between the Client/Server, very simple right?

Task

create the event “login” in the client and output the argument0 to the browser console (show_debug_message(string)).

If you run the server and the client, check inside the console of your browser if your output looks similar to mine:

If it does, well done!

Now that you know how to set up a .io project and how to handle the data, you are pretty much ready to start your game!

Here’s the full server code

Full client code(.yyz file)

CHEATSHEET

Thank you for reading!

I would love to see the games you created based on this tutorial :D

One more example project:

SocketIO-GMS2-Extension/Example/Example 1 at master · ignoxx/SocketIO-GMS2-Extension

Have fun developing your games!