prucommercialre.com


HTML5 y Web Sockets

October 21

Tomas Web son una de las adiciones más avanzados técnicamente a HTML5, y también tienen el potencial para producir el cambio más dramático de la obra forma en que Internet se hace.

Mucho antes de la Web como la conocemos, los programadores estaban usando una idea llamada sockets para permitir que los equipos remotos se comuniquen con una conexión persistente. Si alguna vez has usado un cliente Telnet, FTP o SSH, usted ha utilizado un programa que utiliza sockets. Normalmente, el programador construye dos tipos de enchufes: Uno que vive en el servidor (a - ¡agárrense! - Socket de servidor) y uno que vive en el cliente (usted lo adivinó - un socket de cliente.) Estos dos programas se comunican por una predeterminada acuerdo de comunicación estilizado, llamado un protocolo de comunicaciones. De hecho, Telnet, FTP, HTTP, y muchas otras herramientas de Internet son realmente más protocolos que software. Un programa de Telnet es en realidad un cliente socket de usos múltiples, y puede ser utilizado para probar muchos tipos diferentes de sockets de servidor. El servidor Web en sí es un servidor especializado que habla principalmente el protocolo HTTP y el navegador Web es un cliente especializado que habla HTTP.

Puede utilizar una herramienta de toma como Telnet para conectarse a un servidor HTTP. Para probar esto, ejecute el código siguiente desde la línea de comandos. (Se debe trabajar el mismo en todas las plataformas: Todos ellos tienen un programa Telnet básico incorporado.)

telnet aharrisbooks.net 80

Usted ha conectado con el servidor utilizando el puerto 80 (el puerto estándar del servidor Web). Verás una respuesta que se parece a lo siguiente. (Negrita indica que esto viene desde el servidor.)

Tratando 66.40.52.176 ...
Conectado a www.aharrisbooks.net.
Carácter de escape es '^] ".

Ahora el servidor piensa que eres un navegador. Para tener una página en particular, es necesario enviar la misma petición el navegador enviaría. Para obtener el índice de JavaScript y AJAX para Dummies Andy Harris, utilice esta solicitud:

GET /jad/index.html HTTP / 1.1
host: www.aharrisbooks.net

Pulse la tecla Enter dos veces después de la última línea para enviar la solicitud. Verás una larga cadena de código HTML - todo el código que compone la página. Por supuesto, sólo verá el código porque esto no es un navegador real. Al final, verá esta línea:

Conexión cerrada por el host extranjera.

Esto siempre ocurre porque HTTP es un protocolo sin estado.

Tomas Web proporcionan un protocolo adicional. Usted todavía puede conectarse a la página Web de la forma habitual, pero cuando se implementa una toma Web, escribir código en su página web que se puede conectar a una toma de servidor y comunicarse con él. Mientras que la página en sí todavía utiliza el protocolo HTTP sin estado, la conexión de socket permanece en su lugar, siempre y cuando la página está activo, permitiendo completa comunicación bidireccional sin volver a establecer una conexión.

El tipo de conexión que se obtiene con este mecanismo es ideal para aplicaciones que requieren una gran cantidad de comunicación cliente-servidor, como las aplicaciones de chat y juegos multijugador.

Por supuesto, la construcción de una conexión de socket Web, usted necesita tener un cliente y un servidor. Normalmente, el servidor está escrito en un lenguaje como PHP o Python. También es necesario el conocimiento tanto de la programación del zócalo y el idioma del servidor se construye con la construcción de un socket de servidor. Muchos lenguajes modernos soportan un modo socket genérico que se puede utilizar para crear un socket Web especializado.

El código para un programa que permite al usuario información de entrada, que se envía al servidor y se hizo eco de vuelta es algo largo, pero no es terriblemente complicado:

<! DOCTYPE HTML>
<Html lang = "es">
<Head>
<Title> WebSocket prueba </ title>
<Charset meta = "UTF-8" />
<Style type = "text / css">
h1 {
text-align: center;
}
.Error {
color: red;
}
.response {
color: blue;
}
fieldset {
ancho: 80%;
margen: auto;
text-align: center;
-moz-box-shadow: 10px 10px 10px # 000000;
-webkit-box-shadow: 10px 10px 10px # 000000;
}
#output {
font-family: monospace;
ancho: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 1 em;
background-color: #eeeeee;
padding: 1 em;
#cccccc ranura 5px;: Frontera
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 10px 10px 10px # 000000;
-webkit-box-shadow: 10px 10px 10px # 000000;
}
</ Style>
<Script language = tipo "javascript" = "text / javascript">
salida var;
WebSocket var;
función init () {
salida = document.getElementById ("output");
} // Init final
función connect () {
// Socket abierto
si ("WebSocket" en la ventana) {
WebSocket = new WebSocket ("ws: //echo.websocket.org/");
// Nota de este servidor no hace más que repetir lo que se ha pasado
// Utilizar un servidor más elaborado para un comportamiento más interesante

output.innerHTML = "Conectando ...";

// Asociar controladores de eventos
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
websocket.onerror = onError;
} Else {
alert ("WebSockets no admiten en su navegador.");
} // End if
} // Fin de conectar
función onOpen (evt) {
// Llamada tan pronto como se abra una conexión
output.innerHTML = "<p> Conectado al servidor </ p>";
} // Fin onOpen
función onClose (evt) {
// Llama cuando se corta la conexión
output.innerHTML + = "<p> DISCONNECTED </ p>";
} // Fin OnClose;
función onMessage (evt) {
// Llamada a la recepción de mensajes
output.innerHTML + = "<p class =" respuesta "> RESPUESTA:"
+ Evt.data + "</ p>";
} // End onMessage
onError función (evt) {
// Llamada en caso de error
output.innerHTML + = "<p class =" error "> ERROR:"
+ Evt.data + "</ p>";
} // Fin onError
sendMessage function () {
// Obtener mensaje del campo de texto
txtMessage = document.getElementById ("txtMessage");
message = txtMessage.value;
// Mensaje pase a servidor
websocket.send (mensaje);
output.innerHTML + = "<p> MENSAJE ENVIADO:" mensaje + + "</ p>";
} // Fin sendMessage

</ Script>
</ Head>
<Body onload = "init ()">
<H1> Web Socket Echo Chamber </ h1>
<Form action = "">
<Fieldset>
<Tipo botón = "button"
onclick = "connect ()">
conectar con el servidor
</ Button>
<Label for = "txtMessage">
<Input type = "text"
id = "txtMessage"
value = "HTML5 Quick Reference For Dummies" />
</ Label>
<Tipo botón = "button"
onclick = "sendMessage ()">
enviar mensaje
</ Button>
<Tipo botón = "button"
onclick = "websocket.close ()">
desconectar
</ Button>
</ Fieldset>
</ Form>
<Div id = "salida"> Haga clic en el botón "conectar" para conectar </ div>
</ Body>
</ Html>




Artículos relacionados