Прежде всего, что такое веб-сокет?
Проще говоря, WebSocket — это протокол для создания быстрого двунаправленного канала между веб-браузером и сервером. Другими словами, он обеспечивает постоянное соединение между клиентом и сервером, которое обе стороны могут использовать для начала отправки данных в любое время.
Вернуться к настройке
В Rails 5 стало возможным использовать веб-сокеты, и часть этого называется Action Cable, и, как и все в Rails, она намного проще, чем где бы то ни было.
Первым требованием является обновление маршрутов с помощью этой строки.
mount ActionCable.server => '/cable'
Не знаю, заметили ли вы, но когда мы создаем наш новый API для рельсов, мы получаем папку channels под app. Здесь происходит соединение. Для создания нового канала используйте
рельсы g канал ‹channel_name›
Вот так это выглядит внутри сгенерированного канала. Потребители (на стороне клиента) подписываются на каналы, выступая в роли подписчиков. Их соединение называется подпиской. Затем созданные сообщения направляются в эти подписки на каналы на основе идентификатора, отправленного потребителем кабельного телевидения. Далее нужно добавить часть, куда будет отправлено сообщение
Другими словами, мы транслируем сообщение Потребителю всякий раз, когда происходит изменение. Я добавил это в контроллер сообщений при создании действия, поэтому всякий раз, когда создается новое сообщение, оно пересылает это сообщение обратно. Позже, как справиться с этим на переднем конце.
Во внешнем интерфейсе я мог бы использовать ванильный javascript, но, поскольку я разработчик React, я буду использовать реагирующие компоненты.
Прежде всего, установите пакет action-cable-provider в свой проект (на сегодняшний день в пакете есть ошибка, но инструктор по моду 5 предложил исправление, которое включено в эту строку кода, без вопросов!)
Затем импортируйте компонент ActionCableProvider из «react-router-dom».
Он должен обернуть раздел, который вы хотите, чтобы ваша база данных прослушивала. переданный реквизит URL состоит из 3 разделов.
Во-первых, включает «ws», что означает веб-сокет, он будет иметь специальный заголовок, который будет отправлен в базу данных для установления соединения с веб-сокетом.
Во-вторых, это ссылка на базу данных с портом.
В-третьих, это сервер ActionCable, который был добавлен в маршруты в начале, которые должны совпадать.
mount ActionCable.server => '/cable'
Теперь у нас есть провайдер, который предоставит нам соединение через веб-сокет между нашим клиентом и сервером.
Следующим шагом является добавление потребителя, который будет слушать канал и получать сообщение каждый раз, когда происходит изменение.
импортируйте ActionCableConsumer в компонент, где вы хотите прослушивать изменения, и используйте его в визуализируемой части компонента.
Проще говоря, именно здесь мы получаем все, что наша база данных передает нам. Канал — это имя класса, в котором определены методы подписки и отмены подписки для этого конкретного канала.
