Add Webserver communication

[PiMaV]

Brainstorming:

Data:

• We have a Web Server / Program (i.e. dash). Here you can activate some function "push to blitz" / "expose to port"
• We have a Database in both cases: we expose the images / npy / data

Loading:

• We have BLITZ "listening" to a URL (or such) for these images. When arriving, we display them.

Features:

• Maybe autoload, so we listen all the time and refresh when data is changing

[PiMaV]

The Idea is to have something like this:

Client Side (BLITZ):

import requests
from websocket import create_connection
import jwt

token = jwt.encode({"user": "client"}, "your_secret_key", algorithm="HS256")
ws = create_connection("ws://server-address/socket.io/?EIO=3&transport=websocket")

while True:
    result = ws.recv()
    # Simplified: Check the message for a new filename notification
    if "file_update" in result:
        filename = extract_filename(result)  # Implement this extraction
        file_url = f"http://server-address/getfile/{filename}?token={token}"
        response = requests.get(file_url)
        if response.status_code == 200:
            with open(filename, 'wb') as f:
                f.write(response.content)
            # Now load the .npy file as needed

Server Side (WOLKE):

from flask import Flask, send_from_directory, request
from flask_socketio import SocketIO
import jwt

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/getfile/<filename>')
def get_file(filename):
    token = request.args.get('token')
    try:
        # Validate token (simplified for example)
        jwt.decode(token, "your_secret_key", algorithms=["HS256"])
        return send_from_directory(directory='path/to/files', filename=filename, as_attachment=True)
    except jwt.InvalidTokenError:
        return "Unauthorized", 401

# Notify client over WebSocket when a new file is available
def notify_file_update(filename):
    socketio.emit('file_update', {'filename': filename})

if __name__ == '__main__':
    socketio.run(app)

For ease of use, we would present a Link-embbed-token(?) (some kind of URL that can be copy&pasted) in WOLKE That then can be used in BLITZ. We would store that in the ini file, so we dont have to copy paste every time (The server is a 24/7 docker / or only on boot-up)

We dont need encryption necessarily; we can do without as well.

[irkri]

The current implementation uses a socket connection and a requests download to get an image over the web given a specified address.

• BLITZ connects to the server at the specified address (WOLKE) and already knows the secret token (here 8 random chars)
• WOLKE sends on button press a string (name of a file on the system) to all connected clients (BLITZ)
• BLITZ receives the file name and tries to download the image with the given file name at a specified address containing the token

The token is only used to make sure a BLITZ application receives the file that knows about this token.

An example for a server using flask and socketio is:

import random
import string

from flask import Flask, abort, render_template, request, send_from_directory
from flask_socketio import SocketIO

TOKEN = "".join(
    random.choices(string.ascii_letters + string.digits, k=8)
)

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/', methods=['POST'])
def send_filename():
    if request.method == 'POST':
        socketio.emit(
            "send_file_message",
            {"file_name": request.form["file_name"]},
        )
        return render_template('index.html')
    return 'Error'

@app.route('/<token>')
def get_file(token):
    filename = request.args.get('filename')
    if token == TOKEN and filename is not None:
        print(filename)
        return send_from_directory(directory="path/to/images", path=filename, as_attachment=True)
    return abort(404)

if __name__ == '__main__':
    print(f"{TOKEN = }")
    socketio.run(app)

Place the following html code in a file path/templates/index.html. The server script is in path/wolke_server.py.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Button</title>
</head>
<body>
    <form method="post">
        <input type="text" name="file_name" placeholder="Enter a file name">
        <button type="submit">Send Message</button>
    </form>
</body>
</html>

[irkri]

This current implementation works now together with WOLKE. Lets focus on new todos like #29 and close this for now.