bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • flask_basic • jocs_libgdx • opendata_pandas • python_venv • passwords_gnu_linux • nodejs_selenium • vagrant_bind9 • java • python_web • hibernate
libgdx_comunicacions

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
libgdx_comunicacions [2023/04/18 00:42]
enric_mieza_sanchez [Servidor WebSockets en NodeJS] 		libgdx_comunicacions [2025/03/18 23:13] (actual)
enric_mieza_sanchez [Exercicis]
Línia 2: Línia 2:
  
 Aquest article ve de [[jocs libGDX]] on implementem jocs multiplataforma. Aquest article ve de [[jocs libGDX]] on implementem jocs multiplataforma.
 +
 +libGDX es programa en Java, per tant podriem emprar les llibreries estàndard de comunicació HTTP o WebSockets. Però si utilitzem les pròpies de liBGDX ens facilitarà el codi, ja que ens estalviarem la gestió dels //threads// de comunicació necessaris a [[Android]] explicats a [[Android Threads]].
  
 Llibreries de comunicacions: Llibreries de comunicacions:
Línia 11: Línia 13:
 \\ \\
  
 +===== Crides HTTP estàndard =====
 +
 +Les realitzem mitjançant la [[https://libgdx.com/wiki/networking|llibreria Networking de libGDX]] que ja ve integrada al propi //framework//.
 +
 +==== Exercicis ====
 +
 +<WRAP todo>
 +Fes un [[https://stackoverflow.com/questions/33062574/how-to-properly-implement-a-dialog-box-using-libgdx|projecte libGDX amb Dialog com el de l'exemple]].
 +
 +Implementa una crida HTTP a alguna web quan premem un botó del Dialog.
 +
 +</WRAP>
 +
 +
 +
 +\\
  
 ===== WebSockets ===== ===== WebSockets =====
Línia 25: Línia 43:
  
 --> Arxius de configuració (Gradle, etc.)# --> Arxius de configuració (Gradle, etc.)#
-Afegiu les següent línies a les seccions adequades:+ 
 +Per tal que funcionin les comunicacions en Android cal activar els permisos adequats: 
 + 
 +<file xml AndroidManifest.xml> 
 +    <uses-permission android:name="android.permission.INTERNET" /> 
 +    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
 +</file> 
 + 
 +Si volem compilar versió HTML: 
 + 
 +<file xml GdxDefinition.gwt.xml> 
 +  <inherits name='com.github.czyzby.websocket.GdxWebSocketGwt' /> 
 +  <inherits name='com.github.czyzby.websocket.GdxWebSocket' /> 
 +</file> 
 + 
 +I el més important, configurar els diferents ''build.gradle'' dins de cada plataforma: 
 + 
 +General:
 <file gradle build.gradle> <file gradle build.gradle>
 allprojects { allprojects {
Línia 35: Línia 70:
     }     }
 } }
 +</file>
  
-project(":desktop") { +<WRAP tip> 
-    dependencies { +ULL: als segúents només cal afegir la línia del repo de ''com.github.MrStahlfelge'', la resta ja hi haurien de ser, es posen aquí per oreintació d'on cal inserir-los. 
-        api "com.github.MrStahlfelge.gdx-websockets:common:$wsVersion" +</WRAP>
-    } +
-}+
  
-project(":android") { +Core: 
-    dependencies { +<file gradle core/build.gradle> 
-        api "com.github.MrStahlfelge.gdx-websockets:common:$wsVersion" +dependencies { 
-    }+  api "com.badlogicgames.gdx:gdx:$gdxVersion" 
 +  implementation "com.github.MrStahlfelge.gdx-websockets:core:$wsVersion" 
 +   
 +  // ...
 } }
 +</file>
  
-project(":html") { +Android: 
-    dependencies { +<file gradle android/build.gradle> 
-        api "com.github.MrStahlfelge.gdx-websockets:core:$wsVersion:sources" +dependencies { 
-        api "com.github.MrStahlfelge.gdx-websockets:html:$wsVersion" +  // ... 
-        api "com.github.MrStahlfelge.gdx-websockets:html:$wsVersion:sources" +  implementation "com.badlogicgames.gdx:gdx-backend-android:$gdxVersion" 
-    } +  implementation "com.github.MrStahlfelge.gdx-websockets:common:$wsVersion" 
-}+  implementation project(':core')
  
-project(":core") { +  // ...
-    dependencies { +
-        api "com.github.MrStahlfelge.gdx-websockets:core:$wsVersion" +
-    }+
 } }
 </file> </file>
  
-<file xml GdxDefinition.gwt.xml> +Desktop (Lwjgl3): 
-  <inherits name='com.github.czyzby.websocket.GdxWebSocketGwt' /> +<file gradle lwjgl3/build.gradle> 
-  <inherits name='com.github.czyzby.websocket.GdxWebSocket' />+dependencies { 
 +  implementation "com.badlogicgames.gdx:gdx-backend-lwjgl3:$gdxVersion" 
 +  implementation "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-desktop" 
 +  implementation "com.github.MrStahlfelge.gdx-websockets:common:$wsVersion" 
 +  implementation project(':core') 
 +   
 +  // ...
 </file> </file>
  
-Recordeu també que per tal que funcionin les comunicacions en Android cal activar els permisos adequats:+HTML: 
 +<file gradle html/build.gradle> 
 +dependencies { 
 +  // ... 
 +  implementation "com.badlogicgames.gdx:gdx:$gdxVersion:sources" 
 +  implementation "com.github.MrStahlfelge.gdx-websockets:core:$wsVersion:sources" 
 +  implementation "com.github.MrStahlfelge.gdx-websockets:html:$wsVersion" 
 +  implementation "com.github.MrStahlfelge.gdx-websockets:html:$wsVersion:sources"
  
-<file xml AndroidManifest.xml> +  implementation project(':core') 
-    <uses-permission android:name="android.permission.INTERNET" /> + 
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />+  // ... 
 +}
 </file> </file>
 +
 <-- <--
 +
 +També cal que inicialitzem els WebSockets als arxius ''AndroidLauncher'', ''iOSLauncher'' i ''DesktopLauncher'', just abans de la creació del Launcher:
 +    CommonWebSockets.initiate();
  
 \\ \\
Línia 82: Línia 135:
   * Podem enviar des de qualsevol part del codi inclús des del ''render'' tot i que convé no abusar.   * Podem enviar des de qualsevol part del codi inclús des del ''render'' tot i que convé no abusar.
   * Per rebre dades del servidor ho fem mitjançant l'objecte ''WebSocketListener''.   * Per rebre dades del servidor ho fem mitjançant l'objecte ''WebSocketListener''.
 +
 +<WRAP important>
 +El protocol WebSockets <nowiki>(ws://)</nowiki> funciona sobre HTTP. Si estem treballant en producció sobre HTTPS, el protocol és SecureWebSockets <nowiki>(wss://)</nowiki>. El codi aquí indicat serà una mica diferent, caldrà instanciar ''WebSockets.toSecureWebSocketUrl'' enlloc de ''WebSockets.toWebSocketUrl''.
 +
 +La variable ''address'' ha de ser el nom del servidor (no val la IP !), sense prefix, port 443 i emprant la crida que s'explica a continuació.
 +
 +<code java>
 +socket = WebSockets.newSocket(WebSockets.toSecureWebSocketUrl(address, port));
 +</code>
 +
 +</WRAP>
  
 <file java GameScreen.java> <file java GameScreen.java>
 +import com.github.czyzby.websocket.WebSocketListener;
 +import com.github.czyzby.websocket.WebSocket;
 +
 class GameScreen extends Screen { class GameScreen extends Screen {
     WebSocket socket;     WebSocket socket;
Línia 95: Línia 162:
             address = "10.0.2.2";             address = "10.0.2.2";
         socket = WebSockets.newSocket(WebSockets.toWebSocketUrl(address, port));         socket = WebSockets.newSocket(WebSockets.toWebSocketUrl(address, port));
 +        // ULL: si és a traves de HTTPS , el protocol seria wss enlloc de ws
 +        //socket = WebSockets.newSocket(WebSockets.toSecureWebSocketUrl(address, port));
         socket.setSendGracefully(false);         socket.setSendGracefully(false);
         socket.addListener((WebSocketListener) new MyWSListener());         socket.addListener((WebSocketListener) new MyWSListener());
Línia 129: Línia 198:
         @Override         @Override
         public boolean onMessage(WebSocket webSocket, String packet) {         public boolean onMessage(WebSocket webSocket, String packet) {
-            System.out.println("Message:");+            System.out.println("Message:"+packet);
             return false;             return false;
         }         }
Línia 135: Línia 204:
         @Override         @Override
         public boolean onMessage(WebSocket webSocket, byte[] packet) {         public boolean onMessage(WebSocket webSocket, byte[] packet) {
-            System.out.println("Message:");+            System.out.println("Message:"+packet);
             return false;             return false;
         }         }
Línia 153: Línia 222:
  
 Podem emprar la [[https://www.npmjs.com/package/ws|llibreria WS per a NodeJS]]. Podem emprar la [[https://www.npmjs.com/package/ws|llibreria WS per a NodeJS]].
-   
---> Servidor HTTP + WebSockets amb NodeJS# 
  
 Ens caldrà crear un projecte NodeJS i instal·lar les llibreries: Ens caldrà crear un projecte NodeJS i instal·lar les llibreries:
Línia 160: Línia 227:
   $ cd ws1   $ cd ws1
   $ npm init   $ npm init
-  $ npm install http ws+  $ npm install http ws express uuid
  
 Afegeix ''index.js'' i posa'l en marxa: Afegeix ''index.js'' i posa'l en marxa:
   $ node index.js   $ node index.js
  
-Cal indicar el projecte com a "module": + 
-<file javascript package.json> +--> Exemple 1: WebSockets simple#
-{ +
-  "name": "ws1", +
-  "type": "module", +
-  ... +
-} +
-</file>+
  
 <file javascript index.js> <file javascript index.js>
-import { createServer } from 'http'; +const { createServer } = require('http'); 
-import { WebSocketServer } from 'ws';+const { WebSocketServer } = require('ws');
  
 const server = createServer(); const server = createServer();
Línia 201: Línia 262:
 }); });
  
 +</file>
 +<--
 +
 +
 +
 +-->Exemple 2: WebSockets + HTTP#
 +
 +<file javascript index,js>
 +const express = require('express')
 +const http = require('http');
 +const WebSocket = require('ws')
 +
 +const app = express()
 +const httpServer = http.createServer(app);
 +const wss = new WebSocket.Server({ server: httpServer })
 +
 +const { v4: uuidv4 } = require('uuid')
 +const port = 8888
 +var clients = {}
 +
 +// HTTP ROUTES
 +app.use(express.static('public'))
 +app.get('/',root);
 +
 +
 +// WS client connections
 +wss.on('connection', function connection(ws) {
 +  var userid = uuidv4();
 +  console.log('Nova connexió: '+userid);
 +  clients[userid] = { "id":userid, "ws":ws, pos:{} };
 +  ws.send("Benvingut id="+userid);
 +  // TODO: crear totems i actualitzar
 +
 +  ws.on('close', function close() {
 +    delete clients[userid];
 +    // TODO: esborrar totems?
 +  })
 +
 +  ws.on('error', console.error);
 +
 +  ws.on('message', function message(data) {
 +    try {
 +      // exemple per descoficar JSON
 +      var posData = JSON.parse(data);
 +      posData.id = userid;
 +      console.log('Pos data: %s', JSON.stringify(posData));
 +      // retransmetem posició a tothom
 +      broadcast(JSON.stringify(posData));
 +    } catch (e) {
 +      console.log("ERROR descodificant pos: "+e)
 +    }
 +  });
 +
 +});
 +
 +
 +// SERVER START
 +httpServer.listen(port, appListen)
 +function appListen () {
 + console.log(`Example app listening on: http://localhost:${port}`)
 +}
 +
 +// HTTP
 +/////////////////////////////////
 +async function root(req,res) {
 +    res.send("IETI Game WebSocket Server");
 +}
 +
 +
 +// WS : Web Sockets
 +/////////////////////////////////
 +async function broadcast (obj) {
 +  for( var id in clients ) {
 +    var client = clients[id];
 +    //if (client.readyState === WebSocket.OPEN) {
 +      var messageAsString = JSON.stringify(obj)
 +      client.ws.send(obj);
 +    //}
 +  }
 +}
 </file> </file>
 <-- <--
Línia 206: Línia 347:
 \\ \\
  
-===== Exercicis =====+==== Exercicis ==== 
 +<WRAP todo> 
 +**Servidor i app de prova en local** 
 + 
 +Implementa el servidor NodeJS de l'exemple. 
 + 
 +Fes una aplicació libGDX que connecti amb el servidor i envii la posició on fas un //touch// en la pantalla. Per no saturar de missatges repetitius (i innecessaris), no enviïs la posició si aquesta no ha canviat respecte del ''render'' previ. 
 +</WRAP> 
 + 
 +<WRAP todo> 
 +**Servidor WebSockets en producció** 
 + 
 +Implementa el servidor NodeJS al teu servidor públic (Proxmox). 
 + 
 +Ajusta l'aplicació perquè es pugui connectar al servidor públic. Observa la línia de connexió on s'explica com canviar de protocol ''ws:'' (Web Socket estàndard) al ''wss:'' (Web Socket Secure, sobre SSL, el seu equivalent del HTTPS). 
 + 
 +Pots mirar de posar en producciò el servidor NodeJS amb el [[https://www.npmjs.com/package/pm2|gestor de processos PM2 per a NodeJS]]. Tingues en compte que per posar en producció als ports públics com 80 o 443 et caldrà realitzar les operacions com a usuari ''root''. 
 +</WRAP> 
 <WRAP todo> <WRAP todo>
-Implementa el servidor NodeJS indicat.+**Incorporant websockets a un joc**
  
-Afegeix la llibreria de WebSockets al teu joc libGDX i fes que envii la posició del nostre personatge 1 cop per segon.+Afegeix la llibreria de WebSockets al teu joc libGDX i fes que envii la posició del personatge 1 cop per segon.
  
 Assegura't que funciona comprovant que el servidor mostra el missatge de posicionament del personatge a la seva consola. Assegura't que funciona comprovant que el servidor mostra el missatge de posicionament del personatge a la seva consola.
libgdx_comunicacions.1681778544.txt.gz · Darrera modificació: 2023/04/18 00:42 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki