いいね機能をajaxで導入するもリロードしないと反映されない

Question

いいね機能を非同期で実装しようとして記事を見ながらやってみたのですが、
リロードをしないと反映されない状態になっています。
song/show

<!--投稿された歌 -->
<%= image_tag @song.thumbnail.to_s, :size =>"500x300"%>
<%= audio_tag(@song.voice) %>
<%= @song.title %>
<%= @song.description %>
<!--いいね機能 -->
<div id="like_buttons_<%= @song.id %>">
  <%= render 'likes/likes_form', song: @song %>
</div>

<!--投稿したユーザー-->
<%= link_to user_path(@user) do %>
<%= @user.name %>
<% end %>
<!--コメント欄-->
<%= form_for @comment, url: comments_path do |f| %>
<%= f.hidden_field :song_id, :value => @song.id %>
<%= f.text_field :content %>
<%= f.submit "送信" %>
<% end %>
<% @comments.each do |comment| %>
  <%= comment.content %>
  <% if current_user.my_comment?(comment) %>
    <%= button_to "削除", comment_path(comment), method: :delete %>
  <% end %>
<% end %>

ikes/likes_form.html.erb

% if current_user.already_liked?(song) %>
  <%= link_to song_likes_path(song), method: :delete, style: "border-style: none;", remote: true do %>
    <%= icon("fas", "heart") %>
  <% end %>
<% else %>
      <%= link_to song_likes_path(song), method: :post, remote: true do %>
    <%= icon("far", "heart") %>
  <% end %>
<% end %>
<%= song.likes.count %>

likes/create.js.erb

$('#likes_buttons_<%= @song.id %>').html("<%= j(render partial: 'likes/likes_form', locals: {song: @song}) %>");

likes/destroy.js.erb

$('#likes_buttons_<%= @song.id %>').html("<%= j(render partial: 'likes/likes_form', song: @song)%>");

l

Answer 1

websocketというものを使うといいと思います
Rubyはわかりませんがjavascriptはわかるのでサンプル的な何かを張っときますね
参考になれば幸いです

var sock=new WebSocket(サーバーのip);
sock.onmessage=(msg)=>{
    if(msg=="Added Good"){
        //なんか
    }else if(msg=="Subed Good"){
        //なんか
    }
}
sock.send("Clicked Good");

ajaxでしたいのならば、方法は私のしっている範囲では、二つあります
1.サーバー側で応答を返さない
2.サーバー側に、更新されたかを返すやつを作る
1は、一回送って戻ってきたら、それを処理する
2は、定期的にチェックして、更新あったら、処理する
という感じで実装すればいいと思います

2の方法は結構バランスを考える必要があるので大変だと思います
するなら、1秒に一回とかでしょうかね
1の方法ならクライアントは負荷が少ないですが、サーバーは、負荷が結構出ます
なぜなら、言語にもよりますが、応答を返さないということは、その分スレッドが立っているからです

なかなか、リアルタイムって難しいですよね）汗

Answer 2

• いいね押す
• ajaxでサーバーに登録
• サーバーからいいね状態であるという情報をもってくる
• いいね状態に書き換える

Comments

[yambejp]

※外すときも同様
・いいね状態のいいねを押す
・ajaxでサーバーに登録（自分のいいねを削除）
・サーバーからいいね状態ではないという情報をもってくる
・いいね状態を通常に書き替える

[smilax630]

これだとその流れができてないですか？

[yambejp]

> これだとその流れができてないですか？

さあ？できてないから更新が必要なのだとは想像できますが
ご自身の中ではどこで「サーバーからいいね状態であるという情報を
もってきている」のか、その情報をもとにどこで
「いいね状態に書き換える」のでしょうか？

[smilax630]

already_likedというメソッドでいいね状態を情報を取得して、リンクを押すとlikeコントローラーで処理が流れていいね情報を書き換え、remote: trueしてることで、create.js.erbもしくは、destroy.js.erbが呼び出されて、likes_formがrenderされるという流れだと考えています