Tic Tac Toe
Umsetzung als Online Mulitplayer Anwendung
Mit diesem Projekt wollte ich tiefer in die Welt der Echtzeit-Kommunikation eintauchen. Dafür habe ich ein multiplayerfähiges Tic-Tac-Toe-Spiel entwickelt, bestehend aus einem TypeScript-Backend, einem Vue.js-Frontend und einer WebSocket-basierten Kommunikation zwischen den Clients.
Die größte Herausforderung bestand für mich darin, den Aufbau der Kommunikation zu entwickeln, um Spielzüge, Statusänderungen und Verbindungsabbrüche zuverlässig in Echtzeit zu verarbeiten.
Projektablauf
Kommunikationslogik
Um den Datenaustausch zwischen Client und Server zu strukturieren, habe ich ein eigenes Kommunikationsprotokoll entworfen. Dieses definiert Aufbau und Inhalt aller Nachrichten und bildet die Grundlage für die Kommunikation zwischen Backend und Frontend.
Während der Entwicklung wurde das Protokoll kontinuierlich erweitert und an neue Anforderungen angepasst. Es hat mir geholfen, den Überblick über die verschiedenen Nachrichtenflüsse und Zustände innerhalb der Anwendung zu behalten.
Implementierung
- Aufbau eines grundlegenden WebSocket-Servers sowie eines ersten Frontend-Prototyps
- Entwicklung und Integration des Kommunikationsprotokolls
- Implementierung der Spiellogik und des Session-Managements
- Gestaltung und Umsetzung der Benutzeroberfläche mit Vue.js
- Deployment auf einem bei Hetzner gehosteten Server mittels Docker und Nginx
Herausforderungen und Learnings
Da ich sowohl Vue.js als auch WebSockets in diesem Projekt zum ersten Mal eingesetzt habe, stand zunächst die Einarbeitung in beide Technologien im Vordergrund.
Meine bisherigen Erfahrungen mit React haben mir den Einstieg in Vue erleichtert. Gleichzeitig habe ich durch die Arbeit mit WebSockets ein besseres Verständnis für ereignisbasierte Kommunikation und Zustandsverwaltung in Echtzeit-Anwendungen entwickelt.
Besonders hilfreich war dabei das Kommunikationsprotokoll. Mit zunehmender Komplexität des Projekts wurde es zu einem wichtigen Werkzeug, um Nachrichtenflüsse nachzuvollziehen und neue Features kontrolliert zu integrieren.
Während der Entwicklung habe ich intensiv mit Logging und Debugging gearbeitet, um sicherzustellen, dass Nachrichten korrekt versendet, verarbeitet und gespeichert werden.
Verbesserungsmöglichkeiten
In diesem Projekt sind bereits weitere Ideen und TODOs direkt im Code dokumentiert.
Ein aktueller Schwerpunkt wäre die Verbesserung des Benachrichtigungssystems. Während zentrale Aktionen wie Spieleinladungen bereits über Modalfenster dargestellt werden, werden bestimmte Ereignisse – beispielsweise wenn ein Gegner das Spiel verlässt – aktuell noch nicht explizit kommuniziert. Hier möchte ich zukünftig zusätzliche Benachrichtigungen integrieren, um die Nutzerführung zu verbessern.
Außerdem würde ich die Verantwortlichkeiten zwischen Frontend und Backend künftig stärker trennen. Derzeit verarbeitet das Frontend noch einige Zwischenzustände selbst. Langfristig halte ich es für sinnvoll, mehr Logik in das Backend zu verlagern und das Frontend primär auf die Darstellung serverseitig gelieferter Zustände zu beschränken.