JS властивість Event.open

HTML

<header>
  <h2 class="title">Подія open (WebSocket)</h2>
  <p class="description">Встановлює з'єднання через WebSocket та відстежує відкриття з'єднання</p>
</header>
<main>
  <div class="result">
    <button id="connectBtn">Встановити з'єднання</button>
    <div id="status">З'єднання не встановлене</div>
    
    <form id="messageForm" style="display: none; margin-top: 20px;">
      <label for="messageInput">Повідомлення:</label>
      <input type="text" id="messageInput" placeholder="Введіть ваше повідомлення">
      <button type="submit">Надіслати</button>
    </form>
    
    <div id="serverResponse" style="margin-top: 15px;"></div>
  </div>
</main>

CSS

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 10px 15px;
  margin-top: 15px;
  cursor: pointer;
}

#status {
  margin-top: 15px;
  color: red;
}

form input {
  padding: 5px;
  font-size: 16px;
}

form button {
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
}

#serverResponse {
  margin-top: 20px;
  color: blue;
}

JS

document.addEventListener('DOMContentLoaded', function () {
  const connectBtn = document.getElementById('connectBtn');
  const statusDiv = document.getElementById('status');
  const messageForm = document.getElementById('messageForm');
  const messageInput = document.getElementById('messageInput');
  const serverResponseDiv = document.getElementById('serverResponse');

  let socket;

  // Обробник для кнопки "Встановити з'єднання"
  connectBtn.addEventListener('click', function () {
    socket = new WebSocket('wss://echo.websocket.org'); // Веб-сокет сервер для тестування

    // Подія 'open', коли з'єднання встановлено
    socket.addEventListener('open', function (event) {
      statusDiv.textContent = 'З\'єднання встановлене!';
      statusDiv.style.color = 'green';
      connectBtn.disabled = true;
      messageForm.style.display = 'block';

      // Відправка привітального повідомлення після відкриття
      socket.send('Привіт, сервер!');
    });

    // Відображаємо відповідь від сервера
    socket.addEventListener('message', function (event) {
      serverResponseDiv.textContent = 'Відповідь від сервера: ' + event.data;
    });
  });

  // Обробник для форми повідомлень
  messageForm.addEventListener('submit', function (event) {
    event.preventDefault();
    const message = messageInput.value;

    // Надсилаємо повідомлення через відкритий сокет
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send(message);
      messageInput.value = '';
    } else {
      serverResponseDiv.textContent = 'Неможливо відправити, з\'єднання не встановлене!';
    }
  });
});
//# sourceURL=pen.js

const socket = new WebSocket('ws://example.com');

socket.addEventListener('open', function(event) {
  console.log('З\'єднання відкрите. Підготовка до відправки даних.');
  // Надсилаємо дані серверу після відкриття з'єднання
  socket.send(JSON.stringify({ action: 'initialize', data: 'початкові дані' }));
});

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);
  });
});