@ -45,6 +45,9 @@ There are four main elements in this app:
A source is a client that connects to the application in order to send drawings.
To connect as a source simply connect to the server.
This is what happens when you visit the [drawing page](https://hub.xpub.nl/soupboat/drw/).
For an example, look at the script section in the `views/index.html` file in the folder.
**Destination**
A destination is a client that connects to the application in order to receive drawings.
@ -52,6 +55,8 @@ To connect as a destination, greet the server with an hello message:
`{"type": "hello"}`
This is what happens when you visit the [destination page](https://hub.xpub.nl/soupboat/drw/destination). For an example of the code, look at the script section in the `view/destination.html` section. Right after opening the websocket connection, the script will send a greeting to the server.
**Websocket Messages**
Websockets are a type of connection especially suited to real time application.
@ -67,6 +72,26 @@ Here they are small `JSON` messages of different types. Imagine it as small Java
Here they always come with a `type` property, that is used in both server and clients to trigger specific functions depending on it.
At the moment the app logic is built on these messages:
- **hello**
register the client as a destination
_example:_
`{"type": "hello"}`
- **drawings**
message that contains [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) of a drawing
_example:_
`{"type": "drawings", "paths": "M 10 10 H 90 V 90 H 10 L 10 10"}`
- **theme**
message that suggests to the player a theme to draw about
_example:_
`{"type": "theme", "theme": "animals"}`
**Server**
The server is the table that grants to the connected clients to exchange messages. It mainly takes care of keeping track of who is connected, and to send the right message to the right client. For an insight of how does it work look at the comments in the `server.js` file!
