Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mediacomem/comem-archioweb-tictactoe
An exercise to implement a real-time tic-tac-toe with WebSockets or the Web Application Messaging Protocol (WAMP).
https://github.com/mediacomem/comem-archioweb-tictactoe
exercise real-time wamp wamp-protocol websocket ws
Last synced: about 11 hours ago
JSON representation
An exercise to implement a real-time tic-tac-toe with WebSockets or the Web Application Messaging Protocol (WAMP).
- Host: GitHub
- URL: https://github.com/mediacomem/comem-archioweb-tictactoe
- Owner: MediaComem
- Created: 2019-11-03T17:01:18.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T04:24:17.000Z (almost 2 years ago)
- Last Synced: 2024-11-05T10:29:18.754Z (about 2 months ago)
- Topics: exercise, real-time, wamp, wamp-protocol, websocket, ws
- Language: JavaScript
- Homepage: https://comem-archioweb-tictactoe.herokuapp.com/
- Size: 2 MB
- Stars: 0
- Watchers: 4
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Web-Oriented Architecture Tic-Tac-Toe Exercise
This is an exercise for the [COMEM+ Web-Oriented Architecture Course][course].
- [Exercise](#exercise)
- [Requirements](#requirements)
- [The goal](#the-goal)
- [Getting started](#getting-started)
- [Implement real-time communications](#implement-real-time-communications)
- [Resources](#resources)
- [Contributing](#contributing)
The exercise assumes you are familiar with the following subjects of the course:
* [WebSockets][ws-subject]
* [Web Application Messaging Protocol (WAMP)][wamp-subject]
## Exercise
### Requirements
* [Node.js][node] 12.x
### The goal
The purpose of this exercise is to implement real-time communication in a small
web game, either with [WebSockets][ws] or the [Web Application Messaging
Protocol (WAMP)][wamp].
This repository contains a partially implemented [tic-tac-toe][tictactoe] web
application:
* The `app/backend` directory contains an [Express.js][express] application that
can register players and manage multiple games.
* The `app/frontend` directory contains a [jQuery][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:
```bash
$> git clone https://github.com/MediaComem/comem-archioweb-tictactoe
```
Move into the repository and install dependencies:
```bash
$> 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**):
```bash
$> 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](WS.md)
* [Implement communication with the Web Application Messaging Protocol (WAMP)](WAMP.md)
## Resources
* [Demo of the WebSockets implementation][demo]
* [Source code documentation][docs]
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).
[course]: https://github.com/MediaComem/comem-archioweb
[demo]: https://comem-archioweb-tictactoe.herokuapp.com/
[docs]: https://mediacomem.github.io/comem-archioweb-tictactoe/
[express]: https://expressjs.com
[jquery]: https://jquery.com
[node]: https://nodejs.org
[tictactoe]: https://en.wikipedia.org/wiki/Tic-tac-toe
[wamp]: https://wamp-proto.org
[wamp-subject]: https://mediacomem.github.io/comem-archioweb/2019-2020/subjects/wamp/?home=MediaComem%2Fcomem-archioweb%23readme#1
[ws]: https://en.wikipedia.org/wiki/WebSocket
[ws-subject]: https://mediacomem.github.io/comem-archioweb/2019-2020/subjects/ws/?home=MediaComem%2Fcomem-archioweb%23readme#1