перевод Angular 2 Websockets Tutorial

В этом учебнике мы научимся создавать очень простые приложения на Angular 2+ с использованием websocket.

Браузерная совместимость

Я должен предупредить что на данный момент не все 100% браузеров поддерживают websocket. Некоторые старые версии не поддерживают работу с ними.

Websockets в Angular 2

Angular использует библиотеку RxJS которое по сути является javascript реализацией парадигмы реактивного  программирования. Это библиотека объединяет асинхронное и событийное программирование используя объекты типа observable (наблюдаемые), которые идеально подходят для работы с websockets.

Проще говоря, RxJS позволяет получать новый сообщения от websocket и выполнять соотвествующие действия при необходимости. Примером может служить чат в реальном времени. Скажем у нас есть 3 подключенных к нашему приложению пользователя и один из них отправляет сообщение. Если мы хотим что то делать когда мы получаем новое сообщение то нам нужно просто подписаться на событие получения новых сообщений и к примеру отобразить это сообщения двум другим пользователям в этом момент.

Работаем с Websockets

Лучший способ работы с websockets в приложении angular это инкапсуляция websockets и события в сервис и затем вызов этого сервиса внутри компонентов которым нужно взаимодействовать с websocket.

Создание нашего приложения

Используем Angular CLI, для создания нового приложения, наберем следующую команду:

Это команда создаст нам полностью готовое Angular 2 приложения в которым мы реализуем наши сервисы для работы с websocket . Что бы убедиться в работе приложения наберите команду:

Должен запуститься веб сервер на порту 4200. Если вы наберете в строке адреса браузера localhost:4200 вы должны увидеть сообщение ‘app works!’. Сейчас самое время создать сервис для работы с websocket.

Создания сервиса для работы с Websocket

Для начала создадим простой сервис который просто подключатся к заданному URL и возвращать  объект RxJS на который мы сможем подписаться для получения потока данных с этого URL.

В начале нам нужно импортировать библиотеку rxjs (import * from rxjs). Это позволить нам создать объект subject который будет observe (наблюдатель) и observable (наблюдаемый). Это означает что наш объект (subject) будет следить за websocket на наличие входящих сообщений и отправлять их любому компоненту который подписан на этот сервис.

Далее нам нужно создать второй сервис который будет взаимодействовать с websockets и будет действовать как адаптер, который адаптирует данный идущие с websocket в форму которая представлена на веб странице. Для создания снова используем angular-cli:

Это команда создаст файл chat.service.ts. Введите следующие изменения в этот файл:

Обновление нашего App Component

Теперь на нужно обновить файл app.component.ts что бы он импортировал только что созданный chat сервис:

В заключение нам нужно обновить html страницу нашего app.component для того что бы мы могли использовать sendMsg():

Как только все изменения сделаны, запустите следующую команду в корневой директории проекта:

Вы должны увидеть кнопку ‘Send Message’.

Откройте консоль и кликните на копку несколько раз вы должны увидеть что отправляет и получает сообщения на websocket сервер.

 

 

 

 

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK