📜 ⬆️ ⬇️

WebSockets - high-grade asynchronous web

A couple of weeks ago, Google Chromium developers published a news about WebSocket technology support. In the IT burzhuneta news has the effect of a bombshell. On the same day, various very famous IT specialists tried out the new product and left rave reviews on their blogs. Immediately, the developers of a wide variety of servers / libraries / frameworks (including Apache, EventMachine, Twisted, MochiWeb , etc.) announced that WebSoket support will be implemented in their products soon.
What is so interesting technology promises us? In my opinion, WebSocket is the most radical extension of the HTTP protocol since its appearance. This is not a trinket, it is an HTTP paradigm shift . Initially, a synchronous protocol built on the “request-response” model becomes fully asynchronous and symmetric . Now there are no client and server with fixed roles, but there are two equal participants in the data exchange. Each works on its own, and when you need to send data to another. Sent - and went on, nothing to wait. The second side will answer when it wants - maybe not immediately, or it may not respond at all. The protocol gives you complete freedom to exchange data, you decide how to use it.

I believe that web sockets will come to court if you are developing:
- Web applications with intensive data exchange, demanding to the speed of exchange and channel;
- applications following standards;
- "long-playing" web applications;
- complex applications with many different asynchronous blocks on the page;
- cross-domain applications.


')

And how does it work?



Very simple! As soon as your page decided that it wants to open a web socket to the server, it creates a special javascript object:
  1. <script>
  2. ws = new WebSocket("ws://site.com/demo");
  3.  
  4. // -:
  5.  
  6. // , :
  7. ws.onopen = function() { alert("Connection opened...") };
  8.  
  9. // -
  10. ws.onclose = function() { alert("Connection closed...") };
  11.  
  12. // , , - , - -
  13. ws.onmessage = function(evt) { $("#msg").append("<p>"+evt.data+"</p>"); };
  14.  
  15. </script>
* This source code was highlighted with Source Code Highlighter.


?

HTTP-. TCP 80 GET-:
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: site.com
Origin: http://site.com


, :
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://site.com
WebSocket-Location: ws://site.com/demo



, TCP- . — «» , .
- , - :
0x00, < UTF-8>, 0xFF

— , 0x00, — 0xFF. — , ! , : XML, JSON, .
, , «» - onmessage.

, 95%. AJAX-, . . TCP- — — — .
:
, - UTF-8! , .



?

WebSockets . - :
0x80, < - >, < >

« »? , . : (0) (1), 7 . : - 0x80, «», — , «», , 0 . — «». «» . . 7- .

, - — GIF 43 :
0x80, 0x2B, < >

160 2 :
0x80, 0x81, 0x20, < >

, ?

?



, TCP- — , , -. ( - , 1 TCP- . :) ).
, — , , .


WebSockets Comet — Bayuex, LongPolling, MultiPart . , , , . : «» . «» - «» — .. ( ) 2, , . , , . , - — - -. , — , .

, 2 : AJAX WebSockets. - — , -. , , -, .. . , . : — . - onmessage . - , , . ? LongPolling ( ) .


HTTP - . , , .. «» . , . , , TCP-. , .

-

HTTP . - , , — Bayeux Protocol.
, -. , . — ( ) — — . , .

-

« » AJAX- — - . , . . WebSockets . «---», «-», , . , Origin. websocket-. , .
! - !

?

!

UPDATE: - www.mibbit.com ( ).
PHP- WebSocket phpDaemon, WebSocketServer. , «pong» () «ping» — ExampleWebSocket.
tcpdump , .


? . « » -, . , , (!) . WebKit — Safari. .

, ?

web-socket-js -. , - . .


, , . - . « AJAX», - WebSockets .

...


, . ...

: WebSockets —

Source: https://habr.com/ru/post/79038/


All Articles