質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

jQueryの非同期通信、自動更新

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,301

score 13

実現したいこと

プログラミングスクールでチャットアプリを作っています。ユーザー同士がメッセージを送りあう際に、非同期で両者のメッセージが閲覧できるようにする(LINEのように)課題に取り組んでいます。

発生している問題・エラーメッセージ

エラーは起こっていないのですが、自分が送ったメッセージが相手側の画面上に非同期で更新される機能がうまく行きません。リロードすれば両者ともメッセージは表示されます。

ソースコード

app/assets/javascripts/message.js

$(function(){ 
  function buildHTML(message){
   if ( message.image ) {
     var html =
      `<div class="main-chat__message-list__message" data-message-id=${message.id}>
         <div class="main-chat__message-list__message__top">
           <div class="main-chat__message-list__message__top__name">
             ${message.user_name}
           </div>
           <div class="main-chat__message-list__message__top__date">
             ${message.created_at.strftime("%Y年%m月%d日 %H時%M分")}
           </div>
         </div>
         <div class="main-chat__message-list__message__bottom">
           <p class="main-chat__message-list__message__bottom__text">
             ${message.content}
           </p>
         </div>
         <img src=${message.image} >
       </div>`
     return html;
   } else {
     var html =
      `<div class="main-chat__message-list__message" data-message-id=${message.id}>
         <div class="main-chat__message-list__message__top">
           <div class="main-chat__message-list__message__top__name">
             ${message.user_name}
           </div>
           <div class="main-chat__message-list__message__top__date">
             ${message.created_at}
           </div>
         </div>
         <div class="main-chat__message-list__message__bottom">
           <p class="main-chat__message-list__message__bottom__text">
             ${message.content}
           </p>
         </div>
       </div>`
     return html;
   };
 }
$('#new_message').on('submit', function(e){
 e.preventDefault();
 var formData = new FormData(this);
 var url = $(this).attr('action')
 $.ajax({
   url: url,
   type: "POST",
   data: formData,
   dataType: 'json',
   processData: false,
   contentType: false
 })
  .done(function(data){
    var html = buildHTML(data);
    $('.main-chat__message-list').append(html);      
    $('.main-chat__message-list').animate({ scrollTop: $('.main-chat__message-list')[0].scrollHeight});
    $('form')[0].reset();
    $('.form__submit').prop('disabled', false);
  })

  var reloadMessages = function() {
    last_message_id = $('.main-chat__message-list__message:last').data("message-id");
    $.ajax({
      url: "api/messages",
      type: 'get',
      dataType: 'json',
      data: {id: last_message_id}
    })
    .done(function(messages) {
    if (messages.length !== 0) {
      var insertHTML = '';
      $.each(messages, function(i, message) {
        insertHTML += buildHTML(message)
      });
      $('.main-chat__message-list').append(insertHTML);      
      $('.main-chat__message-list').animate({ scrollTop: $('.main-chat__message-list')[0].scrollHeight});
      $('#new_message')[0].reset();
      $('.form__submit').prop('disabled', false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    setInterval(reloadMessages, 7000);
  }
  };
});
});


githubのリンクを貼っておきます。"JavaScript/message.js"に重点をおいて見ていただけるとわかりやすいかと思います。
https://github.com/momotarou1090/chat-space3.git
ブランチはauto-renewブランチです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kyoya0819

    2020/01/22 05:50 編集

    送信自体されているのでしょうか?

    また、現状のコードは基本的に質問に記述してください。

    キャンセル

  • raurauji

    2020/01/22 06:10

    ご返事ありがとうございます!
    現状のmessage.jsのソースコードを追記しました。
    他に必要なものがありましたら、すぐに追記します。
    よろしくお願いします!

    キャンセル

  • raurauji

    2020/01/22 06:12

    送信自体はされています。非同期のまま両者のメッセージをやりとりできる状態にすることが課題です。

    キャンセル

回答 1

checkベストアンサー

+1

リロードすれば動くということはサーバーにメッセージを保持する
機能は実装されているということですよね?
ロングポーリングしないのであれば定期的にajaxでサーバーに
データを取りに行ってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/22 10:26

    回答ありがとうございます。
    定期的に取りに行くとはどういうことでしょうか。
    初心者のため再度補足していただけると嬉しいです。

    キャンセル

  • 2020/01/22 10:34

    定期処理:setInterval
    取りに行く:$.ajax(jQueryじゃなければfetch)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る