websockets

Ho anirem fent per activitats (etapes) incrementals, que aniran incorporant diferents funcionalitats.

Objectiu: L’objectiu és crear dues aplicacions: un servidor de jocs i un client. El nostre client ha de poder connectar-se (i jugar) sobre la resta de servidors.

El joc: El joc ha d’estar sostingut pel servidor, és a dir, és el servidor qui marca quin joc és, quines són les regles, i és qui respon a les accions dels usuaris i procesa els moviments i els events. Cadascú ha de decidir quin joc vol implementar. L'únic límit són les especificacions que s'estableixen en aquest document, que han de permetre garantir la compatibilitat entre clients i servidors.

El client: El client fa de ‘joystick’ i de pantalla. Presenta les dades procedents del servidor i envia al servidor l’estat de les tecles (tecles de cursor, control i espai).

El servidor: El servidor, primer, en començar el joc, envia un arxiu d’imatges al client (imatge gran amb sprites tots de la mateixa mida).

A partir d’aquest moment, sempre que hi hagi un canvi en el joc, el servidor informarà a l’altre jugador.

Proporcionarà la posició dels diferents elements i l’sprite associada

En els exemples, el servidor només aguantarà una partida. Serà interessant trobar la forma de fer que suporti múltiples partides.

Partim de l'exemple recollit en la següent pàgina web: WebSockets con PHP + Javascript (Vanilla)

En aquesta pàgina web trobem una introducció teòrica a la tecnologia de websockets, enllaç a la lliberia PHP-Websockets (https://github.com/ghedipunk/PHP-Websockets), explicació pràctica del funcionament de la llibreria i un exemple d'ús de la mateixa.

L'esmentada llibreria, en el moment d'escriure aquest text, presentava diversos problemes menors de compatibilitat amb PHP 8. Pots corregir els problemes que puguis trobar (bàsicament, comentar les línies que donin error) o utilitzar PHP 7.4.

De la pàgina anterior, implementa l'exemple proposat i fes-lo funcionar.

A continuació, tens un exemple bàsic de comunicació mitjançant websockets en PHP:

index.html

websockets/xat_basic/index.html

<html>
<body>
    <h3>TEST SERVER</h3>
    <script>
        var socket;
        function init() {
            socket = new WebSocket("ws://localhost:9000");
 
            socket.onopen = function (msg) {
                alert("Welcome - status " + this.readyState);
            };
            socket.onmessage = function (msg) {
                alert("Received -  " + msg.data);
            };
            socket.onclose = function (msg) {
                alert("Disconnected - status " + this.readyState);
            };
        }
        function send(msg_xat) {
            if(msg_xat.length > 0) {
                socket.send(msg_xat);
            }
        }
        function quit() { socket.close() }
        function reconnect () { quit(); init(); }
    </script>
    <input type="button" onclick="init();" value="Connect">
    <input type="button" onclick="quit();" value="Close">
    <hr>
    <input type="text" id="msg">
    <input type="button" onclick="send(document.getElementById('msg').value);" value="Send">
</body>
</html>

SalaXatServer

websockets/xat_basic/SalaXatServer.php

<?php
require_once('websockets.php');
 
class SalaChatServer extends WebSocketServer {
    protected function process($user, $message) {
        echo 'user sent: ' . $message . PHP_EOL;
        foreach ($this->users as $currentUser) {
            if ($currentUser !== $user)
                $this->send($currentUser, $message);
        }
    }
    protected function connected($user)
    {
        echo 'user connected' . PHP_EOL;
    }
    protected function closed($user)
    {
        echo 'user disconnected' . PHP_EOL;
    }
}
 
$chatServer = new SalaChatServer("localhost","9000");
 
try {
    $chatServer->run();
} catch (Exception $e) {
    $chatServer->stdout($e->getMessage());
}

A partir dels fitxers d'exemple, incorpora les següents funcionalitats: Demani el nom. No ha de permetre la connexió si el nom no està introduït. Si la connexió està establerta, que no permeti modificar el nom.

Que enviï el nom al servidor (juntament amb el missatge, en format JSON).

Que mostri en pantalla tant els missatges enviats com els rebuts (en un div addicional), amb el nom del remitent. Interessant marcar de forma diferent els missatges propis (per exemple, alineats a la dreta).

En aquesta primera fase, farem que el client entri al servidor i es pugui connectar a una partida o crear-ne una de nova.

Et connectes al servidor. El servidor et respon amb un json de la forma {connexio:’ok’} o {connexio:’ko’}
Li pases el teu nom d’usuari. {nom:’Pepito’}
El servidor t’informa de les partides en curs. {partides:[{id:1,usuari:’Ramon’,convidat:null,creada:’yyyy-mm-dd hh:mm:ss’, estat:0,1,2 (0: manca jugador, 1, s’està jugant, 2. acabada)},{id:2,usuari:’Laura’,creada:’yyyy-mm-dd hh:mm:ss’, estat:1},usuaris:[{nom:’Ramon’},{nom:’Pepito’}]
Pots optar per crear una nova partida o connectar-te a una existent {accio:’nova partida’} o {accio:’connectar a partida’, id:2}
Si hem fet ‘nova partida’, el servidor ens retorna el llistat de partides, amb la nostra incorporada.

Prenent com a referència el codi treballat en l'activitat 1, implementa la comunicació entre el servidor i els clients segons les especificacions anteriors.