From 750de203a2f088e370246af95ccf07588ddfd2c6 Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" Date: Thu, 23 Feb 2023 18:08:45 +0100 Subject: [PATCH] workshop script --- projects/ws-js-ws/.ws-js-ws.md.swn | Bin 0 -> 16384 bytes projects/ws-js-ws/.ws-js-ws.md.swo | Bin 0 -> 12288 bytes projects/ws-js-ws/ws-js-ws.md | 83 +++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 projects/ws-js-ws/.ws-js-ws.md.swn create mode 100644 projects/ws-js-ws/.ws-js-ws.md.swo 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 0000000000000000000000000000000000000000..457591c3dff415c6c3b71f3ee0953281ccd80207 GIT binary patch literal 16384 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..e4a1cc1295f7a78caf2ab6905719647cc8a1fd85 GIT binary patch literal 12288 zcmeI2O>7%Q6vwBig|^UAwF0#up_fD|iIlY+Cu)M#7WD(vRxOQi(om{W#=B#C>rzzvQZxB%kB1rQPv{Abrr0yMNoKx65b-JN|q zGw(m|y>aAiRL&efMKh%;!)FI$_dfTF|HFPaaM z*6rWja0)mD)=?lcO>bt~{A6{aVl767hiKQ%`E`t4vs1t+;1qBQI0c*nP64NYQ@|wIq-N7l~6mSYS1)Ks-0jGddz$xGqa0)mDoB~dP|DXaK zKc}C$jj@ZHF?sy{KluOuw>ug85qt~2248|};1YNioCY4a4{Qfp!4|L?e7~KsE8s2g zCU^t93|;~pJPBUi#@J=>1lR+1gH2!~_~s7AJ_VnE_rZJMU0}dj@ayf2eGWbY?|`?# zi{KgHg9bPY9s?ubi> zHP~JSTfk=UVc)igV-pB)7~Bu`f_uOoup4{@tv>*d0}qUYyTM)H_gfkJ4txwg0@uJ* z;66?Pr+`zyDR6xSJet^7o2-yWbE-!&GsKgCQYExV3^$=nSZ-3WCi7_|c|bCW!bI5i zsaoDXco!{9TByu4F|;tJ+#c@G!mNj;vNqZZKR5+DHVn-UR|?& zREs|9Mx@l}k+w%`%cCft79NNq*~O4_E>K+xq@TruIiDYG8Rp{`V&;#Tg}@x&;JNd_X8B%Ap#s~xw|=b+>K-8;#R?Yuk& zp+`nW2%@wUkFk}`&L5__$%0Uh)0AmbGm>yt7@s|?!hrXviq`R=(Ybc0DdjCeIPyqK zQop`&$M2VeFMRF4Z211)K$rt!0MqOh)md7oE zHXtqIRjo>l%|SZN*R+w(6KcRF)M>J0JAHN@{P%-99Sju(NV zsT*P~<18{Eq8X!R3XhFb!{(4(yp>yPrm5|GWWJK*%Ot^znpQK^(ce{#1)?QO@@h~(j+!WR#%(+D6~D=him}n z$(L6RSDyYA<%ya~#?RcP6mKl& z29ezohNzx!zk`UtBfdnT5J)D3D`LrBDG>}2djv71#8N0TO`Sw`BN3o7CL$0bD6%Y% z)MIm}PNGO3sn_xMM7`+9wC`aUcghb8=VoQwfF#Z@h-X+u zo8@t4FyTRoK)y21^Oy-uBx=;vw1}B#rlYK7FN>GZ88+e?4K|$X?aB<*z*k{vU8&K+ zz>8Ja?KgzA3((&VS%8(PAt1|@YPnjePBI_mNnPL(1`LA^^#m%mU6?$^tjM_mqOGvB jlU&qYU0O_A(1pmOg?j(w#NY(;VOV9+k}4FsmV5jMPdIe& literal 0 HcmV?d00001 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)