setup websocket

.gitignore

@@ -1,3 +1,5 @@
 venv/
 __pycache__
 .env
+.vscode
+node_modules

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-	"python.formatting.provider": "black"
-}

readme.md

@@ -37,3 +37,11 @@ Prototype of the spaghetti cables interface
 
 -   first experiments with tone.js and the dynamic sequences
 -   polishing the notation for the sequences
+-   setting up the websocket mess with nginx and the soupboat
+
+### TODO:
+
+-   setting up the client --- server relation
+-   comment the code and comment the process
+-   synth controls
+-   play around

requirements.txt

@@ -9,7 +9,6 @@ Flask-SocketIO==5.1.1
 greenlet==1.1.2
 itsdangerous==2.1.2
 Jinja2==3.1.1
-Mako==1.2.0
 MarkupSafe==2.1.1
 mypy-extensions==0.4.3
 pathspec==0.9.0

skimmer/__init__.py

@@ -3,7 +3,7 @@ from flask import Flask, send_from_directory
 from flask_socketio import SocketIO
 from . import prefix
 
-socketio = SocketIO()
+socketio = SocketIO(path=os.path.join(os.environ.get("URL_PREFIX", ""), "socket.io"))
 
 
 def create_app(test_config=None):
@@ -38,10 +38,14 @@ def create_app(test_config=None):
 
     app.register_blueprint(bowl.bp)
 
+    from . import handle
+
+    app.register_blueprint(handle.bp)
+
     app.wsgi_app = prefix.PrefixMiddleware(
         app.wsgi_app, prefix=os.environ.get("URL_PREFIX", "")
     )
 
-    socketio.init_app(app)
+    socketio.init_app(app, cors_allowed_origins="*")
 
     return app

skimmer/bowl.py

@@ -1,6 +1,4 @@
-from flask import Blueprint
-from mako.template import Template
-
+from flask import Blueprint, render_template, request
 from . import events
 
 bp = Blueprint("bowl", __name__)
@@ -8,9 +6,7 @@ bp = Blueprint("bowl", __name__)
 
 @bp.route("/")
 def bowl():
-    return Template(filename="skimmer/templates/bowl.html").render()
-
-
-@bp.route("/test/")
-def test():
-    return Template(filename="skimmer/templates/bowl.html").render()
+    handle = request.values.get('handle','')
+    if handle != '':
+        return render_template('handle.html')
+    return render_template("bowl.html")

skimmer/events.py

@@ -1,10 +1,25 @@
 from flask import session
 from flask_socketio import emit
 
+
 from . import socketio
 
+handle = ''
+
+
+@socketio.on("connect bowl")
+def add_bowl(id):
+    print(f'Client connected! ID: {id}')
+    emit("add bowl", id, to=handle)
+
+@socketio.on("disconnect bowl")
+def add_bowl(id):
+    print(f'Client disconnected! ID: {id}')
+    emit("remove bowl", id, to=handle)
+
+
+@socketio.on("handle")
+def add_bowl(id):
+    handle = id
+    print('Handle is connected!')
 
-@socketio.on("my event")
-def test(message):
-    print(message)
-    emit("message", {"msg": "eheh"})

skimmer/handle.py

@@ -0,0 +1,9 @@
+from flask import Blueprint, render_template
+from . import events
+
+bp = Blueprint("handle", __name__)
+
+
+@bp.route("/handle/")
+def handle():
+    return render_template("handle.html")

skimmer/static/js/bowl.js

@@ -0,0 +1,14 @@
+// NOT ELEGANT SOLUTION FOR LOCAL DEV
+let path = document.URL.startsWith("http://127.0.0.1") ? "" : "/soupboat/skimmer/socket.io";
+
+let socket = io({
+	path: path,
+});
+
+socket.on("connect", function () {
+	socket.emit("connect bowl", { id: socket.id });
+});
+
+socket.on("disconnect", function () {
+	socket.emit("disconnect bowl", { id: socket.it });
+});

skimmer/static/js/handle.js

@@ -0,0 +1,27 @@
+// NOT ELEGANT SOLUTION FOR LOCAL DEV
+let path = document.URL.startsWith("http://127.0.0.1") ? "" : "/soupboat/skimmer/socket.io";
+
+let socket = io("http://127.0.0.1:5000", {
+	path: path,
+});
+
+socket.on("connect", function () {
+	socket.emit("handle", { id: socket.id });
+});
+
+socket.on("add bowl", (data) => addBowl(data.id));
+socket.on("remove bowl", (data) => removeBowl(data.id));
+
+const container = document.getElementById("container");
+
+function addBowl(id) {
+	let bowl = document.createElement("div");
+	bowl.classList.add("bowl");
+	bowl.innerHTML = id;
+	bowl.dataset.bowl = id;
+	container.appendChild(bowl);
+}
+
+function removeBowl(id) {
+	container.querySelector(`[data-bowl=${id}]`).remove();
+}

skimmer/templates/bowl.html

@@ -11,14 +11,9 @@
 			integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
 			crossorigin="anonymous"
 		></script>
-		<script type="text/javascript" charset="utf-8">
-			var socket = io();
-			socket.on("connect", function () {
-				socket.emit("my event", { data: "I'm connected!" });
-			});
-		</script>
+		<script src="{{url_for('static', filename='js/bowl.js')}}" type="module"></script>
 	</head>
 	<body>
-		Hello Bonjur
+		<h1>Bowl</h1>
 	</body>
 </html>

skimmer/templates/handle.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+
+		<script
+			src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
+			integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
+			crossorigin="anonymous"
+		></script>
+		<script src="{{url_for('static', filename='js/handle.js')}}" defer></script>
+	</head>
+	<body>
+		<h1>Handle</h1>
+		<div id="container"></div>
+	</body>
+</html>