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

fixes

Browse source
This commit is contained in:
Ilya Kantor 2019-08-02 14:05:34 +03:00
parent e52705e012
commit f88a41b312
4 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,12 +36,13 @@ Here's an example:
let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
socket.onopen = function(e) {
alert("[open] Connection established, send the data -> server");
alert("[open] Connection established");
alert("Sending to server");
socket.send("My name is John");
};
socket.onmessage = function(event) {
alert(`[message] Data received: ${event.data} <- server`);
alert(`[message] Data received from server: ${event.data}`);
};
socket.onclose = function(event) {

7
5-network/11-websocket/demo.view/server.js
View file

@ -9,8 +9,9 @@ function accept(req, res) {
res.end();
return;
}
// can be Connection: keep-alive, Upgrade
if (req.headers.connection.match(/\bupgrade\b/i)) {
if (!req.headers.connection.match(/\bupgrade\b/i)) {
res.end();
return;
}
@ -20,8 +21,8 @@ function accept(req, res) {
function onConnect(ws) {
ws.on('message', function (message) {
let name = message.match(/\w+$/) || "Guest";
ws.send(`Hello, ${name}!`);
let name = message.match(/([\p{Alpha}\p{M}\p{Nd}\p{Pc}\p{Join_C}]+)$/gu) || "Guest";
ws.send(`Hello from server, ${name}!`);
setTimeout(() => ws.close(1000, "Bye!"), 5000);
});

22
5-network/11-websocket/websocket-handshake.svg
View file

@ -9,27 +9,27 @@
<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>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="298" 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>
<tspan x="340" 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>
<path d="M363,81 L363,332.5" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M349,141 L68,141 L68,139 L349,139 L349,133 L363,140 L349,147 L349,141 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M83,210 L364,210 L364,212 L83,212 L83,218 L69,211 L83,204 L83,210 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="HTTP-request" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="22" fill="#8A704D">
<tspan x="142.515137" y="130">HTTP-request</tspan>
<tspan x="171.515137" y="130">HTTP-request</tspan>
</text>
<text id="&quot;Hey,-server,-let's" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="22" fill="#8A704D">
<tspan x="74.3745117" y="161">"Hey, server, let's talk WebSocket?"</tspan>
<tspan x="103.374512" y="161">"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>
<tspan x="166.418945" y="204">HTTP-response</tspan>
<tspan x="191.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>
<path id="Line-Copy-2" d="M81,278 L83,278 L83,280 L81,280 L81,286 L67,279 L81,272 L81,278 Z M363,279 L349,286 L349,272 L363,279 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 M295,280 L295,278 L299,278 L299,280 L295,280 Z M301,280 L301,278 L305,278 L305,280 L301,280 Z M307,280 L307,278 L311,278 L311,280 L307,280 Z M313,280 L313,278 L317,278 L317,280 L313,280 Z M319,280 L319,278 L323,278 L323,280 L319,280 Z M325,280 L325,278 L329,278 L329,280 L325,280 Z M331,280 L331,278 L335,278 L335,280 L331,280 Z M337,280 L337,278 L341,278 L341,280 L337,280 Z M343,280 L343,278 L347,278 L347,280 L343,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>
<tspan x="151.524414" y="272">WebSocket protocol</tspan>
</text>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Before After
Before After