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.