JS властивість Event.open
Загальний опис
Подія open використовується для відстеження моменту, коли з'єднання відкривається через веб-сокети або інші протоколи комунікації, такі як XMLHttpRequest або EventSource. Це означає, що клієнт успішно встановив з'єднання з сервером і готовий до обміну даними. Як правило, подія open використовується для виконання початкових дій після встановлення з'єднання, наприклад, для надсилання первинного запиту або повідомлення серверу про готовність до роботи.
Веб-сокети (WebSocket) — це технологія, що дозволяє відкривати двонаправлене з'єднання між клієнтом і сервером. Після створення об'єкта WebSocket і виклику його методу connect, подія open спрацьовує, коли з'єднання встановлено.
Приклад використання події open у веб-сокетах:
const socket = new WebSocket('ws://example.com');
socket.addEventListener('open', function(event) {
console.log('З\'єднання відкрите.');
socket.send('Привіт, сервер!');
});
У цьому прикладі створюється з'єднання з сервером за допомогою WebSocket. Подія open спрацьовує після успішного встановлення з'єднання, і як відповідь клієнт відправляє серверу повідомлення.
Подія open також застосовується в інших технологіях. Наприклад, для XMLHttpRequest вона вказує на готовність до надсилання запиту після відкриття з'єднання з сервером, хоча в цьому випадку її використовують рідше, оскільки в основному обробляється інша подія — load.
Важливо пам'ятати, що подія open є асинхронною, і вона не спрацьовує миттєво після виклику метода підключення. Тому код, який передбачає комунікацію з сервером, повинен виконуватися в межах обробника цієї події, щоб уникнути помилок, пов'язаних з відсутністю з'єднання.
Крім веб-сокетів, подія open використовується у функції EventSource, яка дозволяє створювати постійне з'єднання між браузером і сервером для отримання даних у режимі реального часу (наприклад, оновлення новин або повідомлень).
| Порада: | Не намагайтеся відправляти дані на сервер до того, як подія |
| Порада: | При роботі з веб-сокетами важливо не лише відстежувати подію |
| Порада: | Подія |
Синтаксис
webSocket.addEventListener('open', function(event) {
// ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє роботу події open через WebSocket. Користувач може натиснути кнопку "Встановити з'єднання", щоб відкрити з'єднання з сервером WebSocket. Після відкриття з'єднання (подія open), користувач може відправляти повідомлення через форму, які будуть відображені як відповіді сервера на сторінці.
У цьому прикладі після відкриття з'єднання виконується відправка первинного запиту серверу, який містить інформацію про ініціалізацію роботи клієнта. Це може бути корисно для додатків, де після підключення клієнт передає серверу інформацію про стан чи налаштування.
const socket = new WebSocket('ws://example.com');
socket.addEventListener('open', function(event) {
console.log('З\'єднання відкрите. Підготовка до відправки даних.');
// Надсилаємо дані серверу після відкриття з'єднання
socket.send(JSON.stringify({ action: 'initialize', data: 'початкові дані' }));
});Цей приклад демонструє, як використовувати подію open для встановлення постійного з'єднання з сервером для отримання оновлень в реальному часі. Після відкриття з'єднання клієнт слухає події message і відображає нові дані, коли вони надходять від сервера.
const socket = new WebSocket('ws://example.com/realtime-updates');
socket.addEventListener('open', function(event) {
console.log('З\'єднання встановлено, починаємо слухати оновлення.');
// Починаємо отримувати повідомлення в режимі реального часу
socket.addEventListener('message', function(messageEvent) {
const data = JSON.parse(messageEvent.data);
console.log('Отримано нові дані:', data);
});
});