Client-Server Communication

Andrii Komarnitskyi

@komarnitskyi

Хто клієнт а хто сервер?

Клієнт

Клієнт - це звичайні користувачі які підключені до мережі і здійснюють доступ через певне ПО(напр. браузер).

Сервер

Віддалений комп'ютер із постійним(?) стабільним(?) швидким(?) підключенням до мережі, на якому зберігаються сайти чи додатки.

Довга дорога одного запиту

Що робить браузер?

• Надсилає запит на DNS (8.8.8.8) домен до якого звертаються
• DNS повертає IP адресу сервера на якому цей домен знаходиться
• Браузер надсилає HTTP запит на сервер, вказуючи копію якого сайту він хоче отримати
• Спеціальне ПО (Apache, nginx, etc.) перенаправляють запит саме в ту папку на сервері де лежить потрібний нам сайт

HTTP

HyperText Transfer Protocol

Протокол досі актуальний, хоча був розроблений ще у 90х роках для передачі гіпертексту

HTTPS

HyperText Transfer Protocol Secure

Використання HTTPS забезпечує шифрування всіх заповідей/відповідей між клієнтом та сервером

Яким чином спілкуємося із сервером?

• XMLHttpRequest
• JSONP
• Fetch

AJAX

Asynchronous JavaScript and XML

CORS

Cross-origin resource sharing

• Same Origin Policy, політика одинакового джерела
  • протокол
  • домен
  • порт
• Access-Control-Allow-Origin: http://youdomain.com

fetch

fetch

• method – метод запиту
• headers – заголовки запиту {}
• body – тіло запиту
• mode – same-origin | no-cors | cors
• credentials – omit | same-origin | include
• cache – default | no-store | reload | no-cache | force-cache
• redirect – follow | error

fetch

            const promise = fetch(url[, options]);
            promise
                .then(response => {
                    console.log(response);
                })
                .catch(console.error)
        

Axios

Axios

Axios

            import axios from 'axios';
             
            axios.get(url)
            axios.put(url, data)
            axios.post(url, data)
            axios.delete(url)
        

Власне комунікація

• XML-RPC
• SOAP
• REST
• GraphQL
• ...

Поговоримо про REST

Чому? Тому що це найбільш використовуваний підхід (у різних імплементаціях) до комунікації між клієнтом та сервером

REST

Representational State Transfer

Що нам потрібно?

• HTTP методи
  • OPTIONS - інформаційний
  • GET - Отримати данні
  • POST - Записати данні
  • PUT - Оновити данні
  • DELETE - видалити данні

Що нам потрібно?

• HTTP статус коди
  • 1** - Інформаційні
  • 2** - Успішні
  • 3** - Перенаправлення
  • 4** - Клієнтська помилка
  • 5** - Серверна помилка

Популярні статус-коди

• 200 OK
• 201 Created
• 301 Moved Permanently
• 302 Moved Temporarily

Популярні статус-коди

• 400 Bad Request
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• 500 Internal Server Error
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Timeout

Статус код - 418

Отримати всіх користувачів

GET: /users

Отримати користувача із id === :id

GET: /users/:id

Отримати адресу користувача із :id

GET: /users/:id/address