jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

4
5-network/05-fetch-crossorigin/article.md
View file

@ -149,7 +149,7 @@ The browser plays the role of a trusted mediator here:
1. It ensures that the corrent `Origin` is sent with a cross-domain request.
2. If checks for correct `Access-Control-Allow-Origin` in the response, if it is so, then JavaScript access, otherwise forbids with an error.
![](xhr-another-domain.png)
![](xhr-another-domain.svg)
Here's an example of a permissive server response:
```
@ -215,7 +215,7 @@ If the server agrees to serve the requests, then it should respond with status 2
- The response header `Access-Control-Allow-Headers` must have a list of allowed headers.
- Additionally, the header `Access-Control-Max-Age` may specify a number of seconds to cache the permissions. So the browser won't have to send a preflight for subsequent requests that satisfy given permissions.
![](xhr-preflight.png)
![](xhr-preflight.svg)
Let's see how it works step-by-step on example, for a cross-domain `PATCH` request (this method is often used to update data):

BIN
5-network/05-fetch-crossorigin/cors-gmail-messages.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

54
5-network/05-fetch-crossorigin/cors-gmail-messages.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
5-network/05-fetch-crossorigin/cors-gmail-messages@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
5-network/05-fetch-crossorigin/xhr-another-domain.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

51
5-network/05-fetch-crossorigin/xhr-another-domain.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="610px" height="411px" viewBox="0 0 610 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>xhr-another-domain.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="xhr-another-domain.svg">
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="2" y="16" width="128" height="64"></rect>
<text id="JavaScript" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="36" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="16" width="128" height="64"></rect>
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="273" y="50">Browser</tspan>
</text>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="481" y="16" width="128" height="64"></rect>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="521" y="50">Server</tspan>
</text>
<path d="M67,81 L67,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M303,81 L303,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M546,81 L546,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M284,141 L67,141 L67,139 L284,139 L284,133 L298,140 L284,147 L284,141 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Origin:-https://java" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="26" fill="#8A704D">
<tspan x="331.3125" y="206">Origin: https://javascript.info</tspan>
</text>
<text id="HTTP-request" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="26" fill="#8A704D">
<tspan x="378.015137" y="169">HTTP-request</tspan>
</text>
<text id="fetch()" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="154" y="128">fetch()</tspan>
</text>
<text id="HTTP-response" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="27" fill="#8A704D">
<tspan x="374.918945" y="250">HTTP-response</tspan>
</text>
<text id="Access-Control-Allow" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="332" y="288">Access-Control-Allow-Origin: </tspan>
<tspan x="337.130371" y="306">* OR https://javascript.info</tspan>
</text>
<text id="if-the-header-allows" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="92" y="322">if the header allows, success,</tspan>
</text>
<text id="otherwise-fail" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="142" y="356">otherwise fail</tspan>
</text>
<path id="Line" d="M531,188 L305,188 L305,186 L531,186 L531,180 L545,187 L531,194 L531,188 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M317,264 L545,264 L545,266 L317,266 L317,272 L303,265 L317,258 L317,264 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M85,332 L302,332 L302,334 L85,334 L85,340 L71,333 L85,326 L85,332 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
5-network/05-fetch-crossorigin/xhr-another-domain@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
5-network/05-fetch-crossorigin/xhr-preflight.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

82
5-network/05-fetch-crossorigin/xhr-preflight.svg Normal file
View file

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="610px" height="633px" viewBox="0 0 610 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>xhr-preflight.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="xhr-preflight.svg">
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="1" y="16" width="128" height="64"></rect>
<text id="JavaScript" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="33" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="240" y="16" width="128" height="64"></rect>
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="278" y="48">Browser</tspan>
</text>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="480" y="16" width="128" height="64"></rect>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="523" y="50">Server</tspan>
</text>
<path d="M66,82 L66,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M305,82 L305,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M545,82 L545,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M287.5,140.5 L66.5,140.5 L66.5,138.5 L287.5,138.5 L287.5,132.5 L301.5,139.5 L287.5,146.5 L287.5,140.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="fetch()" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="164" y="130">fetch()</tspan>
</text>
<text id="OPTIONS-Origin-Acces" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="395.000977" y="174">OPTIONS</tspan>
<tspan x="405.080566" y="192">Origin</tspan>
<tspan x="320.366211" y="210">Access-Control-Request-Method</tspan>
<tspan x="318.5" y="228">Access-Control-Request-Headers</tspan>
</text>
<path id="Line" d="M528.5,293.5 L307.5,293.5 L307.5,291.5 L528.5,291.5 L528.5,285.5 L542.5,292.5 L528.5,299.5 L528.5,293.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="200-OK" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="402.913574" y="287">200 OK</tspan>
<tspan x="330.866211" y="305">Access-Control-Allow-Method</tspan>
<tspan x="329" y="323">Access-Control-Allow-Headers</tspan>
<tspan x="347.82959" y="341">Access-Control-Max-Age</tspan>
</text>
<path id="Line-4" d="M527.5,180.5 L306.5,180.5 L306.5,178.5 L527.5,178.5 L527.5,172.5 L541.5,179.5 L527.5,186.5 L527.5,180.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M322.5,500.5 L543.5,500.5 L543.5,502.5 L322.5,502.5 L322.5,508.5 L308.5,501.5 L322.5,494.5 L322.5,500.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M90,552 L304,552 L304,555 L90,555 L90,563 L71,553.5 L90,544 L90,552 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Access-Control-Allow" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="336" y="524">Access-Control-Allow-Origin</tspan>
</text>
<text id="Main-HTTP-response" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="355" y="495">Main HTTP-response</tspan>
</text>
<text id="otherwise-error" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="130" y="569">otherwise error</tspan>
</text>
<text id="if-allowed:-success," font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="116" y="545">if allowed: success,</tspan>
</text>
<path id="Line-5" d="M527.5,436.5 L306.5,436.5 L306.5,434.5 L527.5,434.5 L527.5,428.5 L541.5,435.5 L527.5,442.5 L527.5,436.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Origin" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="405" y="456">Origin</tspan>
</text>
<text id="Main-HTTP-request" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="360" y="425">Main HTTP-request</tspan>
</text>
<text id="preflight" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="205.943359" y="186">preflight</tspan>
</text>
<text id="if-allowed" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="193.609375" y="441">if allowed</tspan>
</text>
<text id="1" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="186">1</tspan>
</text>
<text id="2" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="302">2</tspan>
</text>
<text id="3" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="443">3</tspan>
</text>
<text id="4" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="509">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
5-network/05-fetch-crossorigin/xhr-preflight@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 132 KiB

2
5-network/07-url/article.md
View file

@ -48,7 +48,7 @@ alert(url.pathname); // /url
Here's the cheatsheet:
![](url-object.png)
![](url-object.svg)
- `href` is the full url, same as `url.toString()`
- `protocol` ends with the colon character `:`

BIN
5-network/07-url/url-object.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

54
5-network/07-url/url-object.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="658px" height="246px" viewBox="0 0 658 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>url-object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="url-object.svg">
<path d="M2,38 L2,218" id="Line-Copy" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M69,132 L69,218" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M96,112 L96,218" id="Line-Copy-6" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M3,38 L652,38" id="Line-Copy-10" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M3,74 L267,74" id="Line-Copy-11" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M214,132 L214,218" id="Line-Copy-7" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M203,132 L203,218" id="Line-Copy-8" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M268,38 L268,218" id="Line-Copy-9" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M399,132 L399,218" id="Line-Copy-13" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M582,132 L582,218" id="Line-Copy-14" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M652,39 L652,218" id="Line-Copy-15" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<text id="href" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="297" y="33">href</tspan>
</text>
<text id="origin" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="103" y="68">origin</tspan>
</text>
<path d="M96,112 L266,112" id="Line-Copy-12" stroke="#EE6B47" stroke-width="2" fill="#EE6B47" stroke-linecap="square" stroke-dasharray="1"></path>
<text id="host" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="153" y="107">host</tspan>
</text>
<text id="proto-col" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="10" y="152">proto</tspan>
<tspan x="19.6" y="170">col</tspan>
</text>
<text id="http://site.com:8080" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="2.4000001" fill="#000000">
<tspan x="4.29999771" y="209">http://site.com:8080/path/page?p1=v1&amp;p2=v2… #has</tspan>
<tspan x="637.900002" y="209">h</tspan>
</text>
<text id="hostname" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="107" y="152">hostname</tspan>
</text>
<text id="port" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="221" y="152">port</tspan>
</text>
<text id="pathname" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="294" y="152">pathname</tspan>
</text>
<text id="search" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="456" y="152">search</tspan>
</text>
<text id="hash" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="597" y="152">hash</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
5-network/07-url/url-object@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB

2
5-network/10-long-polling/article.md
View file

@ -33,7 +33,7 @@ The flow:
The situation when the browser sent a request and has a pending connection with the server, is standard for this method. Only when a message is delivered, the connection is reestablished.
![](long-polling.png)
![](long-polling.svg)
If the connection is lost, because of, say, a network error, the browser immediately sends a new request.

BIN
5-network/10-long-polling/long-polling.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

56
5-network/10-long-polling/long-polling.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="521px" height="320px" viewBox="0 0 521 320" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>long-polling.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="long-polling.svg">
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#000000">
<tspan x="27" y="74">Browser</tspan>
</text>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#000000">
<tspan x="31" y="226">Server</tspan>
</text>
<path id="Line" d="M457.091247,80.5 L450.319082,76.6906571 L450.809343,75.8190816 L460.019864,81 L450.809343,86.1809184 L450.319082,85.3093429 L457.091247,81.5 L66.5,81.5 L66.5,80.5 L457.091247,80.5 Z" fill="#000000" fill-rule="nonzero"></path>
<path id="Line" d="M457.091247,205 L450.319082,201.190657 L450.809343,200.319082 L460.019864,205.5 L450.809343,210.680918 L450.319082,209.809343 L457.091247,206 L65.5,206 L65.5,205 L457.091247,205 Z" fill="#000000" fill-rule="nonzero"></path>
<text id="request" transform="translate(113.291381, 143.266023) rotate(76.000000) translate(-113.291381, -143.266023) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" line-spacing="18" fill="#8A704D">
<tspan x="83.8913811" y="146.266023">request</tspan>
</text>
<text id="connection-hangs" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="126" y="227">connection</tspan>
<tspan x="142.519043" y="245">hangs</tspan>
</text>
<text id="connection-breaks-en" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="186.209961" y="264">connection breaks</tspan>
<tspan x="196.598633" y="282">end of request</tspan>
</text>
<path id="Line-3" d="M115.697507,193.140039 L88.2907773,81.2666649 L90.2333351,80.7907773 L117.640065,192.664151 L123.467739,191.236488 L120,206.5 L109.869834,194.567702 L115.697507,193.140039 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="data" transform="translate(206.380494, 143.266023) rotate(284.000000) translate(-206.380494, -143.266023) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" line-spacing="18" fill="#8A704D">
<tspan x="189.580494" y="146.266023">data</tspan>
</text>
<path id="Line-2" d="M230.540283,95.776351 L200.704616,206.226179 L198.773821,205.704616 L228.609487,95.2547877 L222.8171,93.6900979 L233.225828,82 L236.332669,97.3410408 L230.540283,95.776351 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2-Copy" d="M374.540283,95.776351 L344.704616,206.226179 L342.773821,205.704616 L372.609487,95.2547877 L366.8171,93.6900979 L377.225828,82 L380.332669,97.3410408 L374.540283,95.776351 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="request-copy" transform="translate(260.291381, 143.266023) rotate(76.000000) translate(-260.291381, -143.266023) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" line-spacing="18" fill="#8A704D">
<tspan x="230.891381" y="146.266023">request</tspan>
</text>
<text id="connection-hangs-copy" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="270" y="227">connection</tspan>
<tspan x="286.519043" y="245">hangs</tspan>
</text>
<path id="Line-3-Copy-3" d="M262.697507,193.140039 L235.290777,81.2666649 L237.233335,80.7907773 L264.640065,192.664151 L270.467739,191.236488 L267,206.5 L256.869834,194.567702 L262.697507,193.140039 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="request-copy-2" transform="translate(404.291381, 143.266023) rotate(76.000000) translate(-404.291381, -143.266023) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" line-spacing="18" fill="#8A704D">
<tspan x="374.891381" y="146.266023">request</tspan>
</text>
<path id="Line-3-Copy-4" d="M406.697507,193.140039 L379.290777,81.2666649 L381.233335,80.7907773 L408.640065,192.664151 L414.467739,191.236488 L411,206.5 L400.869834,194.567702 L406.697507,193.140039 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="data-copy" transform="translate(350.380494, 143.266023) rotate(284.000000) translate(-350.380494, -143.266023) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" line-spacing="18" fill="#8A704D">
<tspan x="333.580494" y="146.266023">data</tspan>
</text>
<path d="M235,40.75 L235,241.75" id="Line" stroke="#979797" stroke-linecap="square" stroke-dasharray="3,3"></path>
<text id="connection-breaks-en-copy" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="330.209961" y="264">connection breaks</tspan>
<tspan x="340.598633" y="282">end of request</tspan>
</text>
<path d="M379,40.75 L379,241.75" id="Line-Copy" stroke="#979797" stroke-linecap="square" stroke-dasharray="3,3"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
5-network/10-long-polling/long-polling@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 48 KiB

2
5-network/11-websocket/article.md
View file

@ -75,7 +75,7 @@ When `new WebSocket(url)` is created, it starts connecting immediately.
During the connection the browser (using headers) asks the server: "Do you support Websocket?" And if the server replies "yes", then the talk continues in WebSocket protocol, which is not HTTP at all.
![](websocket-handshake.png)
![](websocket-handshake.svg)
Here's an example of browser request for `new WebSocket("wss://javascript.info/chat")`.

BIN
5-network/11-websocket/websocket-handshake.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

34
5-network/11-websocket/websocket-handshake.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="429px" height="404px" viewBox="0 0 429 404" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>websocket-handshake.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="websocket-handshake.svg">
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="2" y="16" width="128" height="64"></rect>
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="40" y="49">Browser</tspan>
</text>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="249" y="16" width="128" height="64"></rect>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="291" y="49">Server</tspan>
</text>
<path d="M67,81 L67,331.5" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M314,81 L314,332.5" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M299,141 L68,141 L68,139 L299,139 L299,133 L313,140 L299,147 L299,141 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="HTTP-request-&quot;Hey,-s" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="22" fill="#8A704D">
<tspan x="142.515137" y="132">HTTP-request</tspan>
<tspan x="74.3745117" y="154">"Hey, server, let's talk WebSocket?"</tspan>
</text>
<path id="Line-Copy" d="M298,212 L66,212 L66,210 L298,210 L298,204 L312,211 L298,218 L298,212 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="HTTP-response-&quot;Okay!" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="22" fill="#8A704D">
<tspan x="137.418945" y="204">HTTP-response</tspan>
<tspan x="162.97168" y="226">"Okay!"</tspan>
</text>
<path id="Line-Copy-2" d="M81,278 L83,278 L83,280 L81,280 L81,286 L67,279 L81,272 L81,278 Z M299,280 L295,280 L295,278 L299,278 L299,272 L313,279 L299,286 L299,280 Z M85,280 L85,278 L89,278 L89,280 L85,280 Z M91,280 L91,278 L95,278 L95,280 L91,280 Z M97,280 L97,278 L101,278 L101,280 L97,280 Z M103,280 L103,278 L107,278 L107,280 L103,280 Z M109,280 L109,278 L113,278 L113,280 L109,280 Z M115,280 L115,278 L119,278 L119,280 L115,280 Z M121,280 L121,278 L125,278 L125,280 L121,280 Z M127,280 L127,278 L131,278 L131,280 L127,280 Z M133,280 L133,278 L137,278 L137,280 L133,280 Z M139,280 L139,278 L143,278 L143,280 L139,280 Z M145,280 L145,278 L149,278 L149,280 L145,280 Z M151,280 L151,278 L155,278 L155,280 L151,280 Z M157,280 L157,278 L161,278 L161,280 L157,280 Z M163,280 L163,278 L167,278 L167,280 L163,280 Z M169,280 L169,278 L173,278 L173,280 L169,280 Z M175,280 L175,278 L179,278 L179,280 L175,280 Z M181,280 L181,278 L185,278 L185,280 L181,280 Z M187,280 L187,278 L191,278 L191,280 L187,280 Z M193,280 L193,278 L197,278 L197,280 L193,280 Z M199,280 L199,278 L203,278 L203,280 L199,280 Z M205,280 L205,278 L209,278 L209,280 L205,280 Z M211,280 L211,278 L215,278 L215,280 L211,280 Z M217,280 L217,278 L221,278 L221,280 L217,280 Z M223,280 L223,278 L227,278 L227,280 L223,280 Z M229,280 L229,278 L233,278 L233,280 L229,280 Z M235,280 L235,278 L239,278 L239,280 L235,280 Z M241,280 L241,278 L245,278 L245,280 L241,280 Z M247,280 L247,278 L251,278 L251,280 L247,280 Z M253,280 L253,278 L257,278 L257,280 L253,280 Z M259,280 L259,278 L263,278 L263,280 L259,280 Z M265,280 L265,278 L269,278 L269,280 L265,280 Z M271,280 L271,278 L275,278 L275,280 L271,280 Z M277,280 L277,278 L281,278 L281,280 L277,280 Z M283,280 L283,278 L287,278 L287,280 L283,280 Z M289,280 L289,278 L293,278 L293,280 L289,280 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="WebSocket-protocol" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="122.524414" y="272">WebSocket protocol</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
5-network/11-websocket/websocket-handshake@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB