Latest web development tutorials

HTML5 websocket

HTML5 websocket jest początek dostarczone przez full-duplex komunikacji za pośrednictwem pojedynczego protokołu połączenia TCP.

W API websocket, przeglądarka i serwer po prostu wykonać akcję uścisk dłoni, a następnie pomiędzy przeglądarką a serwerem w sprawie utworzenia szybkiej ścieżki. Można przesyłać dane bezpośrednio między sobą.

Przeglądarka wysyła do serwera poprzez żądanie JavaScript, żeby nawiązać połączenie websocket, połączenie zostanie ustanowione, klient i serwer może być podłączony bezpośrednio do wymiany danych za pośrednictwem protokołu TCP.

Po uzyskaniu połączenia websocket można wysyłać dane do serwera za pomocą metodysend () i otrzymywać dane zwrócone przez serwer onmessagezdarzenia.

Poniższy websocket API służy do tworzenia obiektów. 

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

Powyższy kod pierwszy parametr url, określić połączenie URL. Drugi parametr jest opcjonalny protokół, który określa dopuszczalną sub-protokół.

Obiekt websocket

Są przedmiotem atrybuty websocket. Załóżmy, że używamy powyższy kod w celu utworzenia obiektu Socket:

nieruchomość opis
Socket.readyState

Tylko do odczytu atrybutówreadyState wskazuje stan połączenia może mieć następujące wartości:

  • 0 - wskazuje, że połączenie nie zostało ustalone.

  • 1 - wskazuje, że połączenie zostanie ustanowione, może się komunikować.

  • 2 - wskazuje, że połączenie jest zamknięta.

  • 3 - wskazuje, że połączenie zostało zamknięte lub połączenie nie może zostać otwarty.

Socket.bufferedAmount

Tylko do odczytu atrybutówbufferedAmount został send () są umieszczane w kolejce czeka na przeniesienie, ale nie został jeszcze wydany UTF-8 bajtów tekstu.

impreza websocket

Oto obiekt zdarzenia websocket. Załóżmy, że używamy powyższy kod w celu utworzenia obiektu Socket:

wydarzenie obsługi zdarzenia opis
otwarte Socket.onopen Wyzwalane, gdy połączenie zostanie ustanowione
wiadomość Socket.onmessage Gdy klient otrzymuje dane serwera wyzwalania
błąd Socket.onerror Jest on uruchamiany, gdy wystąpi błąd komunikacji
blisko Socket.onclose Wyzwalane, gdy połączenie zamknięte

metoda websocket

Oto przedmiot metody websocket. Załóżmy, że używamy powyższy kod w celu utworzenia obiektu Socket:

sposób opis
Socket.send ()

Za pomocą tego połączenia można wysyłać dane

Socket.close ()

Zamyka połączenie

instancja websocket

Protokół Natura websocket jest protokół TCP oparte.

W celu ustanowienia połączenia websocket przeglądarka klient inicjuje serwer HTTP najpierw chciałbym zwrócić się z tą prośbą do zwykłego żądania HTTP, zawiera pewne dodatkowe informacje nagłówka, w którym dodatkowe informacje nagłówka "Upgrade: websocket" wskazuje, że jest to protokół aplikacji uaktualnić żądania HTTP, serwer analizuje dodatkowe informacje nagłówka jest wtedy generowany komunikat odpowiedzi z powrotem do klienta, klient i serwer websocket połączenie zostanie ustanowione, obie strony mogą, za pośrednictwem kanału łączącego swobodnego przekazywania informacji, a związku z tym To utrzymuje się aż do aktywnego partii klienta lub po stronie serwera, aby zakończyć połączenie.

Klient HTML i JavaScript

Obecnie większość przeglądarek obsługuje websocket (interfejsy), można spróbować przykłady w następujących przeglądarek: Chrome, Mozilla, Opera i Safari.

w3big_websocket.html zawartość pliku 

<!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 Instalacja

Przed wykonaniem powyższy program, musimy stworzyć usługę wsparcia websocket. Od pywebsocket pobierania mod_pywebsocket lub polecenia git użytku do pobrania: 

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

Wsparcie mod_pywebsocket potrzebne środowiska python

mod_pywebsocket z Apache HTTP rozszerzeń websocket, kroki instalacji są następujące:

  • Rozpakuj pobrany plik.

  • Podaj katalogpywebsocket.

  • Run: 

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

  • Zobacz dokumentację: 

    $ pydoc mod_pywebsocket

usługa otwarta

Wykonaj następujące polecenie wpywebsocket katalogu / mod_pywebsocket:

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

Powyższe polecenie spowoduje otwarcie numer portu usługi 9998, użyj -w ustawić echo_wsh.py uchwytu katalogu znajduje.

Teraz możemy otworzyć utworzony wcześniej w przeglądarce Chrome w3big_websocket.html pliku. Jeżeli Twoja przeglądarka obsługuje websocket (), kliknij przycisk "Uruchom websocket", można zobaczyć cały proces każdy etap okna pop-up, proces Gif demo:

Kiedy zatrzymać usługę, to pop-up "Połączenie zamknięte ...."