Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- websockets_php [2023/06/27 07:54]
manuel_jose_moles_canal ↷ Page name changed from websockets_php.cat to websockets_php
+++ websockets_php [2023/07/05 18:35] (actual)
enric_mieza_sanchez no sortien els títols
@@ Línia 1: / Línia 1: @@
 ====== Pràctica. Creació d'un laberint amb WebSockets i PHP ======
-En construcció
+=====Joc online. Apunts.=====
+====Video-joc UF4 M7====
+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.
+======Act1. Exemple Websockets.======
+=====Exemple: sala de xat amb websockets===
+Partim de l'exemple recollit en la següent pàgina web:
+[[https://www.natapuntes.es/websockets-con-php-javascript/|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.
+<WRAP tip>
+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.
+</WRAP>
+<WRAP todo>
+De la pàgina anterior, implementa l'exemple proposat i fes-lo funcionar.
+</WRAP>
+A continuació, tens un exemple bàsic de comunicació mitjançant websockets en PHP:
+--> index.html
+<file 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>
+</file>
+<--
+--> SalaXatServer
+<file php 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());
+}
+</file>
+<--
+<WRAP todo>
+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).
+</WRAP>
+======Act-2. Laberint: Iniciant la partida======
+=====Primera fase=====
+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.
+<WRAP todo>
+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.
+</WRAP>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina