3. Comunicació - maarcnavarro9/WorldAnimals GitHub Wiki
1. HTTP
A nivell d’HTTP, l’aplicació serveix fitxers estàtics com ara l’estructura HTML, els estils CSS, els vídeos en diferents formats, les imatges i els scripts JavaScript necessaris per al funcionament de la pàgina. També es carrega la API de Google Maps mitjançant peticions HTTP externes. Aquestes comunicacions HTTP s’utilitzen principalment per a la càrrega inicial de recursos, mentre que la interacció en temps real es gestiona mitjançant WebSockets i WebRTC.
const server = http.createServer(app);
app.use(express.static('public'))
2. WebSockets
S’ha implementat un xat global mitjançant websockets per permetre la comunicació en temps real entre tots els usuaris connectats. Gràcies a aquesta tecnologia, els missatges s’envien i es reben de manera instantània sense necessitat de recarregar la pàgina. El xat està pensat per compartir informació o comentaris generals, visibles per tothom dins de l’aplicació. A més, s’han afegit detalls visuals com la diferenciació entre missatges enviats i rebuts, així com missatges del sistema per mantenir informats els usuaris sobre esdeveniments rellevants (com connexions, desconnexions o usuaris actius). Per a la implementació d’aquest xat en temps real, s’ha utilitzat Socket.IO, facilitant així la gestió bidireccional de la comunicació entre client i servidor.
D’altra banda, també s’ha implementat un control remot del vídeo a la següent ruta: /html/remote-playback.html. Aquest permet a l’usuari controlar la reproducció del vídeo a distància amb funcionalitats com pausar/reproduir el vídeo, avançar o retrocedir 10 segons, activar o desactivar el so, ajustar el volum, canviar la qualitat del vídeo, i canviar entre dos vídeos diferents (vídeo 1 i vídeo 2) per oferir una experiència interactiva i flexible.
socket.on('video-control', (data) => {
switch (data.action) {
case 'play': video.play(); break;
case 'pause': video.pause(); break;
case 'volume': video.volume = data.value; break;
case 'selectVideo': currentVideo = data.video;
updateVideo();
break;
case 'updateQuality': qualitySelector.value = data.quality;
updateVideo();
break;
case 'muteVideo': video.muted = data.mute;
break;
case 'setVideoTime': if (data.direction == 'forward') {
forward10Seconds();
} else {
backward10Seconds();
} break;
}
});
3. WebRTC
S'utilitza per establir connexions peer-to-peer (P2P) segures i amb baixa latència entre usuaris. A través dels data channels de WebRTC, es facilita l'intercanvi directe de missatges de text sense passar per servidors intermedis, millorant l'eficiència i la privadesa en un dels chats de l'aplicació.
L’usuari pot seleccionar a qui vol enviar una sol·licitud de missatge. Quan l’altre usuari la rep, pot acceptar-la o rebutjar-la. En cas que sigui acceptada, s’estableix la connexió. Un cop finalitzada la conversa, qualsevol dels dos usuaris pot desconnectar-se i iniciar noves converses amb altres usuaris.
Per l'IceConfig es fa servir el servidor STUN de google: stun:stun.l.google.com:19302
Com a opció de backup, hem creat un servidor TURN gratuït a través de la web https://www.expressturn.com, ja que l’anterior sol donar problemes. No s'ha pujat al repositori per evitar exposar les credencials.
Algunes parts del codi estan inspirades i reutilitzen fragments del repositori https://github.com/antoni-oliver/gdie.
4. IA online
S’ha implementat un chatbot impulsat per intel·ligència artificial perquè els usuaris puguin resoldre qualsevol dubte. Està pensat principalment per respondre preguntes relacionades amb els animals que apareixen als vídeos, però en fer ús del model d’IA allotjat al servidor de la universitat (Ollama), també pot respondre altres tipus de qüestions. A més, s’ha afegit una animació de càrrega, un efecte d’escriptura progressiva en la presentació dels missatges i un botó per aturar la resposta si cal.
socket.on('message-ltim', async data => {
const text = data.text;
const id = ++count;
const response = await fetch("http://ia-ltim.uib.es/api/ollama/generate", {
method: 'post',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'model': 'qwen2.5:32b',
'prompt': data.text,
'stream': false
})
});
const json = await response.json();
json.id = id;
socket.emit('message', json);
});
Algunes parts del codi estan inspirades i reutilitzen fragments del repositori https://github.com/antoni-oliver/gdie.