Latest web development tutorials

HTML5 WebSocket

HTML5 WebSocket è un inizio fornita dalla comunicazione full-duplex su un unico protocollo connessione TCP.

Nel API WebSocket, il browser e il server solo per fare un'azione di stretta di mano, poi, tra il browser e il server sulla formazione di un fast-track. È possibile trasferire dati direttamente tra loro.

Browser invia al server tramite richiesta JavaScript per stabilire una connessione WebSocket, viene stabilita la connessione, il client e il server può essere collegato direttamente lo scambio di dati via TCP.

Quando si ottiene la connessione Web Socket, è possibile inviare i dati al server tramite il metodosend (), e di ricevere i dati restituiti dal server onMessageevento.

La seguente API WebSocket viene utilizzato per creare oggetti. 

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

È possibile che questo codice di primo parametro URL, specificare il collegamento URL. Il secondo parametro è il protocollo facoltativo che specifica accettabile sub-protocollo.

immobili WebSocket

Questi sono l'oggetto attributi WebSocket. Supponiamo di utilizzare il codice qui sopra per creare un oggetto Socket:

proprietà descrizione
Socket.readyState

Attributo di sola letturareadyState indica lo stato della connessione può avere i seguenti valori:

  • 0 - indica che la connessione non è stata stabilita.

  • 1 - indica che la connessione è stabilita, è in grado di comunicare.

  • 2 - indica che la connessione chiusa.

  • 3 - indica che la connessione è stata chiusa o la connessione non può essere aperto.

Socket.bufferedAmount

Attributo di sola letturabufferedAmount è stato send () sono posti in una coda di attesa per il trasferimento, ma non ha ancora emesso un UTF-8 byte di testo.

evento WebSocket

Ecco l'oggetto eventi WebSocket. Supponiamo di utilizzare il codice qui sopra per creare un oggetto Socket:

evento gestore di eventi descrizione
aperto Socket.onopen Attivato quando viene stabilita la connessione
messaggio Socket.onmessage Quando il client riceve i dati del server di attivazione
errore Socket.onerror Esso viene attivato quando si verifica un errore di comunicazione
vicino Socket.onclose Attiva quando la connessione chiusa

metodo WebSocket

Ecco l'oggetto metodi WebSocket. Supponiamo di utilizzare il codice qui sopra per creare un oggetto Socket:

modo descrizione
Socket.send ()

Utilizzare la connessione per inviare i dati

Socket.close ()

Chiudi connessione

esempio WebSocket

protocollo Natura WebSocket è un protocollo basato su TCP.

Al fine di stabilire una connessione WebSocket, il browser client avvia un server HTTP sarebbe prima di tutto desidero chiedere che questa richiesta e le solite richieste HTTP, contiene alcune informazioni di intestazione aggiuntive, in cui le informazioni di intestazione aggiuntiva "Aggiornamento: WebSocket" indica che si tratta di un protocollo di applicazione aggiornare richiesta HTTP, il server analizza le informazioni di intestazione aggiuntiva viene quindi generato un messaggio di risposta al client, il client di connessione WebSocket e viene stabilita del server, entrambe le parti possono, attraverso il collegamento di canale di trasmissione libero di informazioni, e questa connessione persiste fino a quando la parte attiva client o server-side per chiudere la connessione.

HTML e JavaScript client

Attualmente, la maggior parte dei browser supportano) interfacce (WebSocket, è possibile provare gli esempi nei seguenti browser: Chrome, Mozilla, Opera e Safari.

il contenuto dei file 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 installazione

Prima di eseguire il programma di cui sopra, abbiamo bisogno di creare un servizio di supporto WebSocket. Da pywebsocket scaricare mod_pywebsocket, o il comando git uso per il download: 

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

Supporto mod_pywebsocket ambiente python necessario

mod_pywebsocket di un estensioni Web Socket Apache HTTP, procedura di installazione sono i seguenti:

  • Decomprimere il file scaricato.

  • Inserisci directorypywebsocket.

  • Run: 

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

  • Vedere la documentazione: 

    $ pydoc mod_pywebsocket

Open Service

Eseguire il seguente comando nella directory/ mod_pywebsocket pywebsocket:

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

Il comando precedente si aprirà un numero di porta di servizio 9998, utilizzare la -w per impostare la echo_wsh.py gestore directory situata.

Ora siamo in grado di aprire il file w3big_websocket.html creato in precedenza nel browser Chrome. Se il browser supporta WebSocket (), fai clic su "Esegui WebSocket", si può vedere l'intero processo ogni passo della finestra pop-up, il processo di Gif demo:

Una volta che ci fermiamo il servizio, si aprirà "Connessione chiuso ...."