Синхронність. Асинхронність

Синхронність
VS
Асинхронність

0.5 с
1.0 с
1.5 с
2.0 с
2.5 с
3.0 с
3.5 с
4.0 с
4.5 с
Request
Func()
Foreach(){}
Send responce
Email
SMS
Послідовна модель

0.5 с
1.0 с
1.5 с
2.0 с
2.5 с
3.0 с
3.5 с
4.0 с
4.5 с
Request
Func()
Foreach(){}
Send responce
Email
SMS
Паралельна модель

Асинхронно – паралельно?

Синхронний однопотоковий
Синхронний багатопотоковий
Асинхронний однопотоковий
Асинхронний багатопотоковий

Відправка SMS
Відправити E-mail
Запис в БД
Відправка SMS
Відправити E-mail
Запис в БД
Відправка SMS
Відправити E-mail
Запис в БД
Відправка SMS
Відправити E-mail
Запис в БД
Відправка SMS
Відправити E-mail
Запис в БД

Почнемо з JS

…
...
…
Стартуєм:
<br>alert( ‘1' ); <br>alert( ‘2' ); <br>alert( ‘3' );</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1058072/slide-8.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="… ... … Стартуєм: alert( ‘1&#39; ); alert( ‘2&#39; ); alert( ‘3&#39; ); Фінішуєм! …" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/1058072/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/1058072/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/1058072/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1058072/slide-8.jpg 1440w" class="slides-image"><!----><div class="slides-content"><br>
Фінішуєм!
…

…
...
…
...

Коротко про CSS

…
$(document).ready(function() {
$("head").append("
");
})
...

PHP традиційно синхронний
але націлений на зміну цієї ситуації
-декілька функції “з коробки”(curl_multi_select() , stream_select())
-декілька бібліотек(Async PHP, ReactPHP, Swoole)

curl_multi_select()
$ch1 = curl_init(); // Створюєм образ (1)
$ch2 = curl_init(); // Створюєм образ (2)
curl_setopt($ch1, CURLOPT_URL, " http://admin.drukarka.com.ua/"); // Встановлюєм URL та опції (1)
curl_setopt($ch1, CURLOPT_HEADER, 0);
curl_setopt($ch2, CURLOPT_URL, " http://comfart.bluebird.team/ "); // Встановлюєм URL та опції (2)
curl_setopt($ch2, CURLOPT_HEADER, 0);
$mh = curl_multi_init(); // Створюєм набір дескрипторів
curl_multi_add_handle($mh,$ch1); // Вставляємо у дескриптор данні (1)
curl_multi_add_handle($mh,$ch2); // Вставляємо у дескриптор данні (2)
$active = null;
do {
$mrc = curl_multi_exec($mh, $active);
} while ($mrc == CURLM_CALL_MULTI_PERFORM);
…

stream_select()

Async
<…>
Websocket

0.5 с
1.0 с
1.5 с
2.0 с
2.5 с
3.0 с
3.5 с
4.0 с
4.5 с
Як працює HTTP?
Клієнт
Сервер
Влад
відправив повідомлення: «Hello bluebird!»
Є повідомлення?
Немає!
Є повідомлення?
Немає!
Є повідомлення?
Є!
Hello bluebird!
false
false
false
false
true

0.5 с
1.0 с
1.5 с
2.0 с
2.5 с
3.0 с
3.5 с
4.0 с
4.5 с
Як працює Websocket?
Клієнт
Сервер
Влад
відправив повідомлення: «Hello bluebird!»
Дай мені знати, як будеш мати повідомлення!
Є!
Hello bluebird!
fakse
true

Підтримка в браузерах

0.5 с
1.0 с
1.5 с
2.0 с
2.5 с
3.0 с
3.5 с
4.0 с
4.5 с
Як працює Websocket?
Клієнт
Сервер
HandShake
(HTTP upgrade)
Connection opened
Connection closed
Browser
closed

socket.onopen = function() {
alert(" З’єднання встановленно!");
};
socket.onclose = function(event) { if (event.wasClean) {
alert(‘З’єднання закрито чисто!');
} else {
alert('Обрив з’єднання!');
}
alert('Код: ' + event.code + ' причина: ' + event.reason);
};
socket.onmessage = function(event) {
alert(“Отриманно данні: " + event.data);
};
socket.onerror = function(error) {
alert(“Помилка: " + error.message);
};

use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use GSoares\RatchetChat\Chat;
require dirname(__DIR__) . '/vendor/autoload.php';
$server = IoServer::factory(
new HttpServer( new WsServer(
new Chat()
)
),
8080
);
$server->run();

public function __construct() {
$this->clients = new \SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo "New connection! ({$conn->resourceId})\n";
}
public function onMessage(ConnectionInterface $from, $msg) {
$numRecv = count($this->clients) - 1;
echo $from->resourceId, $msg, $numRecv;
foreach ($this->clients as $client) {
if ($from !== $client) {
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo $conn->resourceId . “ disconnected";
}
public function onError(ConnectionInterface $conn, \Exception $e) {
echo $e->getMessage();
$conn->close();
}

Apache vs Nginx