55 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			55 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <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");
 | |
|     let projectID = "1234"; // hier project ID eintragen
 | |
| 
 | |
|     function setVariable(name, value) {
 | |
|         console.log(`Setting variable: ${name} = ${value}`);
 | |
|         socket.send(JSON.stringify({
 | |
|             method: "set",
 | |
|             project_id: projectID,
 | |
|             name,
 | |
|             value
 | |
|         }));
 | |
|     };
 | |
| 
 | |
| 
 | |
|     socket.onopen = function(e) {
 | |
|       console.log("connection established");
 | |
|       socket.send(JSON.stringify({
 | |
|         method: "handshake",
 | |
|         project_id: projectID,
 | |
|         user: "testClient"+Math.random()
 | |
|       }));
 | |
| 
 | |
|       setInterval(function() { setVariable('test',Math.random()) }, Math.random(3)*1000);
 | |
|     };
 | |
| 
 | |
|     socket.onmessage = function(event) {
 | |
|         for (const message of event.data.split("\n")) {
 | |
|             console.log(`${message}`);
 | |
|             const obj = JSON.parse(message);
 | |
|             if (obj.method === "set") {
 | |
|                 // variable name in obj.name, Wert der Variablen steht in obj.value
 | |
|               $('#data').html(`<b/>${obj.name}:</b> <pre>${obj.value}</pre>`);
 | |
|             }
 | |
|         }
 | |
|     };
 | |
| 
 | |
|     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> |