WebSockets - это протокол, который позволяет осуществлять двусторонний обмен сообщениями между браузером и сервером в режиме реального времени.

В отличие от обычных HTTP-запросов, где браузер отправляет запрос на сервер, а сервер отвечает, WebSockets устанавливают постоянное соединение между браузером и сервером. Это позволяет им обоим посылать данные в любое время, не дожидаясь запроса.

Например, при использовании обычных HTTP-запросов, если нам нужно узнать о новых сообщениях из чата, то браузер должен постоянно отправлять запросы типа "Есть новые сообщения?". А сервер может отвечать только "да" или "нет".

С WebSockets браузер устанавливает соединение и ждет, пока сервер пришлет новые сообщения. То есть сервер может отправлять обновления браузеру без дополнительных запросов.

Преимущества WebSockets

Использование WebSockets вместо обычных HTTP-запросов дает несколько преимуществ:

• Реальное время. Возможность получать данные из сервера мгновенно, без задержек. Это важно для чатов, игр, биржевых терминалов.
• Эффективность. Меньше накладных расходов на установку соединения для каждого запроса. Одно соединение используется для всех данных.
• Простота. Легче отправлять и получать данные без необходимости запрашивать обновления.

Например, WebSockets идеально подходят для следующих задач:

• Чаты, где нужно мгновенно получать новые сообщения
• Игры, чтобы в реальном времени передавать действия игроков
• Биржевые терминалы для быстрого обновления курсов акций
• Уведомления о новых заказах, комментариях и другой активности

Angular и WebSockets: начало работы

Angular - это популярный фреймворк для создания одностраничных веб-приложений. Он использует TypeScript и основан на компонентах.

Чтобы использовать WebSockets в Angular, нужно:

• Подключить библиотеку rxjs, которая позволяет работать с асинхронными данными
• Создать WebSocket связь с сервером
• Прослушивать события на получение и отправку данных
• Отправлять и получать данные через WebSocket

Давай рассмотрим как это делается на примере.

Создание простого приложения с использованием WebSockets в Angular

Создадим простое Angular приложение, которое будет подключаться к серверу по WebSocket и отправлять текстовые сообщения.

Сначала импортируем необходимые модули из rxjs:

import { webSocket } from 'rxjs/webSocket';

В компоненте создаем WebSocket:

const socket = webSocket('ws://example.com/chat');

Это подключится к WebSocket серверу по указанному адресу.

Далее можно слушать события при открытии соединения:

socket.subscribe(
  () => {
    console.log('Соединение установлено'); 
  }
);

А также при получении сообщений:

socket.subscribe(
  (msg) => {
    console.log(msg);
  }  
);

Чтобы отправить данные на сервер, делаем:

socket.next('Привет сервер!');

Таким образом мы подключили WebSocket, отправляем и получаем данные.

Обработка событий с помощью WebSockets в Angular

Чтобы обрабатывать события из WebSockets в Angular, нужно подписаться на них.

Например, при получении нового сообщения в чате мы можем вывести его в интерфейс:

socket.subscribe(
  (msg) => {
    this.messages.push(msg);
  }
);

А в шаблоне выводим messages в цикле:

<div *ngFor="let msg of messages">
  {{msg}}  
</div>

Также можно отлавливать ошибки:

socket.subscribe(
  () => {},
  (err) => {
    console.log(err);
  }  
);

Или закрытие соединения:

socket.subscribe(
  () => {},
  null, 
  () => {
    console.log('Соединение закрыто');
  }
);

Таким образом мы можем полноценно обрабатывать все события, которые приходят по WebSocket.

Отправка данных с клиента на сервер с использованием WebSockets в Angular

Чтобы отправить данные на сервер через WebSocket из Angular, используем метод next():

socket.next('hello');

Это позволяет отправлять любые данные - строки, объекты:

socket.next({
  type: 'message',
  text: 'Привет!'
});

Также можно сделать отправку по нажатию кнопки. Например, в шаблоне:

<button (click)="sendMessage()">Отправить</button>

А в компоненте:

sendMessage() {
  socket.next('Сообщение от пользователя');
}

Данные отправятся на сервер при нажатии кнопки.

Итог

WebSockets - это важная технология, которая позволяет создавать реально-временные приложения и сервисы. Благодаря постоянному соединению между браузером и сервером, WebSockets эффективно обмениваются данными.

В Angular есть всё необходимое для работы с WebSockets - создание соединения, отправка и получение данных, обработка событий. Это открывает большие возможности для создания приложений, которым нужна мгновенная связь с сервером.

Я рассказал только о базовых вещах, чтобы познакомить с WebSockets. Но есть много дополнительных возможностей - масштабирование, авторизация, разные протоколы и фреймворки. Советую изучить больше материалов и примеров, чтобы использовать весь потенциал WebSockets в своих проектах!