add websocket router and html/js test client
This commit is contained in:
		
							
								
								
									
										9
									
								
								app.py
									
									
									
									
									
								
							
							
						
						
									
										9
									
								
								app.py
									
									
									
									
									
								
							| @ -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') | ||||||
|  | |||||||
| @ -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
									
								
							
							
						
						
									
										35
									
								
								docs/echo.html
									
									
									
									
									
										Normal 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> | ||||||
		Reference in New Issue
	
	Block a user