Rails 非同期通信 メッセージ機能の実装

メッセージの非同期通信の実装

メッセージの非同期にあたり大きく分けて二つの機能を実装しました、

一つは非同期通信のメッセージ送信です。

二つ目はメッセージの受信（自動更新機能）です。

今回はJavaScriptのみのコードを公開しております。途中に参考にした記事などを掲載しております。そちらを参照していただければと思います。

その前に非同期通信とは？

コンピュータ間でデータ送信と受信のタイミングを合わせずに行う通信手段である。片方がオンライン状態であれば、データの送受信を行うことができる。
反対に同期通信というものがある。
同期通信とは、送信側も受信側もオンラインである必要があり、片方が接続してれば通信を行える非同期通信とは大きく違う点である。

それを踏まえて一つ目のメッセージの送信について、

$(document).on('turbolinks:load', function(){
    function buildHTML(message) {
      var content = message.content ? `${ message.content }` : "";
      var img = message.image ? `<img src= ${ message.image }>` : "";
      var html = `<div class= "message" data-message-id=${message.id}>
                    <div class="upper-message">
                      <p class="message-user">
                        ${message.user_name}
                      </p>
                      <p class="message-date">
                        ${message.date}
                      </p>
                    </div>
                    <p class="lower-message">
                      <div class="message-content">
                      ${content}
                      </div>
                    </p>
                  </div>`
    return html;
    }
    $('#new_message').on('submit', function(e){
      e.preventDefault();
      var message = new FormData(this);
      var url = (window.location.href);
      $.ajax({
        url: url,
        type: 'POST',
        data: message,
        dataType: 'json',
        processData: false,
        contentType: false
      })
      .done(function(data){
        var html = buildHTML(data);
        $('.messages').append(html);
        $('#message_content').val('');
        scrollBottom();

      })
      .fail(function(data){
        alert('エラーが発生したためメッセージは送信できませんでした。');
      })
      .always(function(data){
        $('.form-submit').prop('disabled', false);
      })
    })

こちらに関するコードは下記のURLを参考にして実装いたしました、この方の記事を読んだ方が効率がいいので参考にしていただければと思います。
(引用https://qiita.com/mmmasuke/items/36365bcdf30eaea65250）

二つ目のメッセージの受信（自動更新機能）について

    var reloadMessages = function(){
      var href = 'api/messages#index {:format=>"json"}'
      var last_message_id = $('.message:last').data('message-id');
      $.ajax({
        url: href,
        type: 'GET',
        data: {id: last_message_id},
        dataType: 'json',
      })
      .done(function(messages) {
        if (messages.length !== 0) {
          var insertHTML = '';
          $.each(messages, function(i, message) {
            insertHTML += buildHTML(message)
          });
          $('.messages').append(insertHTML);
          $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
        }
      })
      .fail(function(){
        alert("自動更新に失敗しました")
      });
    };
  if (document.location.href.match(/\/rooms\/\d+\/messages/)){
    setInterval(reloadMessages, 7000)};
});

  function scrollBottom(){
    var target = $('.message').last();
    var position = target.offset().top + $('.messages').scrollTop();
    $('.messages').animate({
      scrollTop: position
    }, 300, 'swing');
  }

こちらのコードは
(引用https://qiita.com/AK4747471/items/cc0ba52b6ed34f0b4b8c)
こちらの記事を参考に実装いたしました。

ただの感想

実装にあたり、自身が送信のみで非同期通信を実装できたと勘違いしておりました。メッセージの非同期通信には自動更新は必須です。