add websocket router and html/js test client

This commit is contained in:
arne 2023-01-28 16:40:46 +01:00
parent 7729f97291
commit 53e694be9a
3 changed files with 46 additions and 2 deletions

9
app.py
View File

@ -1,10 +1,12 @@
from flask import Flask, render_template, url_for, request, redirect, Response, abort, session from flask import Flask, render_template, url_for, request, redirect, Response, abort, session
from flask_sock import Sock
from flask_sqlalchemy import SQLAlchemy from flask_sqlalchemy import SQLAlchemy
from werkzeug.middleware.proxy_fix import ProxyFix from werkzeug.middleware.proxy_fix import ProxyFix
from datetime import datetime from datetime import datetime
import magic import magic
import random import random
import string import string
import json
app = Flask(__name__) app = Flask(__name__)
app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1) app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
@ -12,6 +14,7 @@ app.secret_key = '029c0gji3jfo3o8h938vhwtfmh3t39th'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///cloudvars.db' app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///cloudvars.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app) db = SQLAlchemy(app)
sock = Sock(app)
class variables(db.Model): class variables(db.Model):
id = db.Column(db.Integer, primary_key=True, autoincrement=True) id = db.Column(db.Integer, primary_key=True, autoincrement=True)
@ -25,6 +28,12 @@ def get_date():
date = datetime.now() date = datetime.now()
return { "now": date.strftime("%Y-%m-%d") } return { "now": date.strftime("%Y-%m-%d") }
@sock.route('/<namespace>')
def echo(sock,namespace):
while True:
data = json.loads(sock.receive())
sock.send(json.dumps({"method":"set","name":"test","value":"abcd"}))
@app.route('/', methods = ['GET']) @app.route('/', methods = ['GET'])
def index(): def index():
return render_template('index.html') return render_template('index.html')

View File

@ -3,8 +3,8 @@
<div id="data"></div> <div id="data"></div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script> <script>
let socket = new WebSocket("wss://cloudvars.br0tkasten.de"); let socket = new WebSocket("ws://localhost:5000/testProject");
var projectID = "1234"; // hier project ID eintragen let projectID = "1234"; // hier project ID eintragen
function setVariable(name, value) { function setVariable(name, value) {
console.log(`Setting variable: ${name} = ${value}`); console.log(`Setting variable: ${name} = ${value}`);

35
docs/echo.html Normal file
View File

@ -0,0 +1,35 @@
<html>
<body>
<div id="data"></div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
let socket = new WebSocket("ws://localhost:5000/echo");
socket.onopen = function(e) {
console.log("connection established");
socket.send("Hello World");
setInterval(function () {socket.send("hello " + Math.random())}, 1000);
};
socket.onmessage = function(event) {
for (const message of event.data.split("\n")) {
console.log(`${message}`);
// variable name in obj.name, Wert der Variablen steht in obj.value
$('#data').html(`<b/>${message}</b>`);
}
};
socket.onclose = function(event) {
if (event.wasClean) {
console.log(`connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
console.log('connection died');
}
};
socket.onerror = function(error) {
console.log(`[error] ${error.data}`);
};
</script>
</body>
</html>