JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

window.addEventListener('load', function() {
	var websocket = new WebSocket(`ws://${window.location.hostname}/ws`);
	websocket.onopen = function(event) {
	 console.log('Connection established');
	}
	websocket.onclose = function(event) {
	 console.log('Connection died');
	}
	websocket.onerror = function(error) {
	 console.log('error');
	};
	websocket.onmessage = function(event) {
	 if (event.data == "1") {
		document.getElementById('state').innerHTML = "ON";
		document.getElementById('toggle-btn').checked = true;
	 }
	 else {
		document.getElementById('state').innerHTML = "OFF";
		document.getElementById('toggle-btn').checked = false;
	 }
	  
	 if (event.data == "1") {
		document.getElementById('TyTy').innerHTML = "ON";
		document.getElementById('toggle-btn2').checked = true;
	 }
	 else {
		document.getElementById('TyTy').innerHTML = "OFF";
		document.getElementById('toggle-btn2').checked = false;
	 }
  
	};
	document.getElementById('toggle-btn').addEventListener('change', function() { websocket.send('toggle');});
	document.getElementById('toggle-btn2').addEventListener('change', function() { websocket.send('toggle2');})	
 });

1
2

document.getElementById('toggle-btn').addEventListener('change', function() { websocket.send('toggle');});
document.getElementById('toggle-btn2').addEventListener('change', function() { websocket.send('toggle2');})