Utilizzare i Web Sockets in Dart

Di - 9 February 2013 - in

Riprendiamo le fila del discorso relativo alle funzioni lato server in Dart e presentiamo oggi la classe WebSocket, tramite la quale è possibile stabilire connessioni bidirezionali fra client e server.

L’utilizzo dei web sockets è particolarmente indicato per le applicazioni web che richiedono una continua comunicazione in tempo reale fra il (oppure i) client e il server — e.g. videogiochi, chat, etc. — consentendoci di evitare il polling continuo al server. Per maggiori informazioni sul protocollo WebSocket si può consultare la pagina relativa su Internet Engineering Task Force.

Nell’articolo di oggi vedremo come sviluppare una web app composta da un client e da un server; attraverso il client l’utente invia un messaggio al server, che risponde inviando il messaggio invertito.

Apriamo il DartEditor e scegliamo di creare una nuova applicazione utilizzando il template Web Application. Creiamo la cartella bin e il file server.dart e scriviamo le funzioni:

  • avviaServer(int port)

    Avvia un server HTTP all’indirizzo http://127.0.0.1:4000, istanzia un WebSocket handler e lo imposta come default request handler

  • reverseText(String msg)

    Prende in ingresso una stringa e la inverte.

Il listato completo di server.dart:

import 'dart:io';

main() {
  avviaServer(4000);
}

String reverseText(String msg) {
  var buffer = new StringBuffer();
  for (int i = msg.length - 1; i >= 0; i--) {
    buffer.add(msg[i]);
  }
  return buffer.toString();
}

avviaServer(int port) {
  HttpServer server = new HttpServer();
  WebSocketHandler wsHandler = new WebSocketHandler();

  wsHandler.onOpen = (WebSocketConnection conn) {
    print('Nuova connessione');

    conn.onClosed = (int status, String msg) {
      print('Connessione terminata: ${msg}');
    };

    conn.onMessage = (msg) {
      print("Messaggio ricevuto dal client\n> $msg");
      conn.send(reverseText(msg));
    };

  };

  server.defaultRequestHandler = wsHandler.onRequest;
  server.listen('127.0.0.1', port);
  print('Server in ascolto sulla porta $port');
}

I metodi di WebSocketHandler() sono piuttosto intuitivi: onOpen definisce la funzione da invocare quando il server riceve una nuova richiesta, onClosed quando la connessione termina, e onMessage quando il server riceve un messaggio. Nel caso di questa ultima funzione, il server “risponde” inviando a sua volta un messaggio al client, conn.send().

Passiamo ora all’analisi del client, websockets.dart:

import 'dart:html';

TextAreaElement log = query('#log');

void main() {

  WebSocket ws = new WebSocket('ws://127.0.0.1:4000');

  aggiornaLog('Provo a connettermi al server');

  ws.onOpen.listen((e) => aggiornaLog("Connesso al server"));
  ws.onClose.listen((e) => aggiornaLog("Disconnesso ${e.reason}"));
  ws.onError.listen((e) => aggiornaLog("Errore"));

  ws.onMessage.listen((e){
    aggiornaLog("Messaggio ricevuto dal server:");
    aggiornaLog("> ${e.data}");
  });

  InputElement input = query('#input');
  ButtonElement btn = query('#btn');

  btn.onClick.listen((e){
    if(input.value!=""){
      aggiornaLog("Invio messaggio al server:");
      aggiornaLog("< ${input.value}");
      ws.send(input.value);
      input.value="";
    }
  });
}

void aggiornaLog(String msg){
  log.appendHtml(new DateTime.now().toString());
  log.appendHtml(" - $msg\n");
}

main() inizializza un’istanza di WebSocket e, analogamente a quanto visto precedentemente, definisce le callback onOpen, onClose, onError e onMessage; definite queste funzioni, main() associa all’evento onClick del pulsante “Invia messaggio al server” una funzione che invia al server il contenuto del campo di input.

A questo punto siamo pronti per avviare l’applicazione; avviamo prima il server(possiamo farlo sia da terminale che da Dart Editor) dopodichè avviamo websockets.html:

Screenshot

La documentazione ufficiale relativa ai Web Sockets può essere consultata su api.dartlang.org, mentre il codice completo di questo esempio è disponibile sull’account Engeene su Github.

Leave a Reply

Claudio d'Angelis Articolo scritto da

Programmatore e studente di Informatica, appassionato di musica, web e sistemi UNIX. Collabora con Googlab dall'Ottobre 2012.

Contatta l'autore

Previous post:

Next post: