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 08:00]
manuel_jose_moles_canal [Video-joc UF4 M7]
+++ websockets_php [2023/07/05 18:35] (actual)
enric_mieza_sanchez no sortien els títols
@@ Línia 2: / Línia 2: @@
 =====Joc online. Apunts.=====
 ====Video-joc UF4 M7====
 Ho anirem fent per activitats (etapes) incrementals, que aniran incorporant diferents funcionalitats.
@@ Línia 17: / Línia 18: @@
 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
+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