Symfony + Socket.io - Chats en temps réels

Bonjour

J'essaye actuelement de crée un chats en temps réels pour mes users en utilisants socket.io , hors j'ai mes messages qui s'insere bien en bdd mais quand je submit rien en s'affiche en temps réelles , donc je doit actualiser.

Quand je submit dans la console j'ai cela : " 2:469 POST http://127.0.0.1:8000/game/2/chat 500 (Internal Server Error) "
Mon server.js à la racine de mon projet

const io = require('socket.io')(3000, {
    cors: {
        origin: "http://127.0.0.1:8000",
        methods: ["GET", "POST"],
        allowedHeaders: ["Content-Type"],
        credentials: true
    }
});

io.on('connection', (socket) => {
    console.log('a user connected');

    socket.on('chat message', (msg) => {
        console.log('Received message:', msg);
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

La function de mon controlleur :

• J'ai bien Connected to Socket.io server dans la console
• J'ai getUsername qui m'alerte en " Undefined method 'getUsername' " alors que je l'ai biens dans mon entity.
• Meme le systeme d'erreur ne s'affcihe pas.

#[Route('/game/{id}/chat', name: 'game_chat', methods: ['POST'])]
    public function chat(Game $game, Request $request, EntityManagerInterface $em, HttpClientInterface $httpClient, LoggerInterface $logger): Response
    {
        $messageContent = $request->request->get('message');

        if (empty($messageContent)) {
            $logger->error('Message content is empty.');
            return new Response('Message content is required.', Response::HTTP_BAD_REQUEST);
        }

        $chatMessage = new Chat();
        $chatMessage->setParticipant($this->getUser());
        $chatMessage->setMessage($messageContent);
        $chatMessage->setGame($game);
        $chatMessage->setTimestamp(new \DateTime());

        $em->persist($chatMessage);
        $em->flush();

        try {
            $response = $httpClient->request('POST', 'http://localhost:3000', [
                'json' => [
                    'username' => $this->getUser()->getUsername(),
                    'message' => $messageContent,
                    'timestamp' => $chatMessage->getTimestamp()->format('d/m/Y H:i'),
                ],
            ]);

            if ($response->getStatusCode() !== 200) {
                $logger->error('Failed to send message to Socket.io server: ' . $response->getContent(false));
                throw new \Exception('Failed to send message to Socket.io server');
            }

        } catch (\Exception $e) {
            // Log l'erreur
            $logger->error('Error sending message to Socket.io server: ' . $e->getMessage());
            return new Response('Error sending message to Socket.io server: ' . $e->getMessage(), Response::HTTP_INTERNAL_SERVER_ERROR);
        }

        return new Response(null, Response::HTTP_NO_CONTENT);
    }

Et ma vue templates/game/chat.html.twig

{# DEBUT  HTML  #}

<h2>Chat de la partie</h2>
<div id="chat-messages">
    {% for chatMessage in game.getChatMessages %}
        <div>
            <strong>{{ chatMessage.getParticipant().getUsername }}</strong>:
            <p>{{ chatMessage.getMessage() }}</p>
            <small>{{ chatMessage.getTimestamp().format('d/m/Y H:i') }}</small>
        </div>
    {% endfor %}
</div>

<form id="chat-form" action="{{ path('game_chat', { 'id': game.id }) }}" method="post">
    <textarea name="message" rows="3"></textarea>
    <button type="submit">Envoyer</button>
</form>

{# fIN  HTML  #}

<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>

<script>
    const socket = io('http://localhost:3000');

    socket.on('connect', function () {
        console.log('Connected to Socket.io server');
    });

    socket.on('disconnect', function () {
        console.log('Disconnected from Socket.io server');
    });

    document.getElementById('chat-form').addEventListener('submit', function (e) {
        e.preventDefault();

        const message = this.message.value;

        fetch(this.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: new URLSearchParams(new FormData(this))
        });

        this.message.value = '';
    });

    socket.on('chat message', function (msg) {
        console.log('New message received:', msg);
        const chatMessages = document.getElementById('chat-messages');
        const messageDiv = document.createElement('div');
        messageDiv.innerHTML = `<strong>${msg.username}</strong>:<p>${msg.message}</p><small>${msg.timestamp}</small>`;
        chatMessages.appendChild(messageDiv);
    });
</script>