SAE401D

Pour cette SAE en groupe, nous avions à réaliser un site web sur l'écologie. Nous avons choisis de partir sur un quizz en ligne à plusieurs. Pour sensibiliser les gens à l'écologie et les informer sur les gestes à adopter pour protéger notre planète.

Pour cela nous avons utilisé le framework Vue.js pour réaliser le site web. Et nous avons du apprendre à utiliser du RLS (Real Time Server) pour faire fonctionner le quizz en ligne en temps réel en utilisant la technologie Socket.io.

Quizz en ligne

Pour ce qui est du RLS avec Emilien nous avons mis en place un serveur Express avec Socket.io qui gérait les connexions des utilisateurs et les réponses en temps réel. Nous avons aussi mis en place un système de score pour les utilisateurs.

Conclusion

Ce project était très intéressant car il m'a permis de découvrir le framework Socket.io et de mettre un premier pas dans les websockets. De plus le projet m'a permis d'apprendre à gérer plusieurs systèmes pour qu'ils fonctionnent ensemble en gérant les erreurs CORS et les problèmes de connexion.

Code permettant de crée un utilisateur et une salle de jeu

const axios = require('axios');
const {json} = require("express");
const fs = require('fs');
const path = require('path');

    class Game {
        constructor() {
            this.rooms = [];
            this.players = [];
        }

        createUser() {
            let user = {};

            function generateToken(length) {
                let token = '';
                const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_.-';
                const charactersLength = characters.length;
                for (let i = 0; i < length; i++) {
                    token += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                return token;
            }


            let name = `guest${Math.floor(Math.random() * 1000)}`;

            return user = {
                name: name,
                token: generateToken(30)
            }
        }

        createRoom(roomName, username, privacy) {
            let roomID = Math.random().toString(36).substr(2, 9)

            let room = {
                id: roomID,
                name: roomName,
                creator: {name: username.name, token: username.token},
                players: [],
                points: [],
                privacy: privacy,
                currentQuestion: null,
                playing: false,
                theme: null,
                allQuestions: [],
            }

            console.log(room)

            if (this.rooms.find(y => y.creator.token === username.token)) {
                return {type: 'error', error: 'you already have a room'}
            } else {
                this.rooms.push(room);
                return {type: 'message', message: 'congrat, room created', room: room};
            }
        }
    }

Code permettant de se connecter au websocket

import { io } from 'socket.io-client';

const socket = io('http://141.94.207.83:3000');

export default socket;