readme

README.md

@@ -32,6 +32,45 @@ If you open another tab and navigate to `localhost:3000/destination`, there you
 
 The app is meant to be open-end, meaning that the destination of the drawing is up to you! (ah ah! less work for us). Originally it was coupled with [vvvv](https://visualprogramming.net/), but it can be implemented with any platform supporting the websocket protocol.
 
+## How does it work
+
+![A websocket connection is like ping pong](/img/pingpong.jpg)
+
+This app works like the game of ping pong. Two (or more) atlethic players connect to a server to exchange messages through the fast ball of [Websocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).
+
+There are four main elements in this app:
+
+**Source**
+
+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.
+
+**Destination**
+
+A destination is a client that connects to the application in order to receive drawings.
+To connect as a destination, greet the server with an hello message:
+
+`{"type": "hello"}`
+
+**Websocket Messages**
+
+Websockets are a type of connection especially suited to real time application.
+Here they are small `JSON` messages of different types. Imagine it as small Javascript objects or Python dictionaries
+
+```
+{
+    "type": "test",
+    "data": "hello this is a test message!"
+}
+
+```
+
+Here they always come with a `type` property, that is used in both server and clients to trigger specific functions depending on it.
+
+**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 code!
+
 ## Going online
 
 Eventually you want to put online your drawing app.