mediacomem / comem-archioweb-tictactoe

An exercise to implement a real-time tic-tac-toe with WebSockets or the Web Application Messaging Protocol (WAMP).

Web-Oriented Architecture Tic-Tac-Toe Exercise

This is an exercise for the COMEM+ Web-Oriented Architecture Course.

• Exercise
  • Requirements
  • The goal
  • Getting started
  • Implement real-time communications
• Resources
• Contributing

The exercise assumes you are familiar with the following subjects of the course:

• WebSockets
• Web Application Messaging Protocol (WAMP)

Exercise

Requirements

• Node.js 12.x

The goal

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.

Getting started

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.

Implement real-time communications

Follow one of these guides:

• Implement communications with WebSockets
• Implement communication with the Web Application Messaging Protocol (WAMP)

Resources

• Demo of the WebSockets implementation
• Source code documentation

Contributing

See CONTRIBUTING.md.