Tutorial de diez minutos
Esta es una guía rápida para empezar con websocketd. Al final de ella usted habrá aprendido:
- Arrancar un servidor websocketd.
- Crear un script ("WebSocket endpoint") para el servidor que cuente hasta 10.
- Crear una página web que muestre dicha cuenta.
¿Impaciente? lea el Tutorial de 10 minutos.
Este tutorial asume que usted está familiarizado de forma básica con HTML, JavaScript y el concepto de WebSockets.
Recuerde, websocketd permite crear programas en diferentes lenguajes de programación cuya entrada salida puede ser manejada desde entornos web. En este tutorial se utilizarán scripts en Bash para hacerlo más simple.
Antes de empezar esté seguro que ha Descargado e instalado websocketd.
Empecemos!
lo que se denomina como "WebSocket endpoint", es un programa que se expone a través de una URL de WebSocket (por ejemplo, ws://someserver/my-program). Cada vez que un navegador se conecta a esa URL, el servidor websocketd iniciará una nueva instancia. Cuando el navegador se desconecte, la instancia se detendrá.
Si hay 10 exploradores conectados al servidor, habrá 10 instancias independientes del programa en ejecución. Websocketd se encarga de escuchar las conexiones de WebSocket y de iniciar / detener los procesos del programa.
Si el proceso necesita enviar un mensaje al navegador, simplemente debe imprimir el contenido del mensaje a STDOUT, cada mensaje debe empezar en una linea nueva.
Como era de esperar, si el navegador envía un mensaje WebSocket, websocketd lo recibirá y lo redirecionará al STDIN del proceso. Como en el envío, se debe especificar cada mensaje en una linea nueva.
Este simple script en Bash cuenta en segundos del 1 al 10 y finaliza.
count.sh:
#!/bin/bash
for COUNT in $(seq 1 10); do
echo $COUNT
sleep 1
done¿No le gusta la Bash? El directorio de ejemplos contiene el mismo programa en Python, Ruby, Perl and PHP. Si usted utiliza Windows, también se puede utilizar JScript y VBScript.
Antes de integrar el script dentro del servidor WebSocket, pruebe el script desde la linea de comandos. Lo bonito de websocketd es que el script en el servidor funciona igual de bien que desde la linea de comandos sin necesidad de realizar ninguna adaptación.
$ chmod +x count.sh
$ ./count.sh
1
2
3
4
5
6
7
8
9
10Ahora ya tiene su programa, es el momento de arrancar el servidor websocketd:
$ websocketd --port=8080 --staticdir=. ./count.shLos parámetros utilizados fueron:
--port=8080 Puerto donde se atienden peticiones.
--staticdir=. Permite servir count.html como contenido estático.
./count.sh Programa con el que establecer la comunicación.
Ahora tenemos generado el denominado "WebSocket end point", disponible desde la URL ws://localhost:8080/.
La opción --devconsole habilita la consola de websocketd que permite interactuar manualmente con los WebSocket endpoints.
Visite la URL http://localhost:8080/ para poder ver la terminal. Debe presionar el "checkbox" para conectar.
Tenga en cuenta que no se puede utilizar --devconsole y --staticdir de manera simultanea. la consola de desarrollador está destinada a proporcionar una interfaz de usuario temporal hasta que haya construido la definitiva.
Para probar el el endpoint se usará el siguiente código Javascript para conectar con websocketd.
var ws = new WebSocket('ws://localhost:8080/');
ws.onopen = function() { ... do something on connect ... };
ws.onclose = function() { ... do something on disconnect ... };
ws.onmessage = function(event) { ... do something with event.data ... };Aquí hay un ejemplo con todos los pasos anteriores juntos:
- Abrir una conexión WebSocket.
- Muestra el recuento actual desde el servidor.
- Indica el estado de la conexión cambiando el color de fondo.
count.html:
<!DOCTYPE html>
<html>
<head>
<title>websocketd count example</title>
<style>
#count {
font: bold 150px arial;
margin: auto;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="count"></div>
<script>
var ws = new WebSocket('ws://localhost:8080/');
ws.onopen = function() {
document.body.style.backgroundColor = '#cfc';
};
ws.onclose = function() {
document.body.style.backgroundColor = null;
};
ws.onmessage = function(event) {
document.getElementById('count').textContent = event.data;
};
</script>
</body>
</html>Guarde esto en la carpeta donde tiene el script count.sh y donde se ejecutará el comando websocketd (que también servirá el archivo html estático.
Visite esta URL:
http://localhost:8080/count.html
Es posible que no funcione si se abre directamente desde el disco utilizando una URL file:// debido a la política de seguridad de sitios cruzados de WebSockets. (La URL en la imagen es incorrecta).
Para un ejemplo mostrando dos vías de comunicación usando c++, eche un vistazo a: CPP-Ejemplo-de-I-O