updates

index.html

@@ -771,7 +771,40 @@ <h1 id="week-10">Week 10</h1>
 </li>
 <li><p>A quick introduction to <a href="nodejs.html">Node.js</a></p>
 <ul>
-<li>How about a multi-user version of a sketch app? E.g. how about a multi-user Yellowtail?</li>
+<li>How to go about building a multi-user local network version of a sketch app, or Yellowtail?<ul>
+<li>Get a basic server with static serving index.html page on local network</li>
+<li>Start from our codepen at <a href="https://codepen.io/grrrwaaa/pen/vYoOLqL?editors=0110">https://codepen.io/grrrwaaa/pen/vYoOLqL?editors=0110</a> </li>
+<li>Get websockets going. </li>
+<li>What to send / receive? <ul>
+<li>E.g. from &quot;pointerup&quot;, after completing a path, share that path with the server?<ul>
+<li>JSON.stringify(path)</li>
+</ul>
+</li>
+<li>Server then shares that path with all connected clients? <code>wss.clients.forEach(other =&gt; {})</code><ul>
+<li>Don&#39;t send to self (<code>other == client</code>)? Or do?</li>
+</ul>
+</li>
+<li>Clients receiving paths add them to the state.paths? <code>state.paths.push(JSON.parse(msg.data.toString()));</code></li>
+</ul>
+</li>
+<li>Should a newly connecting client get all paths so far? How?<ul>
+<li>Send different kinds of messages by wrapping, e.g. <code>{ cmd:&quot;add&quot;, path: path }</code></li>
+</ul>
+</li>
+<li>How to tell server to delete a path?<ul>
+<li>Do we need to give unique names to our paths -- in the server?</li>
+</ul>
+</li>
+<li>Reload page and the paths restart; also different folks have different canvas resolutions... <ul>
+<li>sounds like we may need to also sync path positions?</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>How about adding sounds?<ul>
+<li>Maybe adapt from this codepen: <a href="https://codepen.io/grrrwaaa/pen/LYwqwPw?editors=0010">https://codepen.io/grrrwaaa/pen/LYwqwPw?editors=0010</a></li>
+</ul>
+</li>
 </ul>
 </li>
 <li><p><strong>For next week</strong>:</p>

index.md

@@ -714,7 +714,24 @@ Nov 14, 2023
 - **ISEA DEADLINE EXTENDED** to Nov 30 **at 10am EST**!
 
 - A quick introduction to [Node.js](nodejs.html)
-  - How about a multi-user version of a sketch app? E.g. how about a multi-user Yellowtail?
+  - How to go about building a multi-user local network version of a sketch app, or Yellowtail?
+    - Get a basic server with static serving index.html page on local network
+    - Start from our codepen at https://codepen.io/grrrwaaa/pen/vYoOLqL?editors=0110 
+    - Get websockets going. 
+    - What to send / receive? 
+      - E.g. from "pointerup", after completing a path, share that path with the server?
+        - JSON.stringify(path)
+      - Server then shares that path with all connected clients? `wss.clients.forEach(other => {})`
+        - Don't send to self (`other == client`)? Or do?
+      - Clients receiving paths add them to the state.paths? `state.paths.push(JSON.parse(msg.data.toString()));`
+    - Should a newly connecting client get all paths so far? How?
+      - Send different kinds of messages by wrapping, e.g. `{ cmd:"add", path: path }`
+    - How to tell server to delete a path?
+      - Do we need to give unique names to our paths -- in the server?
+    - Reload page and the paths restart; also different folks have different canvas resolutions... 
+      - sounds like we may need to also sync path positions?
+  - How about adding sounds?
+    - Maybe adapt from this codepen: https://codepen.io/grrrwaaa/pen/LYwqwPw?editors=0010
 
 - **For next week**:
   - Submit your [Video Tutorial](#video-tutorial)

nodejs.html

@@ -160,6 +160,8 @@ <h2 id="ws">WS</h2>
 }
 socket.onclose = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ 
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;websocket disconnected from &quot;</span>+addr); 
+    <span class="hljs-comment">// during development you might want to try reloading the page whenever the server restarts:</span>
+    location.reload();
 }</code></pre>
 <p>Assuming this hand-shaking works, we can start adding some conversational back &amp; forth. In the client, let&#39;s tell the server if our mouse is moving:</p>
 <pre><code class="language-js"><span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">&quot;pointermove&quot;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {
@@ -171,19 +173,27 @@ <h2 id="ws">WS</h2>
 });
 
 socket.onmessage = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>) </span>{
-    <span class="hljs-built_in">console</span>.log(msg.data);
+    <span class="hljs-built_in">console</span>.log(msg.data.toString());
 }</code></pre>
 <p>And, in the server, we can make a reply. Now here we have to be more careful: the server might have connections to MANY clients at once, so we need to handle it <em>inside</em> the wss.on(&#39;connection&#39;) handler:</p>
 <pre><code class="language-js">wss.on(<span class="hljs-string">&#x27;connection&#x27;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">client</span>) </span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a connection!&quot;</span>);
     <span class="hljs-comment">// all per-client code goes here now.</span>
 
     client.on(<span class="hljs-string">&#x27;message&#x27;</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =&gt;</span> {
-        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a message!&quot;</span>, msg);
+        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;I got a message!&quot;</span>, msg.toString());
 
         <span class="hljs-comment">// reply:</span>
         client.send(<span class="hljs-string">&quot;who?&quot;</span>)
     });
+
+    <span class="hljs-comment">// to send a message to *everyone else*:</span>
+    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sendAllOtherClients</span>(<span class="hljs-params">message</span>) </span>{
+      wss.clients.forEach(<span class="hljs-function"><span class="hljs-params">other</span> =&gt;</span> {
+        <span class="hljs-keyword">if</span> (client == other) <span class="hljs-keyword">return</span>;
+          other.send(message);
+      });
+    }
 });
 
 <span class="hljs-comment">// to send a message to *everyone*:</span>

nodejs.md

@@ -164,6 +164,8 @@ socket.onerror = function(err) {
 }
 socket.onclose = function(e) { 
 	console.log("websocket disconnected from "+addr); 
+	// during development you might want to try reloading the page whenever the server restarts:
+	location.reload();
 }
 ```
 
@@ -179,7 +181,7 @@ document.addEventListener("pointermove", e => {
 });
 
 socket.onmessage = function(msg) {
-	console.log(msg.data);
+	console.log(msg.data.toString());
 }
 ```
 
@@ -191,11 +193,19 @@ wss.on('connection', function(client) {
 	// all per-client code goes here now.
 
 	client.on('message', msg => {
-		console.log("I got a message!", msg);
+		console.log("I got a message!", msg.toString());
 
 		// reply:
 		client.send("who?")
 	});
+
+	// to send a message to *everyone else*:
+    function sendAllOtherClients(message) {
+      wss.clients.forEach(other => {
+		if (client == other) return;
+      	other.send(message);
+      });
+    }
 });
 
 // to send a message to *everyone*: