Latest web development tutorials

HTML5 WebSocket

HTML5 WebSocket es un comienzo proporcionada por la comunicación full-dúplex a través de un único protocolo de conexión TCP.

En la API WebSocket, el navegador y el servidor sólo para hacer una acción apretón de manos, entonces, entre el navegador y el servidor en la formación de una vía rápida. Puede transferir datos directamente entre sí.

Navegador envía al servidor a través petición JavaScript para establecer una conexión WebSocket, se establece la conexión, el cliente y el servidor puede estar conectado directamente a intercambiar datos a través de TCP.

Al llegar la conexión de socket Web, puede enviar los datos al servidor a través del métodosend (), y para recibir los datos devueltos por el servidor onmessageevento.

El siguiente API WebSocket se usa para crear objetos. 

var Socket = new WebSocket(url, [protocal] );

El código anterior primer parámetro URL, especifique la conexión URL. El segundo parámetro es el protocolo opcional que especifica sub-protocolo aceptable.

propiedad WebSocket

Estos son los atributos de objeto WebSocket. Supongamos que utilizamos el código anterior para crear un objeto del zócalo:

propiedad descripción
Socket.readyState

Atributo de sólo lecturareadyState indica el estado de conexión puede tener los siguientes valores:

  • 0 - indica que no se ha establecido la conexión.

  • 1 - Indica que la conexión se establece, se puede comunicar.

  • 2 - indica que la conexión está cerrada.

  • 3 - indica que la conexión ha sido cerrada o la conexión no se puede abrir.

Socket.bufferedAmount

Atributo de sólo lecturabufferedAmount fue añadido () se colocan en una cola de espera para la transferencia, pero aún no se ha emitido una UTF-8 bytes de texto.

evento WebSocket

Éstos son el objeto WebSocket eventos. Supongamos que utilizamos el código anterior para crear un objeto del zócalo:

evento controlador de eventos descripción
abierto Socket.onopen Activa cuando se establece la conexión
mensaje Socket.onmessage Cuando el cliente recibe los datos de servidor de activación
error Socket.onerror Se activa cuando se produce un error de comunicación
cerca Socket.onclose Se activa cuando la conexión se cerró

método WebSocket

Éstos son el objeto métodos WebSocket. Supongamos que utilizamos el código anterior para crear un objeto del zócalo:

camino descripción
Socket.send ()

Utilizar la conexión para enviar los datos

Socket.close ()

estrecha conexión

instancia WebSocket

protocolo Naturaleza WebSocket es un protocolo basado en TCP.

Con el fin de establecer una conexión WebSocket, el navegador cliente inicia un servidor HTTP en primer lugar quisiera solicitar que esta solicitud y las peticiones HTTP habituales, contiene alguna información de cabecera adicional, en el que la información de cabecera adicional "Upgrade: WebSocket" indica que se trata de un protocolo de aplicación actualizar solicitud HTTP, el servidor analiza la información de cabecera adicional se genera mensaje de respuesta al cliente, el cliente de conexión WebSocket y se establece el servidor, ambas partes pueden, a través de la transmisión del canal de conexión libre de información, y esta conexión persiste hasta que el cliente o en el servidor parte activa para cerrar la conexión.

Cliente HTML y JavaScript

En la actualidad, la mayoría de los navegadores soportan WebSocket interfaces (), puede probar los ejemplos en los siguientes navegadores: Chrome, Mozilla, Opera y Safari.

el contenido del archivo w3big_websocket.html 

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>本教程(w3big.com)</title>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
				
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

pywebsocket instalación

Antes de ejecutar el programa anterior, tenemos que crear un servicio de apoyo WebSocket. De pywebsocket descarga mod_pywebsocket, o el uso de comandos git para descarga: 

git clone https://github.com/google/pywebsocket.git

el apoyo necesario mod_pywebsocket ambiente pitón

mod_pywebsocket de un Apache HTTP extensiones websocket, pasos de instalación son los siguientes:

  • Descomprimir el archivo descargado.

  • Entra en el directoriopywebsocket.

  • ejecutar: 

    $ python setup.py build
$ sudo python setup.py install

  • Consulte la documentación: 

    $ pydoc mod_pywebsocket

Open Service

Ejecute el siguiente comando en el directorio/ mod_pywebsocket pywebsocket:

$ sudo python standalone.py -p 9998 -w ../example/

El comando anterior se abrirá un número de puerto de servicio 9998, utilice el -w para establecer el controlador de directorio ubicado echo_wsh.py.

Ahora podemos abrir el archivo w3big_websocket.html creó anteriormente en el navegador Chrome. Si su navegador es compatible con WebSocket (), haga clic en "Ejecutar WebSocket", se puede ver todo el proceso de cada paso de la ventana emergente, el Gif demostración proceso:

Una vez que nos detenemos el servicio, que se abrirá "Conexión cerrada ...."