HTML5 - WebSockets

WebSockets to dwukierunkowa technologia komunikacyjna nowej generacji dla aplikacji internetowych, która działa w jednym gnieździe i jest udostępniana za pośrednictwem interfejsu JavaScript w przeglądarkach zgodnych z HTML 5.

Gdy uzyskasz połączenie Web Socket z serwerem WWW, możesz wysyłać dane z przeglądarki do serwera, wywołując plik send() i odbierać dane z serwera do przeglądarki za pomocą pliku onmessage moduł obsługi zdarzeń.

Poniżej znajduje się API, które tworzy nowy obiekt WebSocket.

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

Tutaj pierwszy argument, url, określa adres URL, z którym należy się połączyć. Drugi atrybut, protokół, jest opcjonalny i jeśli występuje, określa protokół podrzędny, który serwer musi obsługiwać, aby połączenie zakończyło się pomyślnie.

Atrybuty WebSocket

Poniżej znajduje się atrybut obiektu WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Sr.No. Atrybut i opis
1

Socket.readyState

Atrybut readonly readyState reprezentuje stan połączenia. Może mieć następujące wartości -

  • Wartość 0 oznacza, że ​​połączenie nie zostało jeszcze nawiązane.

  • Wartość 1 oznacza, że ​​połączenie zostało nawiązane i komunikacja jest możliwa.

  • Wartość 2 oznacza, że ​​połączenie przechodzi przez uzgadnianie zamykające.

  • Wartość 3 oznacza, że ​​połączenie zostało zamknięte lub nie można go było otworzyć.

2

Socket.bufferedAmount

Atrybut tylko do odczytu bufferedAmount reprezentuje liczbę bajtów tekstu UTF-8, które zostały umieszczone w kolejce przy użyciu metody send ().

Wydarzenia WebSocket

Poniżej przedstawiono zdarzenia związane z obiektem WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Zdarzenie Obsługa zdarzeń Opis
otwarty Socket.onopen To zdarzenie występuje po ustanowieniu połączenia przez gniazdo.
wiadomość Socket.onmessage To zdarzenie występuje, gdy klient odbiera dane z serwera.
błąd Socket.onerror To zdarzenie występuje, gdy wystąpi jakikolwiek błąd w komunikacji.
blisko Socket.onclose To zdarzenie występuje, gdy połączenie jest zamknięte.

Metody WebSocket

Poniżej przedstawiono metody powiązane z obiektem WebSocket. Zakładając, że utworzyliśmy obiekt Socket, jak wspomniano powyżej -

Sr.No. Metoda i opis
1

Socket.send()

Metoda send (data) przesyła dane za pomocą połączenia.

2

Socket.close()

Metoda close () zostanie użyta do zakończenia dowolnego istniejącego połączenia.

Przykład WebSocket

WebSocket to standardowe dwukierunkowe gniazdo TCP między klientem a serwerem. Gniazdo jest uruchamiane jako połączenie HTTP, a następnie „uaktualnia” do gniazda TCP po uzgodnieniu HTTP. Po uzgodnieniu, każda ze stron może przesyłać dane.

Kod HTML i JavaScript po stronie klienta

W chwili pisania tego samouczka istnieje tylko kilka przeglądarek internetowych obsługujących interfejs WebSocket (). Możesz spróbować następującego przykładu z najnowszą wersją Chrome, Mozilla, Opera i 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>

Zainstaluj pywebsocket

Zanim przetestujesz powyższy program kliencki, potrzebujesz serwera obsługującego WebSocket. Pobierz mod_pywebsocket-xxxtar.gz z pywebsocket, który ma na celu udostępnienie rozszerzenia Web Socket dla serwera Apache HTTP i zainstaluj go, wykonując następujące kroki.

  • Rozpakuj i rozpakuj pobrany plik.

  • Wejdź do środka pywebsocket-x.x.x/src/ informator.

  • $ python setup.py build

  • $ sudo python setup.py install

  • Następnie przeczytaj dokument przez -

    • $ pydoc mod_pywebsocket

Spowoduje to zainstalowanie go w twoim środowisku Pythona.

Uruchom serwer

Przejdź do pywebsocket-x.x.x/src/mod_pywebsocket folder i uruchom następujące polecenie -

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

Spowoduje to uruchomienie nasłuchiwania serwera na porcie 9998 i użycie rozszerzenia handlers katalog określony opcją -w, w którym znajduje się nasze echo_wsh.py.

Teraz za pomocą przeglądarki Chrome otwórz plik HTML, który utworzyłeś na początku. Jeśli Twoja przeglądarka obsługuje WebSocket (), wtedy pojawi się ostrzeżenie informujące, że Twoja przeglądarka obsługuje WebSocket, a na końcu po kliknięciu „Uruchom WebSocket” otrzymasz wiadomość Goodbye wysłaną przez skrypt serwera.