Технології у браузері: як працюють WebSocket, WebRTC та WebGPU

Сучасні вебзастосунки перестали бути простими HTML-сторінками з текстом та зображеннями. Сьогодні браузери підтримують безліч вбудованих технологій, які раніше вимагали сторонніх рішень, наприклад, Flash або окремі застосунки. 

Курс з вивчення JavaScript

Можете пройти наш безкоштовний курс з вивчення JavaScript

WebSocket: постійне з'єднання між клієнтом і сервером

WebSocket — це протокол, який дозволяє встановлювати двостороннє з'єднання між клієнтом і сервером. На відміну від традиційного HTTP, де кожне повідомлення вимагає окремого запиту і відповіді, WebSocket дозволяє обмінюватися даними в реальному часі без постійного перепідключення. Це особливо важливо для онлайн-чатів, фінансових платформ, ігрових серверів та будь-яких застосунків, де критичні затримка та швидкість обміну даними.

Як це працює? Після початкового HTTP-запиту відбувається "рукостискання", після чого з'єднання переходить у режим WebSocket. Далі обидві сторони можуть надсилати і приймати повідомлення в будь-який момент часу, доки з'єднання відкрите. Це знижує навантаження на мережу і підвищує чутливість інтерфейсу.

Приклад створення WebSocket-з'єднання:

const socket = new WebSocket("wss://example.com/socket");

socket.onopen = () => {
	console.log("З'єднання встановлено");
	socket.send("Привіт, сервере!");
};

socket.onmessage = (event) => {
	console.log("Отримано повідомлення:", event.data);
};

socket.onclose = () => {
	console.log("З'єднання закрито");
};

WebRTC: відео та аудіо в реальному часі

WebRTC (Web Real-Time Communication) — це технологія, яка дозволяє двом браузерам напряму обмінюватися аудіо, відео та даними без необхідності в проміжному сервері. Це основа для відеодзвінків, P2P-обміну файлами та інших інтерактивних застосунків. WebRTC використовує ICE (Interactive Connectivity Establishment), STUN та TURN-сервери для встановлення з'єднання навіть за наявності NAT і фаєрволів.

Головна перевага WebRTC — це мінімальні затримки при передачі медіа в реальному часі. Завдяки використанню кодеків Opus (аудіо) та VP8/VP9 (відео), WebRTC здатен ефективно передавати потоки навіть в умовах нестабільного з'єднання.

Приклад отримання відеопотоку з камери:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
	.then((stream) => {
		const video = document.querySelector("video");
		video.srcObject = stream;
		video.play();
	})
	.catch((error) => {
		console.error("Помилка доступу до камери:", error);
	});

Додатково WebRTC підтримує передачу довільних даних через RTCDataChannel, що дозволяє реалізовувати P2P-ігри, синхронізацію файлів та інші функції без центрального сервера.

WebGPU: потужна графіка прямо в браузері

WebGPU — це новий API для високопродуктивної графіки та обчислень у браузері. Він прийшов на зміну WebGL і надає розробникам доступ до можливостей GPU більш низького рівня. WebGPU побудований на базі сучасних графічних API, таких як Vulkan, Metal і Direct3D 12, і забезпечує значно ефективніше використання ресурсів відеокарти.

На відміну від WebGL, який орієнтований передусім на рендеринг, WebGPU також оптимальний для виконання обчислень, таких як машинне навчання, обробка великих обсягів даних і складні візуалізації. Це робить його потужним інструментом не лише для ігор, а й для наукових та інженерних задач.

Станом на 2025 рік підтримка WebGPU вже ввімкнена за замовчуванням у більшості браузерів, включаючи Chrome і Firefox, що робить технологію доступною для широкої аудиторії.

Приклад ініціалізації WebGPU:

if (!navigator.gpu) {
	console.log("WebGPU не підтримується");
} else {
	const adapter = await navigator.gpu.requestAdapter();
	const device = await adapter.requestDevice();
	console.log("WebGPU готовий до роботи");
}

Курс з вивчення JavaScript

Можете пройти наш безкоштовний курс з вивчення JavaScript

Використовуючи WebGPU, розробники можуть завантажувати шейдери, керувати буферами та виконувати складні паралельні операції напряму на відеокарті, що було неможливо в попередніх API.