Technos pour une SPA de type jeu en ligne

Par Virguleos, il y a 6 ans

Javascript NodeJS

Bonjour à tous :)

Pour aller à l'essentiel, je souhaiterais concevoir une application web de type jeu en Single Page Application où les joueurs pourraient se rendre pour se battre sur un jeu multijoueur, comme par exemple un tic-tac boom en ligne ou un pictionnary.

Le meilleur exemple est cette application : https://skribbl.io , c'est à peu de chose près l'idée que je cherche à développer (en termes de SPA).

J'ai déjà choisi le NodeJS côté BackEnd compte tenu de l'aspect temps réel et les nombreux I/O. En revanche, je suis un peu perplexe sur la techno à employer pour la partie SPA.

J'ai survolé quelques tutos MeteorJS mais je trouve que ça rajoute une couche de Framework à apprendre.

Avez-vous des conseils de technos et FW particuliers a utiliser pour mon projet ? Tout en sachant qu'il y aura une interaction forte utilisateur puisque je ne compte pas simplement proposer un jeu mais aussi un système de chat, etc...

Merci par avance pour vos lumières et vos conseils
Très bonne soirée et WE et a bientôt !

Virguleos

8 réponses

Pandazaur, il y a 6 ans

Bonjour,

Je pense que peu importe la technologie que tu utilises pour la création de ta SPA, tu peux partir sur du Vue.js, React, Angular, ou autres ...
En revanche, tu peux utiliser "socket.io" pour ta communication en direct entre Node.js et ta SPA. Ca pourra servir à ton système de chat et d'interaction entre les joueurs.

Virguleos, il y a 6 ans

Salut Pandazaur et merci pour ta réponse :)

Pour avoir pas mal creusé le sujet ce WE, j'ai finalement opté pour du Vue.js ; en revanche je galère un peu à choisir la bonne structure de projet pour démarrer. Les paradigmes sont nombreux (séparés le code back-end et front-end dans deux dépots différents et faire communiquer via REST API, mettre tout dans un même projet).

Penses-tu que je devrais tout baser sur du socket.io (inscription, chat, ...) ?

Merci et bonne journée,
Virguleos

Pandazaur, il y a 6 ans

Bonjour,

Je te suggère de faire un truc simple et logique:

  • API REST pour les actions non temps réel: (inscription, modification de profil, etc ... en fait toutes les actions presques)
  • Socket.io pour toutes les actions que tu as besoin de faire et qui ont un impact sur plusieurs personnes en temps réel (chat, interactions de jeu).

Pour mon architecture de projet, je pars en général sur un projet monolithique avec un sous-dossier par partie (api, front, ...)

Socket.io est plutôt simple d'accès, c'est très simplifié !

Virguleos, il y a 6 ans

Hello,

Super merci pour ton aide, il me reste deux questions :

  • Quel est le moyen d'usage pour conserver une "authentification" au travers d'un API REST comme celle que je souhaite faire ? J'ai lu l'exemple d'un code où la personne utilisait OAuth2, mais est-ce que je peux implémenter le même système que PHP avec les sessions en employant les cookies ?
  • Est-il possible ou existe-il des webpacks qui créent ce genre d'architecture monolithique ? Après un vue create, j'ai bien une arborescence front mais est-ce "d'usage" de déplacer toute cette arborescence dans un dossier "front" et créer d'autres dossiers "api", "real-time", ... ?

Merci :)

Pandazaur, il y a 6 ans

Bonjour,

Je te conseille poir ton authentification de passer par des token JWT.
https://www.ekino.com/articles/introduction-aux-json-web-tokens

Le dossier que te créée "vue create" tu n'as qu'a le renommer "front" tout simplement. Tu n'as pas besoin de les sortir du dossier. Ensuite tu te crées un dossier global "mon-projet" et tu met dedans "front", "api", etc ...

Virguleos, il y a 6 ans

Hello Pandazur !

J'ai un peu exploré et je crois avoir tranché sur les technos à utiliser : je suis pour l'instant parti sur du Nuxt/Express/Sequelize/Mariadb ; j'en suis pour l'instant à la phase de maquettage où j'essaie de structure mon application en server-side rendering (me permettant d'avoir un seul serveur à faire tourner).
Je garde dans un coin de la tête ton exemple sur les tokens JWT, je pense qu'il me sera utile :)

Cela fait beaucoup de pile de technologies à découvrir mais je crois être enfin arrivé au sommet !

Pandazaur, il y a 6 ans

Bon choix de partir sur Nuxt.js qui embarque pas mal de choses pour lancer une app

Virguleos, il y a 6 ans

Super, merci en tout cas pour tes réponses, ça m'a bien guidé :)
Très bon WE à toi et au plaisir !