diff --git a/projects/ws-js-ws/.ws-js-ws.md.swn b/projects/ws-js-ws/.ws-js-ws.md.swn new file mode 100644 index 0000000..457591c Binary files /dev/null and b/projects/ws-js-ws/.ws-js-ws.md.swn differ diff --git a/projects/ws-js-ws/.ws-js-ws.md.swo b/projects/ws-js-ws/.ws-js-ws.md.swo new file mode 100644 index 0000000..e4a1cc1 Binary files /dev/null and b/projects/ws-js-ws/.ws-js-ws.md.swo differ diff --git a/projects/ws-js-ws/ws-js-ws.md b/projects/ws-js-ws/ws-js-ws.md index 5c5fbbc..75471ee 100644 --- a/projects/ws-js-ws/ws-js-ws.md +++ b/projects/ws-js-ws/ws-js-ws.md @@ -46,4 +46,87 @@ XPUB Studio, 4th floor etc - 16:00 - Upload online - 16:30 - Try out and presentation +## Intro + + + + +DRW is a small app for multiplayer drawing in real time. +To draw connect to --> [https://hub.xpub.nl/soupboat/drw](https://hub.xpub.nl/soupboat/drw) + +It works with multiple sources, but also multiple destinations. + +The same drawings can be displayed on different places! _(such as this page)_ + +Open [https://hub.xpub.nl/soupboat/drw/destination](https://hub.xpub.nl/soupboat/drw/destination) and send some drawings. +Try to navigate to [https://hub.xpub.nl/soupboat/drw/wander](https://hub.xpub.nl/soupboat/drw/wander) to see a different mode. + +## How does it work + +![ping pong is my passion](https://git.xpub.nl/kamo/drw/raw/branch/main/img/pingpong.jpg) + +### Websockets + +DRW is like ping pong! + +Sources and destinations send each other small messages using a protocol called [websockets](https://javascript.info/websocket). + +Once a websocket connection is open, they can communicate in both directions. +From the source to the destination and the other way around! + +Websockets are great for applications that require continous data exchange, such as chat and games. + +### DRW Architecture + +Two types of entities: +- Clients +- Server + +Every client is connected to the server, either as a source or as a destination. + +Depending on their role, clients send different kinds of messages to the server. + +The server manages the flow of websocket messages, taking care to deliver the right message to the right client. + +### Message + +In this app, a message is a simple text string. +It looks like + +``` +{"type": "test", "data": "this is my test message"} +``` + +Here the message has two properties: `type` with value _test_, and `data` with value _this is my test message_. + +Using the [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) format, the message contents can be accessed easily. + + +``` +// Transform the string message into a Javascript object +let message = JSON.parse({"type": "test", "data": "this is my test message"}) + +// Access the contents of the message +console.log(message.type) +// test + +console.log(message.data) +// this is my test message +``` + +(`console.log()` in Javascript is like `print()` in Python) + +## Installation + +Step to step process to install DRW on your machine. +Find the documentation on --> [Gitea](https://git.xpub.nl/kamo/drw#setup) + +What do you need: + +- A terminal +- [git](https://git-scm.com/downloads) +- [Node.js](https://nodejs.org/en/download/) + +For later on +- A code editor (sublime, atom, vscode, etc)