Latest web development tutorials

HTML5 WebSocket

HTML5 WebSocket é um começo fornecida pela comunicação full-duplex em um único protocolo de conexão TCP.

Na API WebSocket, o navegador eo servidor apenas para fazer uma ação aperto de mão, então, entre o navegador eo servidor sobre a formação de um fast-track. Você pode transferir dados diretamente entre si.

Navegador envia para o servidor através de pedido JavaScript para estabelecer uma conexão WebSocket, a conexão é estabelecida, o cliente eo servidor pode ser conectado diretamente a troca de dados via TCP.

Quando você começa a conexão de soquete Web, você pode enviar dados para o servidor através do métodosend (), e para receber os dados retornados pelo servidor onmessageevento.

O seguinte API WebSocket é usada para criar objetos.

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

O código acima primeiro parâmetro url, especificar a conexão URL. O segundo parâmetro é o protocolo opcional que especifica sub-protocolo aceitável.


propriedade WebSocket

Estes são o objeto atributos WebSocket. Suponha-se que usar o código acima para criar um objeto Socket:

propriedade descrição
Socket.readyState

Atributo somente leiturareadyState indica o status da conexão pode ter os seguintes valores:

  • 0 - indica que a ligação não tenha sido estabelecido.

  • 1 - indica que a conexão é estabelecida, ele pode se comunicar.

  • 2 - indica que a ligação ser fechada.

  • 3 - indica que a conexão foi fechada ou a conexão não pode ser aberto.

Socket.bufferedAmount

Atributo somente leiturabufferedAmount foi send () são colocados em uma fila de espera de transferência, mas ainda não emitiu um UTF-8 bytes de texto.


evento WebSocket

Aqui estão o objeto eventos WebSocket. Suponha-se que usar o código acima para criar um objeto Socket:

evento manipulador de eventos descrição
aberto Socket.onopen Disparado quando a conexão é estabelecida
mensagem Socket.onmessage Quando o cliente recebe os dados do servidor gatilho
erro Socket.onerror Ele é acionado quando ocorre um erro de comunicação
perto Socket.onclose Disparado quando a conexão fechada

método WebSocket

Aqui estão o objeto métodos WebSocket. Suponha-se que usar o código acima para criar um objeto Socket:

caminho descrição
Socket.send ()

Usar a conexão para enviar dados

Socket.close ()

estreita ligação


instância WebSocket

protocolo WebSocket natureza é um protocolo baseado em TCP.

A fim de estabelecer uma conexão WebSocket, o navegador do cliente inicia um servidor HTTP em primeiro lugar gostaria de solicitar que este pedido e os pedidos HTTP habituais, contém algumas informações de cabeçalho adicionais, em que as informações de cabeçalho adicional "Upgrade: WebSocket" indica que este é um protocolo de aplicação atualizar solicitação HTTP, o servidor analisa as informações de cabeçalho adicional é gerado mensagem de resposta de volta ao cliente, cliente de conexão WebSocket e servidor é estabelecida, ambos os lados podem, através do ligando livre transmissão canal de informação, e essa conexão Ela persiste até que o cliente ou do lado do servidor ativo do partido para fechar a ligação.

HTML cliente e JavaScript

Atualmente, a maioria dos navegadores suportam interfaces de WebSocket (), você pode tentar os exemplos os seguintes navegadores: Chrome, Mozilla, Opera e Safari.

o conteúdo do arquivo 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 instalação

Antes de executar o programa acima, precisamos criar um serviço de apoio WebSocket. De pywebsocket de download mod_pywebsocket, ou comando git utilidade para download:

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

apoio mod_pywebsocket necessária ambiente python

mod_pywebsocket de um Apache HTTP extensões WebSocket, etapas de instalação são os seguintes:

  • Descompacte o arquivo baixado.

  • Digite diretóriopywebsocket.

  • execute:

    $ python setup.py build
    $ sudo python setup.py install
    
  • Consulte a documentação:

    $ pydoc mod_pywebsocket

Open Service

Execute o seguinte comando empywebsocket diretório / mod_pywebsocket:

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

O comando acima irá abrir um número de porta de serviço 9998, use o -w para definir o echo_wsh.py manipulador de diretório localizado.

Agora podemos abrir o arquivo w3big_websocket.html criado anteriormente no navegador Chrome. Se o seu navegador suporta WebSocket (), clique em "Executar WebSocket", você pode ver todo o processo de cada etapa da janela pop-up, o processo de GIF de demonstração:

Uma vez que parar o serviço, ele irá aparecer "Conexão fechada ...."