🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

解決済

1回答

705閲覧

railsで非同期通信実装中でのエラーについて

tatsu-koharu

総合スコア4

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

0クリップ

投稿2020/12/03 09:58

現在チャットアプリを非同期通信で行いたく実装を進めているところです。
非同期通信実装中出ているエラーについてご教授願いたく投稿させて頂きます。

投稿を行うとデータの保存はされます

terminal

1Parameters: {"authenticity_token"=>"dI20SOvuLzNeOYpg2d+2HVWPooFoW3JEH7H38HSaX6e5JyNjQYUwpclisTB6xmf7+m0z7q4vM64f+Wo03qRkgw==", "chat_message"=>{"message"=>"lllll"}, "commit"=>"送信", "chat_id"=>"44"} 2 User Load (0.5ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1 3 ↳ app/controllers/chat_messages_controller.rb:13:in `chat_message_params' 4 (0.3ms) BEGIN 5 ↳ app/controllers/chat_messages_controller.rb:5:in `create' 6 User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1 7 ↳ app/controllers/chat_messages_controller.rb:5:in `create' 8 Chat Load (0.5ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`id` = 44 LIMIT 1 9 ↳ app/controllers/chat_messages_controller.rb:5:in `create' 10 ChatMessage Create (0.4ms) INSERT INTO `chat_messages` (`message`, `user_id`, `chat_id`, `created_at`, `updated_at`) VALUES ('lllll', 1, 44, '2020-12-03 09:30:34.892409', '2020-12-03 09:30:34.892409') 11 ↳ app/controllers/chat_messages_controller.rb:5:in `create' 12 (0.5ms) COMMIT 13 ↳ app/controllers/chat_messages_controller.rb:5:in `create' 14Completed 200 OK in 15ms (Views: 0.5ms | ActiveRecord: 2.7ms | Allocations: 6974

javascript

1function message() { 2 const submit = document.getElementById("submit"); 3 submit.addEventListener("click", (e) => { 4 const formData = new FormData(document.getElementById("form")); 5 const XHR = new XMLHttpRequest(); 6 XHR.open("POST", `/chats/:chat_id => (${chat.id}/chat_messages`, true); 7 console(XHR) 8 XHR.responseType = "json"; 9 XHR.send(formData); 10 XHR.onload = () => { 11 if (XHR.status != 200) { 12 alert(`Error ${XHR.status}: ${XHR.statusText}`); 13 return null; 14 } 15 const chat = XHR.response.post; 16 const messages = document.getElementById("messages"); 17 const formText = document.getElementById("content"); 18 const HTML = ` 19 <div> 20 ${chat.message} 21 </div>`; 22 message.insertAdjacentHTML("afterend", HTML); 23 formText.value = ""; 24 }; 25 e.preventDefault(); 26 }); 27} 28window.addEventListener("load", message);

6行目のXHR.openでエラーが出ます

error

1Uncaught ReferenceError: chat is not defined 2 at HTMLInputElement.<anonymous> (message.js:6)

その他の記述の以下の通りです

applicationjs

1require("@rails/ujs").start() 2// require("turbolinks").start() 3require("@rails/activestorage").start() 4require("channels") 5require("./preview") 6require("./message") 7//= require 'jquery' 8//=require "popper" 9//=require "bootstrap-sprockets"

chatmessages

1class ChatMessagesController < ApplicationController 2 3 def create 4 @chat_message = ChatMessage.new(chat_message_params) 5 if @chat_message.save 6 render json:{ chat_message: @chat_message} 7 end 8 end 9 10 private 11 12 def chat_message_params 13 params.require(:chat_message).permit(:message).merge(user_id: current_user.id, chat_id: params[:chat_id]) 14 end 15end

view

1<%= form_with(model: [@chat, @chat_message], id: "form" ) do |f| %> 2 <%= f.text_field :message, id:"content" %> 3 <%= f.submit '送信', id:"submit" %> 4<% end %> 5<div id='messages'> 6</div>

chats

1def show 2 @chat_message = ChatMessage.new 3 @chat = Chat.find(params[:id]) 4 @chat_messages = @chat.chat_messages.includes(:user) 5end

行なったこと
エラーの起こっている6行目は、元々下記のような記述だったのですが、

XHR.open("POST", `/chats/:chat_id/chat_messages`, true);

これでは、chat_idを参照できないので、書き換えてデータの保存はできるようになった形です。
application.jsの書き順なども変えてみたのですが、効果はありませんでした。

以上、何かアドバイスをいただけないでしょうか。
よろしくお願いいたします。


環境
ruby:2.6.5
rails:6.0.3.4

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

6行目以前でchatが定義されていません。
恐らくそのためです。
如何でしょうか?

投稿2020/12/06 21:51

tomtomtomtom

総合スコア563

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tatsu-koharu

2020/12/07 10:33

ご回答頂きありがとうございました。 投稿後に6行目以前にchatの定義を行おうとしたのですが、 私自身未熟で定義する方法が分からず断念しました。 現在は、送信したtextが最上部に来るようにして 非同期っぽく見えるような形で実装しました。 PC の性能によっては少々気怠く感じる実装になってるかもしれません。
tomtomtomtom

2020/12/07 20:53

ご解決おめでとうございます。 あまりお役に立てなかったようで申し訳ありません。 また機会がありましたら宜しくお願い致します。
tatsu-koharu

2020/12/09 03:43

とんでも無いです。 コメント頂きありがとうございました。 こちらこそよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問