Implementando um jogo multiplayer usando node.js e websockets na kinghost

Nos dias 03 e 04 de novembro aconteceu em Florianópolis RD summit, o mais completo evento de Marketing Digital e Vendas da América Latina. E claro, a KingHost esteve presente com um estande no evento \o/.
Caso você tenha passado por lá pode conhecer nossos produtos (incluindo o lançamento hospedagem WordPress), conversar com a gente e faturar brindes incríveis. Além de tudo isso, apresentamos uma dinâmica muito legal no evento: O desafio WordPress.

Neste artigo vamos apresentar a novidade, mostrando como utilizar sua interface e como foi realizada a sua implementação. O desafio é um quiz dinâmico e interativo, desenvolvido usando Node.js e websockets, onde dois jogadores disputam em tempo real para provar quem tem o maior conhecimento sobre curiosidade do nosso amado CMS. O quiz funciona assim:

O endereço do quiz é acessado de um computador, smart tv ou qualquer outro dispositivo que seja de fácil visualização para ambos os jogadores, nesta instância uma nova sala é criada o que gera um id único para aquela sessão.

Então os dois jogadores devem acessar o mesmo endereço de seus smartphones. Logo que os dois conectarem o jogo se inicia.

O jogador que clicar na resposta correta ganhará 5 pontos, e então se inicia um novo turno com uma nova pergunta para os dois jogadores. Caso a resposta escolhida pelo jogador seja incorreta, ele perde 3 pontos e a pergunta segue a mesma até que um dos dois responda corretamente. Este ciclo se repete por 5 turnos/perguntas e então o sistema informa se houve um vencedor ou se houve empate.

Implementação:

Este sistema pode parecer muito complexo a princípio, mas ele se torna simples com o uso do node.js e da biblioteca socket.io que facilita em muito as mensagens de rede usando websockets.

Websockets é um protocolo que fornece canais comunicação full-duplex sobre uma única conexão TCP. O websocket foi padronizado pela IETF na RFC 6455 em 2011, e sua Web IDL.

Sendo assim, o websocket se torna uma excelente opção para sistemas de comunicação que não exigem comunicação em tempo real e que necessitam de escalabilidade. Com o apoio do socket.io, a implementação se torna muito facilitada, pois a biblioteca cuida do gerenciamento das mensagens e eventos. Essa facilidade nos libera tempo e energia para concentrar no que realmente importa, a implementação do sistema que desejamos desenvolver.

É importante ressaltar que para o desenvolvimento deste sistema me baseei no Anagrammatix desenvolvido por ericterpstra. Caso queira conferir a implementação original do sistema, o código está disponível no github.

Quanto ao arquivo que inicializa a aplicação se trata do index.js, nela chamamos todas as dependências da aplicação:

// Importa o Express module
var express = require('express');


// Importa o module 'path' (padrão do Node.js)
var path = require('path');


// Cria uma nova instância do Express
var app = express();


// Importa o arquivo responsável pela lógica do jogo em server side
var agx = require('./agxgame');

Sendo que o na sua criação da instância do mesmo o seguinte código é chamado:

exports.initGame = function(sio, socket){
    io = sio;
    gameSocket = socket;
    gameSocket.emit('connected', { message: "Você está conectado!" });


    // eventos do  Host
    gameSocket.on('hostCreateNewGame', hostCreateNewGame);
    gameSocket.on('hostRoomFull', hostPrepareGame);
    gameSocket.on('hostCountdownFinished', hostStartGame);
    gameSocket.on('hostNextRound', hostNextRound);


    // eventos do Player
    gameSocket.on('playerJoinGame', playerJoinGame);
    gameSocket.on('playerAnswer', playerAnswer);
    gameSocket.on('playerRestart', playerRestart);
}

Nele estão descritos todas as mensagens esperadas pelo host via websocket. Por tanto  quando o host recebe a string ‘hostCreateNewGame’ chamará a função hostCreateNewGame.

Sendo assim podemos facilmente implementar uma aplicação assíncrona entre o host e os jogadores.

Caso queira verificar o código fonte, que está completamente comentado,após o final do evento publicaremos o código fonte da aplicação no github e atualizaremos o artigo com o link.