Multi-player Bomberman sample

with Chromecast

View project on GitHub

Outils

Google Cast API Reference : docs

Setup

Clonez le dépôt :

 $ git clone https://github.com/xebia-france/workshop-cast-maze.git

Coding party

Ouvrez le fichier suivant dans votre IDE favori

sender/js/app.js

Ce fichier contiendra tout le code nécessaire pour communiquer avec le serveur sur la chromecast.

Configuration

Renseignez l'identifiant de l'application dans la variable appId

var appId = '8D7FEAA1';

Pour communiquer avec la chromecast (échanger des messages), un namespace est nécessaire, renseigner le namespace de l'application dans la variable namespace

var namespace = 'urn:x-cast:fr.xebia.workshop.cast.maze';

Initialisation

Ajouter l'API Chromecast à la page index.html

 <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

Ecoutez l'événement __onGCastApiAvailable cf. Initialization, cet événement necessite un callback prenant deux paramètres, si le premier paramètre est true alors exécutez la méthode

 initializeCastApi()

Sinon affichez une erreur.

La méthode initializeCastApi() permet d'initialiser l'API cf. Initialization

Lorsque la session est initialisée, la méthode sessionListener(e) est appelée (nous verrons plus tard son fonctionnement).

Sauvegarder la session ainsi récupérée.

NB : une fois la session initialisée, la méthode receiverListener(e) permet de récupérer les messages envoyés par la chromecast.

Lancer le serveur NodeJS (racine du projet) :

$ npm install
$ node server.js

Affichez la page web :

http://localhost:8080/sender/js/index.html

Vérifiez que dans la console vous avez bien le message

new session id: XXX

Connection à la chromecast

Codez la fonction launchApp() pour connecter votre navigateur à la chromecast cf. Launch

Affichez un message lorsque le navigateur est connecté cf. méthode onRequestSessionSuccess(e)

Retournez sur la page web :

http://localhost:8080/sender/js/index.html

Et vérifiez qu'en cliquant sur le bouton Launch app un nouveau joueur apparait bien sur l'écran connecté à la chromecast.

Félicitation la connection à la chromecast est réussie ! Allons jouer maintenant :)

Communiquer avec la chromecast

Lorsque vous cliquez sur les boutons up, down, left, right la méthode go(dir) est appelée.

Faites en sorte d'envoyer un message à la chromecast cf. session.sendMessage

L'application sur la chromecast n'accepte que les messages :

up
down
right
left

Faites bouger votre joueur.

Félicitation ! Le joueur bouge ! Finissez le labyrinthe au plus vite :).

Récupérer la couleur du joueur côté client

La chromecast peut aussi communiquer avec ses clients en utilisant des messages.

Essayez de récupérer la couleur du joueur après la connection :

Cela se passe dans la méthode receiverListener(e), coder la conversion du paramètre en JSON et la vérification de l'existence du champ color

e.color

Changez la couleur du fond par celle reçue :

document.body.style.backgroundColor = e.color;

Déconnectez-vous puis reconnectez-vous à nouveau, vérifiez que la couleur du fond a bien changé.

Bravo ! Vous avez réussi à recevoir des messages depuis la chromecast :).

Go

Essayez de finir le labyrinthe !

Next ?

Codez une autre partie receiver ou sender