HTML5: WebSockets
WebSockets es una tecnología de comunicación bidireccional de próxima generación para aplicaciones web que opera en un solo socket y se expone a través de una interfaz JavaScript en navegadores compatibles con HTML 5.
Una vez que obtenga una conexión Web Socket con el servidor web, puede enviar datos desde el navegador al servidor llamando a un send() y recibir datos del servidor al navegador mediante un onmessage controlador de eventos.
A continuación se muestra la API que crea un nuevo objeto WebSocket.
var Socket = new WebSocket(url, [protocal] );
Aquí el primer argumento, url, especifica la URL a la que conectarse. El segundo atributo, el protocolo, es opcional y, si está presente, especifica un subprotocolo que el servidor debe admitir para que la conexión sea exitosa.
Atributos de WebSocket
A continuación se muestran los atributos del objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:
No Señor. | Atributo y descripción |
---|---|
1 | Socket.readyState El atributo de solo lectura readyState representa el estado de la conexión. Puede tener los siguientes valores:
|
2 | Socket.bufferedAmount El atributo de solo lectura búferAmount representa el número de bytes de texto UTF-8 que se han puesto en cola mediante el método send (). |
Eventos de WebSocket
A continuación se muestran los eventos asociados con el objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:
Evento | Controlador de eventos | Descripción |
---|---|---|
abierto | Socket.onopen | Este evento ocurre cuando se establece la conexión de socket. |
mensaje | Socket.onmessage | Este evento ocurre cuando el cliente recibe datos del servidor. |
error | Socket.onerror | Este evento ocurre cuando hay algún error en la comunicación. |
cerca | Socket.onclose | Este evento ocurre cuando se cierra la conexión. |
Métodos de WebSocket
A continuación se muestran los métodos asociados con el objeto WebSocket. Suponiendo que creamos el objeto Socket como se mencionó anteriormente:
No Señor. | Método y descripción |
---|---|
1 | Socket.send() El método de envío (datos) transmite datos mediante la conexión. |
2 | Socket.close() El método close () se usaría para terminar cualquier conexión existente. |
Ejemplo de WebSocket
Un WebSocket es un socket TCP bidireccional estándar entre el cliente y el servidor. El socket comienza como una conexión HTTP y luego se "actualiza" a un socket TCP después de un protocolo de enlace HTTP. Después del apretón de manos, ambos lados pueden enviar datos.
Código HTML y JavaScript del lado del cliente
En el momento de escribir este tutorial, solo hay unos pocos navegadores web compatibles con la interfaz WebSocket (). Puede probar el siguiente ejemplo con la última versión de Chrome, Mozilla, Opera y Safari.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
// websocket is closed.
alert("Connection is closed...");
};
} else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id = "sse">
<a href = "javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>
Instalar pywebsocket
Antes de probar el programa cliente anterior, necesita un servidor que admita WebSocket. Descargue mod_pywebsocket-xxxtar.gz de pywebsocket, que tiene como objetivo proporcionar una extensión de Web Socket para el servidor HTTP Apache e instálelo siguiendo estos pasos.
Descomprime y descomprime el archivo descargado.
Ve adentro pywebsocket-x.x.x/src/ directorio.
$ python setup.py compilación
$ sudo python setup.py instalar
Luego lea el documento por -
- $ pydoc mod_pywebsocket
Esto lo instalará en su entorno de Python.
Iniciar el servidor
Ve a la pywebsocket-x.x.x/src/mod_pywebsocket carpeta y ejecute el siguiente comando:
$sudo python standalone.py -p 9998 -w ../example/
Esto iniciará la escucha del servidor en el puerto 9998 y usará el handlers directorio especificado por la opción -w donde reside nuestro echo_wsh.py.
Ahora, usando el navegador Chrome, abra el archivo html que creó al principio. Si su navegador es compatible con WebSocket (), recibirá una alerta que indica que su navegador es compatible con WebSocket y, finalmente, cuando haga clic en "Ejecutar WebSocket", recibirá un mensaje de despedida enviado por el script del servidor.