소개

현재 Ajax를 사용한 채팅 기능을 개발하고 있어, 그 중에서도 특히 손을 태운 에러를 소개하고 싶습니다.

이번은 이 채팅 기능을 만드는 방법이 아니라 발생한 에러, 버그를 어떻게 해결했는지를 공유하는 것입니다.

간단하고 그런 것도 모르는 것이라고 생각되는 분도 계실지도 모릅니다만 거기는 굉장히 참아 주세요.

덧붙여서 여기가 개발중인 채팅 앱입니다.

1. 송신하면 [object Object]라고 표시된다.

한 가지 기능이 완성되었으므로 시험에 메시지를 보냈습니다.

1회째는 「아아아아아」라고 텍스트만.
두 번째는 이미지만 보냈습니다.

그러면 ,,
이미지와 같이 텍스트를 전송해도 이미지 태그도 함께 전송되어 [object Object]로 표시되고 이미지만을 전송해도 [object Object]로 표시됩니다.

원인

· jbuilder를 작성하는 방법이 잘못되었습니다.

원래 jbuilder에서 이미지를 쓰는 방법이 잘못되었습니다.
_message.html.haml에서는 image_tag message.image.url이지만, jbuilder에서는 message.image라고 밖에 쓰지 않았기 때문에 잘 읽히지 않았다는 것입니다.

_message.html.haml

.message
  .message--upper__info
    .message--upper__info__user
      = message.user.name
    .message--upper__info__date
      = message.created_at.strftime("%Y/%m/%d %H:%M")
  .message--lower
    - if message.content.present?
      %p.message--lower__text
        = message.content
    = image_tag message.image.url, class: 'message--lower__info' if message.image.present?

create.json.jbuilder

json.image   @message.image

#これを以下のように治した。
json.image   @message.image.url

이제 [object Object]라는 표시는 해소되지만 다음은 null로 표시된다.
이것은 아래에서 해결됩니다.

・기본적으로 화상이 표시되는 설정이 되어 있었다.

메시지 기능은 이미지도 텍스트도 모두 보낼 수 있지만, 현재라면 텍스트만을 송신해도 이미지가 붙어 온다.

이것은 가변으로 치료한다.
아래쪽에 있는 안에는 디폴트로 텍스트와 이미지가 표시되게 되어 있다.

해결책으로서는 디폴트로 화상을 표시시키지 않고, 조건 분기로 「화상이 있으면 변수 image에 화상을 보낸다. 없으면 화상은 표시시키지 않는다」라고 하는 바람으로 해 간다.

before

  function buildHTML(message) {
    var html = `<div class="message">
                  <div class="message--upper__info">
                    <div class="message--upper__info__user">
                      ${message.user_name}
                    </div>
                    <div class="message--upper__date">
                      ${message.created_at}
                    </div>
                  </div>
                  <div class="message--lower">
                    <p class="message--lower__text">
                      ${message.content}
                    </p>
                    ${message.image}　　　#ここを${image}に変えるよ
                  </div>
                </div>`
    return html;
  }

after

  function buildHTML(message) {
    var image = ""
    message.image ? image = `<img src="${message.image}">` : image = ""

    var html = `<div class="message">
                  <div class="message--upper__info">
                    <div class="message--upper__info__user">
                      ${message.user_name}
                    </div>
                    <div class="message--upper__date">
                      ${message.created_at}
                    </div>
                  </div>
                  <div class="message--lower">
                    <p class="message--lower__text">
                      ${message.content}
                    </p>
                    ${image}
                  </div>
                </div>`
    return html;
  }

이제 텍스트를 보내면 텍스트만 표시.
화상을 송신하면 화상만 표시를 실현할 수 있었다.

2. 연속 게시할 수 없음

겨우 문제가 해결되었다고 생각하면 다음은 중요한 송신 기능 자체에 문제가 있어, 한 번 재읽지 않으면 송신할 수 없는 상태가 되고 있다.

원인

검증에서 양식을 살펴보면
전송 전


전송 후


차이점을 알 수 있습니까?
전송 후 disabled라는 문자가 추가되고 있으며, 이 녀석이 이번 원인.

해결책

우선 "disabled". 이 녀석이 표시되지 않도록 한다.

message.js

$('#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);
      $('.messages').append(html)
      $('#message_js').val('')

//////////////こいつも加える。↓
      $('form')[0].reset();
////////////////

      scroll();
    })
    .fail(function() {
      alert('error');
    })

//ここから
    .always(() => {
      $(".submit__btn").removeAttr("disabled");
    });
//ここまでを追加して$(".submit__btn")は自身のsubmitボタンのidなりclass名で！

이상의 2점을 추가하는 것으로 해결할 수 있었다.