Мини-чат с Rails и событиями, отправленными на сервер

Мы должны включить этот шаблон на странице:

комментарии / new.html.erb

 [...] <%= render 'templates/comment' %> 

Теперь мы готовы использовать этот шаблон:

comments.coffee

 source = new EventSource('/comments') source.onmessage = (event) -> comment_template = _.template($('#comment_temp').html()) comment = $.parseJSON(event.data) if comment $('#comments').find('.media-list').prepend(comment_template( { body: comment['body'] user_name: comment['user_name'] user_avatar: comment['user_avatar'] user_profile: comment['user_profile'] timestamp: comment['timestamp'] } )) [...] 

comment_template содержит содержимое шаблона, а comment - данные, отправленные сервером. Мы добавляем новый комментарий к списку комментариев, передавая все необходимые данные в шаблон. Brilliant!

Это решение, однако, имеет недостаток. Нам нужно изменить разметку в двух местах, если для шаблона комментария необходимы изменения. Я думаю, что это больше подходит в ситуациях, когда вам не нужна сложная разметка для отображения данных.

Передача данных как HTML

Теперь давайте посмотрим на другое решение: - используя метод render_to_string . В этом случае нам нужно будет только отправить идентификатор нового комментария в контроллер, извлечь комментарий, отобразить его шаблон и отправить сгенерированную разметку клиенту. На стороне клиента эту разметку просто нужно вставить на страницу без изменений.

Настройте свою модель:

модели / comments.rb

 [...] private def notify_comment_added Comment.connection.execute "NOTIFY comments, '#{self.id}'" end [...] 

и контроллер:

comments_controller.rb

 def index response.headers['Content-Type'] = 'text/event-stream' sse = SSE.new(response.stream) begin Comment.on_change do |id| comment = Comment.find(id) t = render_to_string(partial: 'comment', formats: [:html], locals: {comment: comment}) sse.write(t) end rescue IOError # Client Disconnected ensure sse.close end render nothing: true end 

Метод render_to_string похож на метод render , но он не отправляет результат в качестве тела ответа в браузер - он сохраняет этот результат в виде строки. Обратите внимание, что мы должны предоставить formats , в противном случае Rails будет искать партиал с форматом text/event-stream (потому что мы установили этот заголовок ответа ранее).

И, наконец, на стороне клиента:

 source = new EventSource('/comments') source.onmessage = (event) -> $('#comments').find('.media-list').prepend($.parseHTML(event.data)) 

[...]

Это легко. Просто добавьте новый комментарий, проанализировав полученную строку.

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

Вывод

При замене веб-сокетов событиями Server-Send мы рассмотрели использование ActionController::Live Puma, ActionController::Live , PostgreSQL LISTEN / NOTIFY и шаблонов underscore.js. В общем, я думаю, что это решение менее предпочтительно, чем веб-сокеты с Faye.

Прежде всего, это связано с дополнительными издержками и работает только с PostgreSQL (или Redis, если вы используете его механику Pub / Sub). Кроме того, кажется, что использование веб-сокетов больше подходит для наших нужд, так как нам нужен механизм подписки и публикации на стороне клиента.

Надеюсь эта статья была вам интересна! Вы когда-нибудь использовали Server-Send Events в своих проектах? Вы бы предпочли использовать веб-сокеты для создания аналогичного чат-приложения? Поделитесь своим мнением, хотелось бы узнать!