Una semplice pagina per testare un server websocket

Autore: Fabio Di Matteo
Ultima revisione: 24/04/2026 08:52
URI WebSocket:
Il codice

<!doctype html>
<html lang="it">
 
<head>
  <meta charset="utf-8" />
  <title>WebSocket Client Semplice</title>
</head>
 
<body>
  <h1>WebSocket Client Semplice</h1>
  <div>
    <label>URI WebSocket: <input id="uri" value="ws://localhost:9001" size="40"></label>
    <button id="connect">Connetti</button>
    <button id="disconnect" disabled>Disconnetti</button>
  </div>
 
  <div>
    <input id="message" placeholder="Messaggio" size="40"  value='{"name":"miafunzione", "params" :"param1,param2,param"}'>
    <button id="send" disabled>Invia</button>
  </div>
 
  <div id="log" style="height:300px;width:800px; overflow:auto; border:1px solid #ccc; padding:8px;"></div>
 
  <script>
    let ws = null;
    const uriInput = document.getElementById('uri');
    const connectBtn = document.getElementById('connect');
    const disconnectBtn = document.getElementById('disconnect');
    const sendBtn = document.getElementById('send');
    const msgInput = document.getElementById('message');
    const logEl = document.getElementById('log');
 
    function log(m){
      let o = document.getElementById("log");
      o.insertAdjacentHTML('beforeend', '<p>'+m+'</p');
    }
 
    connectBtn.addEventListener('click', () => {
      const url = uriInput.value.trim();
      if (!url) {log('Inserisci un URI valido'); return;}
      ws = new WebSocket(url);
 
      ws.addEventListener('open', () => {
        log('Connesso a '+ url);
        connectBtn.disabled = true;
        disconnectBtn.disabled = false;
        sendBtn.disabled = false;
      });
 
      ws.addEventListener('message', (ev) => {
        log('Ricevuto: '+ ev.data);
      });
 
      ws.addEventListener('error', (ev) => {
        log('Errore WebSocket', ev);
      });
 
      ws.addEventListener('close', (ev) => {
        log('Connessione chiusa '+ 'code=' + ev.code+ ' reason=' + ev.reason);
        connectBtn.disabled = false;
        disconnectBtn.disabled = true;
        sendBtn.disabled = true;
        ws = null;
      });
    });
 
    disconnectBtn.addEventListener('click', () => {
      if (ws) {
        ws.close(1000, 'Chiusura volontaria');
      }
    });
 
    sendBtn.addEventListener('click', () => {
      const m = msgInput.value;
      if (!ws || ws.readyState !== WebSocket.OPEN) {
        log('WebSocket non connesso');
        return;
      }
      ws.send(m);
      log('Inviato:'+ m);
      msgInput.value = '';
    });
 
    // Optional: invia con Enter
    msgInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') sendBtn.click();
    });
  </script>
</body>
 
</html>