Як працювати з WebSocket у JavaScript: покрокова інструкція

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

Приклади практичного використання

Почнемо з того, як реалізувати websocket client javascript. Тут достатньо скористатися вбудованим API.

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

// Triggered when connection is successfully established

socket.onopen = function() {

  console.log('Connection established');

};

// Triggered when data is received from the server

socket.onmessage = function(event) {

  console.log('Data received: ', event.data);

};

// Triggered when the connection is closed

socket.onclose = function(event) {

  if (event.wasClean) {

    console.log('Connection closed cleanly');

  } else {

    console.log('Connection lost'); // e.g., internet connection lost

  }

};

// Triggered when an error occurs

socket.onerror = function(error) {

  console.log('Error: ', error.message);

};

Цей код демонструє javascript websocket приклад. Зверніть увагу на кілька важливих моментів: підключення, опрацювання повідомлень і помилок.

Приклад реалізації чату

Цей протокол ідеально підходить для створення додатків у реальному часі, таких як чати. Розглянемо спрощений приклад:

const chatSocket = new WebSocket('wss://chat.example.com');

// Sending a message

function sendMessage(message) {

  chatSocket.send(JSON.stringify({ type: 'message', content: message }));

}

// Receiving a message

chatSocket.onmessage = function(event) {

  const receivedMessage = JSON.parse(event.data);

  console.log('New message: ', receivedMessage.content);

};

Тут показано, як здійснюється websocket надсилання даних javascript і їхнє опрацювання на стороні клієнта. У цьому прикладі ми використовуємо send() для надсилання даних, а на сервері вони обробляються в JSON-форматі. Це стандартний спосіб передачі даних через протокол, і він зручний для роботи з різними типами даних.

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Інтеграція із сервером

Для повної реалізації протоколу потрібна і серверна частина. WebSocket може бути легко інтегрований з різними серверними технологіями, такими як Node.js, Java або Python. Розглянемо приклад на Node.js:

const WebSocketLib = require('ws');

const socketServer = new WebSocketLib.Server({ port: 9000 });

// Handling new client connections

socketServer.on('connection', (clientSocket) => {

  console.log('New connection established');

  // Handling incoming messages

  clientSocket.on('message', (msg) => {

    console.log('Message received: ', msg);

    clientSocket.send('Message received');

  });

  // Handling connection closure

  clientSocket.on('close', () => {

    console.log('Connection closed');

  });

});

Підключення та надсилання даних

Отже, як же встановити websocket підключення javascript?

Для цього в джаваскрипті використовується конструктор WebSocket(). Важливо розуміти, що протокол має два варіанти: ws:// для звичайного зв’язку і wss:// для захищеного.

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

Для надсилання повідомлень використовується метод send():

socket.send('Hello!');

Для отримання повідомлень від сервера:

socket.onmessage = function(event) {

  console.log('Message received: ', event.data);

};

Приклад надсилання та отримання даних

Для надсилання даних використовується метод send(). Це важливий крок для розуміння того, як працює websocket javascript tutorial:

socket.send('Hello!');

А для отримання повідомлень на стороні клієнта:

socket.onmessage = function(event) {

  console.log('Message received: ', event.data);

};

Обробка подій

Варто пам’ятати про різні типи подій: onopen, onmessage, onclose, onerror. Onopen спрацьовує в разі успішного встановлення з’єднання, що дає змогу виконувати дії, які залежать від стабільного підключення. Onmessage відповідає за отримання даних від сервера, що важливо для обробки вхідних повідомлень або подій у реальному часі. Onclose сигналізує про закриття з’єднання, що дає змогу коректно завершити взаємодію або спробувати повторно підключитися. Нарешті, onerror допомагає обробляти помилки, які можуть виникати через збої в мережі, проблеми на сервері або інші неполадки. Їх обробка допоможе зробити ваш застосунок стійкішим до збоїв у підключенні та забезпечити безперебійну роботу.

Работа с неполадками и оптимизация производительности

Ошибки могут возникать по разным причинам, включая проблемы с сетью, неполадки на стороне сервера или неправильную работу клиента. Для того чтобы эффективно обрабатывать такие ситуации, важно использовать обработчик ошибок onerror.

socket.onerror = function(error) {

  console.error('Connection error: ', error.message);

};

Оптимізація продуктивності

Щоб мінімізувати навантаження на сервер, намагайтеся уникати надсилання зайвих даних. Використовуйте стиснення даних і надсилання тільки необхідних пакетів. Важливий момент – це управління часом очікування (timeout) і ping/pong-повідомленнями для підтримки з’єднання активним.

Безпека

Під час використання WebSocket у продакшн-середовищах завжди застосовуйте wss://, щоб шифрувати інформацію між клієнтом і сервером і захистити інформацію від перехоплення зловмисниками.

Висновок

Як ми бачимо, цей протокол надає потужний інструмент для створення застосунків реального часу на джаваскрипт, таких, як чати, системи сповіщень і навіть ігри.