Создайте приложение для чата с Rails 5, ActionCable и Devise

 jQuery(document).on 'turbolinks:load', -> messages = $('#messages') if $('#messages').length > 0 App.global_chat = App.cable.subscriptions.create # ... $('#new_message').submit (e) -> $this = $(this) textarea = $this.find('#message_body') if $.trim(textarea.val()).length > 1 App.global_chat.send_message textarea.val(), messages.data('chat-room-id') textarea.val('') e.preventDefault() return false 

Когда форма отправлена, возьмите тело сообщения, убедитесь, что его длина не менее двух, а затем вызовите функцию send_message чтобы передать новое сообщение всем посетителям чата. Далее очистите текстовую область и предотвратите отправку формы.

Сторона сервера

Нашей следующей задачей будет внедрение канала на нашем сервере. В Rails 5 есть новый каталог под названием channels для их размещения, поэтому создайте там файл chat_rooms_channel.rb :

Каналы / chat_rooms_channel.rb

 class ChatRoomsChannel < ApplicationCable::Channel def subscribed stream_from "chat_rooms_#{params['chat_room_id']}_channel" end def unsubscribed # Any cleanup needed when channel is unsubscribed end def send_message(data) # process data sent from the page end end 

subscribed — это специальный метод для начала потоковой передачи с канала с заданным именем. Пока у нас несколько комнат, название канала будет отличаться. Помните, мы предоставили chat_room_id: messages.data('chat-room-id') при подписке на канал в нашем скрипте? Благодаря этому chat_room_id можно получить внутри subscribed метода, вызвав params['chat_room_id'] .

unsubscribed является обратным вызовом, который срабатывает, когда потоковая передача остановлена, но мы не будем использовать ее в этой демонстрации.

Последний метод — send_message — срабатывает, когда мы запускаем @perform 'send_message', message: message, chat_room_id: chat_room_id из нашего скрипта. Переменная data содержит хеш отправленных данных, поэтому, например, чтобы получить доступ к сообщению, вы должны ввести data['message'] .

Есть несколько способов передать полученное сообщение, но я собираюсь показать вам очень удобное решение, основанное на демонстрации, предоставленной DHH (я также нашел эту статью с немного другим подходом).

Прежде всего, измените метод send_message :

Каналы / chat_rooms_channel.rb

 [...] def send_message(data) current_user.messages.create!(body: data['message'], chat_room_id: data['chat_room_id']) end [...] 

Как только мы получим сообщение, сохраните его в базе данных. Вам даже не нужно проверять, существует ли предоставленная комната чата — по умолчанию в Rails 5 должен существовать родительский элемент записи, чтобы сохранить ее. Это поведение может быть изменено путем установки belongs_to optional: true для отношения belongs_to (о других изменениях в Rails 5 читайте здесь ).

Однако есть проблема — метод Devise current_user не доступен для нас здесь. Чтобы это исправить, измените файл connection.rb в каталоге application_cable :

Каналы / application_cable / connection.rb

 module ApplicationCable class Connection < ActionCable::Connection::Base identified_by :current_user def connect self.current_user = find_verified_user logger.add_tags 'ActionCable', current_user.email end protected def find_verified_user # this checks whether a user is authenticated with devise if verified_user = env['warden'].user verified_user else reject_unauthorized_connection end end end end 

Имея это, мы достигаем даже двух целей одновременно: метод current_user теперь доступен для канала, а неаутентифицированные пользователи не могут транслировать свои сообщения.

 [ActionCable] [[email protected]] Registered connection (Z2lkOi8vY2FibGUtY2hhdC9Vc2VyLzE) [ActionCable] [[email protected]] ChatRoomsChannel is transmitting the subscription confirmation [ActionCable] [[email protected]] ChatRoomsChannel is streaming from chat_rooms_1_channel 

 [...] after_create_commit { MessageBroadcastJob.perform_later(self) } [...] 

 class MessageBroadcastJob < ApplicationJob queue_as :default def perform(message) ActionCable.server.broadcast "chat_rooms_#{message.chat_room.id}_channel", message: 'MESSAGE_HTML' end end 

 class MessageBroadcastJob < ApplicationJob queue_as :default def perform(message) ActionCable.server.broadcast "chat_rooms_#{message.chat_room.id}_channel", message: render_message(message) end private def render_message(message) MessagesController.render partial: 'messages/message', locals: {message: message} end end 

 class MessagesController < ApplicationController end 

 [...] App.global_chat = App.cable.subscriptions.create { channel: "ChatRoomsChannel" chat_room_id: messages.data('chat-room-id') }, connected: -> # Called when the subscription is ready for use on the server disconnected: -> # Called when the subscription has been terminated by the server received: (data) -> messages.append data['message'] send_message: (message, chat_room_id) -> @perform 'send_message', message: message, chat_room_id: chat_room_id [...] 

 jQuery(document).on 'turbolinks:load', -> messages = $('#messages') if $('#messages').length > 0 messages_to_bottom = -> messages.scrollTop(messages.prop("scrollHeight")) messages_to_bottom() App.global_chat = App.cable.subscriptions.create # ... 

 [...] received: (data) -> messages.append data['message'] messages_to_bottom() [...] 

 production: adapter: redis url: <%= ENV["REDISCLOUD_URL"] %> [...] 

 [...] config.action_cable.allowed_request_origins = ['https://your_app.herokuapp.com', 'http://your_app.herokuapp.com'] [...] 

 [...] config.action_cable.url = "wss://sitepoint-actioncable.herokuapp.com/cable" [...]