basic SSE example, Web client

basic SSE examples for /events
demo day video
3 changed files with 103 additions and 16 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,43 @@
 # Offtopus, offline-octopus
 ## Goal
 Provide a way to connect local machines to work and tinker with efficiently, building prototypes with resilience in mind.
 ## Demo
 5min recorded demo video https://video.benetou.fr/w/sHE39WSZkQgfPNDdiypfog
 Note that XR is optional. Original extract from https://youtu.be/BRjohy0ruAg?t=2061 for Future of Text demo day.
 ## How does it work
 It provides a Web server with endpoints for different functions, including listing machines joining that network, make functions available to that new network of machines, sharing files, etc. Note that the point is to build on top of it, consequently functions as endpoints here are solely examples.
 ## How to install
 1. clone repository
 1. install dependancies (no package.json yet) but mostly express missing, i.e `npm i express`
 1. run e.g `node .`
 1. connect to it locally first, e.g https://localhost:8082 (assumes existing SSL certificates) or https://localhost:8082/routes
 Note that the cloudinit file is an example on a brand new machine.
 ### tested on
 - Linux machines, e.g Ubuntu on desktop, RPi Zero
 - Android devices using Termux, e.g Quest 1
 - iOS via iSH
 Most likely partially works on Windows with Linux subsystem. System commands, e.g shutdown, xrandr, etc must be adapted.
 ### Developing and debugging
 - See the console REPL, starting with help()
 - see `/routes/json` to connect to all services
 ## Digging deeper
 - Future of Text WebXR demo with shared filesystems https://video.benetou.fr/w/h291CfZiezenY1t46cQQo5 extract from https://www.youtube.com/results?search_query=demo+prototype+session
 - hour long video discussion https://video.benetou.fr/w/aR81WVHg6H3E93GPG4jYUg
 - self hosting AI notes https://fabien.benetou.fr/Content/SelfHostingArtificialIntelligence
 - self hosting subreddit https://old.reddit.com/r/selfhosted/
 - small Web https://ar.al/2020/08/07/what-is-the-small-web/
 - DWeb https://en.wikipedia.org/wiki/Decentralized_web
 ### Inspiration
 - Designing for serendipity: supporting end-user configuration of ubiquitous computing environments, Xerox PARC 2002
 - Providing an Integrated User Experience of Networked Media, Devices, and Services through End-User Composition, 2008
--- a/examples/events.html
+++ b/examples/events.html
@ -0,0 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />
    <title>offtopus events</title>
  </head>
  <body>
    <div id="content"></div>
    <hr>
    <div id="events"></div>
 <script>
 const source = new EventSource('/events');
 source.addEventListener('message', message => {
  console.log('Got', message);
  // Display the event data in the `content` div
  document.querySelector('#events').innerHTML = event.data;
 })
    </script>
  </body>
 </html>
--- a/index.js
+++ b/index.js
@ -10,8 +10,8 @@ const express = require("express");           // could be good to replace with c
 // Get port or default to 8082
 const port = process.env.PORT || 8082;
 const protocol = 'https'
-// TODO merge from responsive-workspace-demoday
+const subclass = '10.160.168.'
-const subclass = '192.168.0.'
+//const subclass = '192.168.4.'
 const publicKeyPath = path.resolve(process.env.HOME,'.ssh','id_rsa_offlineoctopus.pub')
 const publicKey = fs.readFileSync(publicKeyPath).toString().split(' ')[1]
@ -246,13 +246,14 @@ app.get('/foundpeers', (req, res) => {
 let foundPeers = []
 app.get('/scan', (req, res) => {
-	scanpeers(res)
+	scanpeers()
-	//res.json( {msg: 'started'} ) // could redirect('/foundpeers') too after a timeout
+	res.json( {msg: 'started'} ) // could redirect('/foundpeers') too after a timeout
 })
-function scanpeers(queryres=null){
+function scanpeers(){
 	sendEventsToAll({'action':'scanning started'})
 	foundPeers = []
-	for (let i=1;i<254;i++){ // async so blasting, gives very quick result for positives
+	for (let i=1;i<25;i++){ // async so blasting, gives very quick result for positives
 		let url=protocol+'://'+subclass+i+':'+port+'/available'
 		let opt={rejectUnauthorized: false}
 		https.get(url, opt, res => {
@ -269,8 +270,6 @@ function scanpeers(queryres=null){
 		  //console.log(err.message); usually ECONNREFUSED or EHOSTUNREACH
 		}).end()
 	}
 	if (queryres) setTimeout( _ => queryres.json( foundPeers), 1000 )
 	// timing heuristic
 }
 app.get('/sshconfig', (req, res) => {
@ -385,11 +384,27 @@ webServer.listen(port, () => {
    console.log("listening on "+protocol+"://localhost:" + port);
 });
-const { createProxyMiddleware } = require('http-proxy-middleware');
+// SSE from https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app
-app.use(
+// adapted from jxr-permanence
-  '/proxied',
+let clients = [];
-  createProxyMiddleware({
+
-	  target: 'http://localhost:8080',
+function eventsHandler(request, response, next) {
-	  pathRewrite: { '^/proxied' : ''},
+  const headers = {
-  })
+    'Content-Type': 'text/event-stream',
-)
+    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache'
  };
  response.writeHead(200, headers);
  const clientId = Date.now();
  const newClient = { id: clientId, response };
  clients.push(newClient);
  request.on('close', () => { clients = clients.filter(client => client.id !== clientId); });
 }
 function sendEventsToAll(data) {
  // function used to broadcast
  clients.forEach(client => client.response.write(`data: ${JSON.stringify(data)}\n\n`))
 }
 app.get('/events', eventsHandler);
 // for example /events.html shows when /scan begings (but not ends)
Author	SHA1	Message	Date
Fabien Benetou	2eedef5398	basic SSE example, Web client	11 months ago
Fabien Benetou	3e7aa01e34	basic SSE examples for /events	11 months ago
Fabien Benetou	f8443bd342	demo day video	1 year ago
Fabien Benetou	0712c4e2b5	videos	1 year ago
Fabien Benetou	aabd112c16	publications	1 year ago
Fabien Benetou	a1fc2458c0	more refs	1 year ago
Fabien Benetou	e4a27f273d	readme fix	1 year ago
Fabien Benetou	67460f125d	readme	1 year ago