This is an exercise for the COMEM+ Web-Oriented Architecture Course.
The exercise assumes you are familiar with the following subjects of the course:
- Node.js 12.x
The purpose of this exercise is to implement real-time communication in a small web game, either with WebSockets or the Web Application Messaging Protocol (WAMP).
This repository contains a partially implemented tic-tac-toe web application:
- The
app/backend
directory contains an Express.js application that can register players and manage multiple games. - The
app/frontend
directory contains a jQuery application that can display a list of available tic-tac-toe games, as well as the game interface. - The
app/class
directory contains domain classes used by both previous components.
The game logic is fully implemented, but there is no communication between backend and frontend. The code has been structured so that there are only 2 files that need to be modified to make the application functional:
- The
app/backend/dispatcher.js
file handles the backend's communications with the frontend clients. - The
app/frontend/dispatcher.js
file handles the frontend client's communications with the backend.
Use one of the two suggested technologies to make the game functional.
Clone this repository:
$> git clone https://github.com/MediaComem/comem-archioweb-tictactoe
Move into the repository and install dependencies:
$> cd comem-archioweb-tictactoe
$> npm ci
Run the following command to launch both the backend and frontend in development mode (code will re-compile automatically when you change files, although you will still have to refresh your browser window):
$> npm run start:watch
Visit http://localhost:3000 to view the application. Of course, the game will not be functional since it is missing any kind of communication between backend and frontend.
If port 3000 is already taken, you may change it with the
$PORT
environment variable when running the command:PORT=4000 npm run start:watch
.
Follow one of these guides:
- Implement communications with WebSockets
- Implement communication with the Web Application Messaging Protocol (WAMP)
See CONTRIBUTING.md.