Hi everyone!

The promised is a debt!
https://github.com/damian-pastorini/dwdgame

Before anything please consider that this is my first implementation ever!
I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming.
This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client.
After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow.

So....

This is a really simple base MMORPG game created based on the Colyseus samples:
https://github.com/gamestdio/colyseus-examples

And on the Phaser 3 implementation from Jacky Rusly:
https://github.com/jackyrusly/jrgame

As you will see I've considerable modified how the jrgame was interacting with Socket.io in order to make it work as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client :P sorry Jacky!)

The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far).

Here's the link to the repo:
https://github.com/damian-pastorini/dwdgame

Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback!

I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like:
https://jrgame.herokuapp.com
But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus.

I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful.

I really hope this help more than one person, maybe someone like me who would loved to get this as starting point.

Best,
Damian

Thanks for the reply @lw1990
I'll look for the solution like it's mentioned in the old post then.

Re: Webpack bundle colyseus typescript

In reference to the old post, is really a good idea to have all the physics and logic on the server side?
Wouldn't that overhead the server with calculations that should be done on the client?

What's coming to my mind is something like:
A1 - The client A press "left" > which sends a small package to the server with the action (let's say something like "A=L").
A2 - The server does nothing with that but broadcast it to every other client (again "A=L").
A3 - Then client B who receive this will calculate client A result position and update the view accordantly.

Isn't that better than:
B1 - The client A press "left" ("A=L").
B2 - The server calculates the new position and broadcast something like "A=[new-position-data]"
B3 - Then client B updates the view using [new-position-data] instead of calculating the new position for A based on A pressing left.

I'm guessing the problem will be on saving the A "real-position" as the player real state on the server, right? Something like to validate each player position after pressing left?
Could this be like something to avoid possible hacks on the client side?

@halome , do you have a final version of your integration to share? Did you used Phaser 2 or 3?
I'm looking to use Phaser 3 in my game along with Colyseus and MySQL.

No need to say I'm new into game development (I'm just working on my first game), so I have a lot of questions like this :P

Thanks in advance!

Hi @endel , I've finally got the login/registration working with Colyseus + MySQL, so I'll try to create a base-example repo in BitBucket to share it here.
I had a few issues while trying to handle the onAuth errors for the different cases but got it working on the client side by adding different error handlers (when you see it you will be able to tell if that's the best way to do it or not).

That said, I've started to do some research on how to implement Phaser and found this great Phaser + Socket.io example:
https://github.com/jackyrusly/jrgame
You can see the demo here:
https://jrgame.herokuapp.com

Looks great to me since it's exactly what I was looking for, so I'm trying to implement the same sample but integrated with Colyseus (I'm guessing Colyseus will help on avoid some socket issue I've got checking the demo related to the socket connections, not by bombing the server with connections but trying different actions moving the players and so).

My problem now is much more base, since I have zero experience with webpacks (trying to use your Tic-Tac-Toe sample), and even less by using something like "bundle" the files on the server side to create like a "client distribution" (like in the jrgame sample), if you have any recommendations for this will be great.

Maybe you can also check the jrgame sample and tell if there's any easy way to integrate it with Colyseus?

If I manage to get this example fully working it will be a great contribution since it will be a simple implementation with Colyseus + DB engine (MySQL in my case but it should be really easy to use Mongo or any other) + Phaser 3
For people like me who's struggling on how to create an MMORPG in a easy way this could easily set the base architecture just by cloning the repo :)

Best,

I've fully missed that part! So sorry! I'll create a full login sample so you can include it in the contributions if you like.
I'll be also working with Phaser so I'll probably be able to provide a basic sample for that implementation in the client side.
Best,

I'm stiil trying to understand how to make it work with a DB, because use sessions is kinda pointless since I would have to re-authenticate the user every time before get it in the room, so the way the onAuth seems to work I only need to send the form data in the join room method to validate it on the onAuth method right?
So, on client side I would have:

$login.on('submit', function(e){
            e.preventDefault();
            room = client.join('game_room', {username: $('#username').val(), password: $('#password').val());
        });

So good so far I got the params on the onAuth, but how can I validate the user in the DB? This won't work since we need to wait for the DB result:

onAuth(options)
    {
        if(Player.find(options.username, options,password)) {
            return true;
        } else {
            return false;
        }
    }

@endel could you provide an example of a simple way to do something like this please?

Thanks in advance!
Damian

If I don't implement the commented flow I was looking on do something like:

app.post('/game-room.html', function(req, res) {
// get the user logged
// render the game view if the login success
});

This could also work but if the client refresh the window it will be logged out automatically.

@endel will be a good idea to include a simple sample on how a basic login with X DB users could be implemented.
Could you confirm if any of these flows are a good practice or if I'm still missing something related to the onAuth?

Thanks!

My question is, is there any way to keep users logged even if the browser is refreshed?

I've looked in the forum for other references and the closer I found was:
Need advice on actions before joining a room

I was reading this link:
https://stackoverflow.com/questions/43492717/how-to-keep-user-logged-in-even-after-reloading-the-main-file-index-js
In which the solution was to implement express-session and passport.

And this other:
https://www.linkedin.com/pulse/nodejs-user-session-management-web-applications-using-harshad-bankar/
In which only express-session was implemented with some examples about the login action.

And I was thinking on create a flow like this:
-> express to show the /login form
-> a /loginPost action to validate the user in the DB
-> at tha point register the user in the session with express-session
-> and for last redirect the user to game-room
-> there I'll re-validate the session (again with express-session) and run the join-room method

Will that be ok? Because I feel like I'm missing something related to rooms onAuth or some like that which could be better...

If I'm not missing anything I hope this could be a small contribution.

Thanks!

OK! FINALLY FOUND THE ISSUE!

The short-temporal-fix:
1 - Open FF and go to about:config
2 - Look for network.websocket.max-connections
3 - Set the number as high as you like :P at some point you will probably hit the issue again.

The long-story:

• Doing some research found the following: http://websocketstest.com/
  In my case websockets in FF were mark as supported but every port seems to be closed and not a single connection was stablished. In CH everything is opened and working.
• At this point I've realized that for sure it was something in the client and I've started to think in a weird case where FF is reaching a limit in the WebSocket connections. Didn't know this was possible....
• Keep doing some research on the issue and found a post that says something like: "https:// to ws:// is disallowed by default on firefox", in the same thread says that could be fixed by going to firefox's about:config and toggling network.websocket.allowInsecureFromHTTPS but didn't worked for me.
• So I've started to do some tests by changing the FF configurations, first tried by changing other configs like "network.websocket.delay-failed-reconnects" but didn't worked. And there it was! "network.websocket.max-connections" had a 200 value, so I've changed it to 201, and after refresh the App it finally worked. There are also other configurations there like "network.websocket.timeout.close", but I really don't want to change any of these to fix the issue (not even the max-connections value), because I don't think that's a fix but more of a hack to avoid the issue.

Now... the real issue seems to be that FF is keeping all the connections opened after you refresh the browser.
One thing to note is that even FF keep the "connection" as "active", the colyseus monitor show up how the user connects and disconnects.
An easy way to test this is by connecting to any app open the config in a new tab and set the connections limit to 2, then refresh the browser y after the second refresh you won't be able to connect anymore.
I'll be still digging on this to find a final fix but maybe is just something I'm setting in my app?
I'm using the very simple "state" case from the colyseus-examples.
@endel any clues?

Thanks in advance!

After a few FF restarts it started to work without modified a single line.
The same happens with IE.
Still not a clue about what caused the issue :(