Стаття Робота з WebSockets у JavaScript

LITVINOV · 08.02.24

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

Використання WebSockets у JavaScript

Для роботи з WebSockets у JavaScript ми можемо скористатися вбудованим класом WebSocket, який надається браузерами.

Код:

// Створення WebSocket з'єднання
const socket = new WebSocket('ws://localhost:3000');

// Обробник події відкриття з'єднання
socket.addEventListener('open', function (event) {
console.log('WebSocket з'єднання відкрито');
   
    // Відправка даних на сервер
    socket.send('Привіт, сервер!');
});

// Обробник події отримання повідомлення від сервера
socket.addEventListener('message', function (event) {
    console.log('Отримано повідомлення від сервера:', event.data);
});

// Обробник події закриття з'єднання
socket.addEventListener('close', function (event) {
console.log('WebSocket з'єднання закрито');
});

Приклад веб-додатку з використанням WebSockets

Давайте розглянемо приклад простого веб-додатку, який використовує WebSockets для обміну даними між клієнтом та сервером.

Клієнтська частина (HTML + JavaScript)

HTML:

<!DOCTYPE html>
<html lang="ua">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Example</title>
</head>
<body>
<input type="text" id="messageInput">
<button onclick="sendMessage()">Відправити</button>
 <ul id="messages"></ul>

<script>
const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('message', function (event) {
const messages = document.getElementById('messages');
const li = document.createElement('li');
li.textContent = event.data;
messages.appendChild(li);
        });

function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
socket.send(message);
input.value = '';
        }
    </script>
</body>
</html>

Серверна частина (Node.js + WebSocket пакет)

Для серверної частини ми використовуємо Node.js та пакет ws для створення WebSocket сервера.

JavaScript:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', function connection(ws) {
console.log('Нове з\'єднання встановлено');

ws.on('message', function incoming(message) {
console.log('Отримано повідомлення від клієнта:', message);
// Повертаємо отримане повідомлення назад до клієнта
ws.send('Повідомлення отримано: ' + message);
    });
});

Забезпечення безпеки WebSockets

При використанні WebSockets важливо пам'ятати про забезпечення безпеки. Оскільки WebSocket з'єднання є постійним, вони створюють нові вектори атак і потенційні загрози безпеки. Деякі з основних заходів безпеки, які слід враховувати, включають:

Автентифікація та авторизація: Встановлення механізмів для перевірки ідентичності користувачів і забезпечення доступу тільки до необхідних ресурсів.
Валідація вхідних даних: Перевірка та очищення всіх вхідних даних для запобігання атак типу ін'єкцій.
Шифрування: Використання SSL / TLS для шифрування даних, які передаються через WebSocket з'єднання.
Обмеження трафіку: Контроль обсягу даних, які можуть бути передані через WebSocket, для запобігання DoS (Denial of Service) атак.
Моніторинг і журналювання: Ведення журналів подій і моніторинг активності WebSocket для виявлення потенційних атак та вразливостей.

Використання WebSockets в реальному житті

WebSockets знаходять застосування в різних сферах, включаючи:

Чат-додатки: Миттєві чати, групові чати і чат-боти.
Онлайн-ігри: Можливість масштабованого обміну даними між гравцями і сервером для онлайн-ігор.
Фінансові додатки: Онлайн-торгівля, реальний час оновлення стану ринку.
Спільне використання документів: Реальний час спільного доступу до документів, спільне редагування тощо.
Моніторинг стану системи: Оновлення даних стану системи, нагляд за подіями в реальному часі.

WebSockets відкривають безліч можливостей для розробки веб-додатків з реальним часом обміну даними. Їх потужність полягає в здатності надсилати та отримувати дані між клієнтом та сервером без перезавантаження сторінок або запитування сервера. Правильне використання та забезпечення безпеки WebSocket з'єднань є важливим елементом розробки веб-додатків, які залежать від реального часу для ефективної комунікації між користувачами та серверами.

Розширення можливостей WebSockets

Поза базовою взаємодією між клієнтом та сервером, існують різні способи розширення функціональності WebSockets:

Реалізація каналів та підписки: Замість простого обміну повідомленнями, можна реалізувати канали та підписку на них. Клієнти можуть підписатися на конкретний канал та отримувати повідомлення тільки з цього каналу.
Використання сторонніх бібліотек: Існують сторонні бібліотеки, які спрощують роботу з WebSockets та надають додаткові функції, такі як реконект після втрати з'єднання, керування автентифікацією та авторизацією тощо.
Інтеграція з іншими технологіями: WebSockets можна поєднувати з іншими технологіями, такими як GraphQL або REST API, для створення більш складних або потужних додатків.

Приклад розширення функціональності WebSockets

Давайте розглянемо приклад реалізації каналів та підписки з використанням Node.js та бібліотеки ws:

JavaScript:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });
const channels = {};

wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
const data = JSON.parse(message);
if (data.type === 'subscribe') {
// Підписуємо клієнта на канал
if (!channels[data.channel]) {
channels[data.channel] = new Set();
            }
channels[data.channel].add(ws);
} else if (data.type === 'unsubscribe') {
// Відписуємо клієнта від каналу
if (channels[data.channel]) {
channels[data.channel].delete(ws);
            }
} else if (data.type === 'message') {
// Надсилаємо повідомлення на всіх підписаних клієнтів каналу
if (channels[data.channel]) {
channels[data.channel].forEach(client => {
client.send(JSON.stringify({ channel: data.channel, message: data.message }));
                });
            }
        }
    });
});

Цей код дозволяє клієнтам підписуватися на різні канали, надсилати повідомлення на канал та відписуватися від каналу. Таким чином, клієнти можуть отримувати повідомлення тільки з каналів, на які вони підписані.

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

Оптимізація та масштабування WebSockets

При розробці веб-додатків з використанням WebSockets важливо також звертати увагу на оптимізацію та масштабування. Ось деякі стратегії:

Керування ресурсами: Слід уважно керувати ресурсами на сервері та встановлювати максимальний ліміт одночасних з'єднань WebSocket для ефективного використання ресурсів.
Кешування даних: Для запобігання надмірного навантаження на сервер можна використовувати кешування даних, щоб уникнути повторних запитів на інформацію, яка рідко змінюється.
Використання CDN: Якщо ваша програма використовує статичний контент, такий як JavaScript, CSS або медіафайли, варто розглянути можливість використання Content Delivery Network (CDN), щоб зменшити навантаження на ваш сервер.
Горизонтальне масштабування: У випадку великого навантаження можна розглянути горизонтальне масштабування, коли додаток розподіляється на кілька серверів.

Приклад оптимізації WebSockets

Давайте розглянемо приклад використання кешування даних для зменшення навантаження на сервер:

JavaScript:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });
const dataCache = {};

wss.on('connection', function connection(ws) {
// Відправляємо клієнту кешовані дані, якщо вони є
if (dataCache['cachedData']) {
ws.send(dataCache['cachedData']);
    }

ws.on('message', function incoming(message) {
 // Обробляємо повідомлення від клієнта

// Кешуємо дані для майбутніх підключень
dataCache['cachedData'] = message;
    });
});

У цьому прикладі, коли клієнт підключається до сервера WebSocket, сервер спочатку перевіряє, чи є кешовані дані. Якщо так, він відправляє їх клієнту. Після цього, коли клієнт надсилає нові дані, сервер кешує їх для майбутніх підключень.

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

Тестування WebSockets

Однією з ключових складових розробки додатків, які використовують WebSockets, є їх тестування. Важливо перевірити, що ваше з'єднання WebSocket працює правильно і надійно, а також що ваші обробники подій реагують на очікуваний спосіб.
Для тестування WebSockets можна використовувати різні підходи:

Модульне тестування на рівні сервера та клієнта: Ви можете використовувати бібліотеки для модульного тестування, такі як Mocha або Jest, для тестування різних аспектів вашого WebSocket сервера та клієнта. Наприклад, ви можете тестувати правильність обробки повідомлень, підписки на канали, обробку помилок тощо.
Інтеграційне тестування: Використання інструментів для інтеграційного тестування дозволяє перевірити взаємодію між клієнтом і сервером через WebSocket з'єднання.
Використання спеціалізованих бібліотек: Існують бібліотеки, такі як websocket-client для Python або ws для Node.js, які дозволяють створювати клієнтські з'єднання WebSocket для тестування вашого сервера.

Приклад тестування з використанням Mocha та Chai

Нижче наведено приклад модульного тесту для Node.js сервера WebSocket за допомогою Mocha та Chai:

JavaScript:

const WebSocket = require('ws');
const assert = require('chai').assert;

describe('WebSocket Server', function() {
 let ws;

before(function(done) {
// Підключення до сервера WebSocket перед кожним тестом
ws = new WebSocket('ws://localhost:3000');
ws.on('open', function() {
 done();
        });
    });

after(function() {
// Закриття з'єднання після кожного тесту
ws.close();
    });

it('Should receive "Hello" message from server', function(done) {
ws.on('message', function(data) {
assert.equal(data, 'Hello');
 done();
        });
    });

it('Should send "Goodbye" message to server', function(done) {
ws.send('Goodbye');
ws.on('message', function(data) {
assert.equal(data, 'Goodbye received');
 done();
        });
    });
});

У цьому прикладі ми тестуємо, чи правильно сервер WebSocket надсилає та отримує повідомлення від клієнта.

Тестування WebSockets є важливою частиною розробки веб-додатків, особливо якщо ваш додаток залежить від реального часу обміну даними. Правильне тестування дозволяє вам впевнитися, що ваше з'єднання WebSocket працює надійно і відповідає очікуванням. Використання інструментів тестування, таких як Mocha, Chai або спеціалізовані бібліотеки, допоможе вам створити стабільні та надійні додатки з WebSockets.

Отже

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

WOX.IN.UA - форум web розробників

Стаття Робота з WebSockets у JavaScript

Інше...

LITVINOV

VIP user

Використання WebSockets у JavaScript

Приклад веб-додатку з використанням WebSockets

Клієнтська частина (HTML + JavaScript)

Серверна частина (Node.js + WebSocket пакет)

Забезпечення безпеки WebSockets

Використання WebSockets в реальному житті

Розширення можливостей WebSockets

Приклад розширення функціональності WebSockets

Оптимізація та масштабування WebSockets

Приклад оптимізації WebSockets

Тестування WebSockets

Приклад тестування з використанням Mocha та Chai

Отже

Останні додані теми

Популярні теми

Нові ресурси

WOX.IN.UA - форум web розробників

Стаття Робота з WebSockets у JavaScript

LITVINOV

VIP user

Використання WebSockets у JavaScript​

Приклад веб-додатку з використанням WebSockets​

Клієнтська частина (HTML + JavaScript)​

Серверна частина (Node.js + WebSocket пакет)​

​

Забезпечення безпеки WebSockets​

Використання WebSockets в реальному житті​

Розширення можливостей WebSockets​

Приклад розширення функціональності WebSockets​

Оптимізація та масштабування WebSockets​

Приклад оптимізації WebSockets​

Тестування WebSockets​

Приклад тестування з використанням Mocha та Chai​

Отже​

Останні додані теми

Популярні теми

Нові ресурси

Використання WebSockets у JavaScript

Приклад веб-додатку з використанням WebSockets

Клієнтська частина (HTML + JavaScript)

Серверна частина (Node.js + WebSocket пакет)

Забезпечення безпеки WebSockets

Використання WebSockets в реальному житті

Розширення можливостей WebSockets

Приклад розширення функціональності WebSockets

Оптимізація та масштабування WebSockets

Приклад оптимізації WebSockets

Тестування WebSockets

Приклад тестування з використанням Mocha та Chai

Отже