node-socket-server-basico/index.html at main · angeltonio/node-socket-server-basico · GitHub

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cocina de induccion</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- <script>
    let HOST = location.origin.replace(/^http/, 'ws')
    let ws = new WebSocket(HOST);
    let el;

    ws.onmessage = (event) => {
      el = document.getElementById('server-time');
      el.innerHTML = 'Server time: ' + event.data;
    };


  </script> -->

</head>


<body class="container">
  <h1 class="mt-2">Socket Client</h1>
  <hr>
  <div class="container">

    <div class="col">
      <button id="btnOnOff" class="btn bg-danger text-white mx-2">
        On-off
      </button>
    </div>

    <br />

    <div class="col">
      <button id="btnPower" class="btn btn-primary mx-2">
        Power
      </button>

      <button id="btnTemp" class="btn btn-warning mx-2">
        Temp
      </button>

      <button id="btnTimer" class="btn btn-success mx-2">
        Timer
      </button>
    </div>

    <br />

    <div class="col">
      <button id="btnMenos" class="btn btn-warning mx-2 rounded-circle">
        -
      </button>
      <button id="btnMas" class="btn btn-primary mx-2 rounded-circle">
        +
      </button>


    </div>

  </div>


  <hr>
  <script>
    // let HOST = location.origin.replace(/^http/, 'ws')

    let HOST = location.origin.replace(/^http/, 'ws')
    let ws = new WebSocket(HOST);
    // let ws = new WebSocket("ws://3.86.18.35/:3000");
    let el;
  </script>

  <script>
    ws.onmessage = (event) => {
      console.log(event.data);
      el = document.getElementById('server-time');
      el.innerHTML = 'Boton pulsado: ' + event.data;
    };
  </script>

  <script>
    const btnOnOff = document.querySelector('#btnOnOff');
    btnOnOff.addEventListener('click', () => {
      ws.send("btnOnOff");
    });
  </script>

  <script>
    const btnPower = document.querySelector('#btnPower');
    btnPower.addEventListener('click', () => {
      ws.send("btnPower");
    });
  </script>

  <script>
    const btnTemp = document.querySelector('#btnTemp');
    btnTemp.addEventListener('click', () => {
      ws.send("btnTemp");
    });
  </script>

  <script>
    const btnTimer = document.querySelector('#btnTimer');
    btnTimer.addEventListener('click', () => {
      ws.send("btnTimer");
    });
  </script>

  <script>
    const btnMas = document.querySelector('#btnMas');
    btnMas.addEventListener('click', () => {
      ws.send("btnMas");
    });
  </script>

  <script>
    const btnMenos = document.querySelector('#btnMenos');
    btnMenos.addEventListener('click', () => {
      ws.send("btnMenos");
    });
  </script>


  <p id="server-time"></p>


</body>

</html>