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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 5

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

Q&A

解決済

1回答

947閲覧

railsのActionCableでルームを作って入室、退室を繰り返したときの挙動について

amuro_

総合スコア27

Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 5

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

0グッド

0クリップ

投稿2019/03/15 07:30

railsのActionCableでユーザーとルームを作ってチャットルームを作って、そのチャットルームに入室して用がなくなったら退室して違う部屋に入ったりまた同じ部屋に入ったりといったアプリを作っています。
うまくいかないのが、部屋に入ります→チャット打ちます→正常に保存されて表示されます→退室します→別の部屋または同じ部屋に入室します→チャット打ちます→3つ打った文字が表示されます(DBに保存されるのは1回のみ)→退室します→入室します→チャット打ちます→6つ打った文字が表示されます
というように入退室を繰り返すごとに3つずつ表示される回数が増えていきます(DBは正常に保存されている)。
receivedの処理が増えていっている。
退室時に切断するような処理をいれるかんじなのでしょうか?
コードレビューお願いします。

roomという名でチャンネルを作っています。

channels/room_channel.rb class RoomChannel < ApplicationCable::Channel def subscribed stream_from 'room_channel' end def unsubscribed # Any cleanup needed when channel is unsubscribed end def speak(data) message = Message.create!(content: data['message'], user_id: data['user_id'], room_id: data['room_id']) message_temp = ApplicationController.renderer.render(partial: 'messages/message', locals: {message: message}) ActionCable.server.broadcast 'room_channel', {message_temp: message_temp, room_id: data['room_id']} end end
javascript/channels/room.js App.room = App.cable.subscriptions.create("RoomChannel", { connected: function () { }, disconnected: function () { }, received: function (data) { // ここの処理が入退室ごとに1回、3回、6回、9回と増えていってしまう。 $('#messages' + '.room_' + data['room_id']).append(data['message_temp']) }, speak: function (message, user_id, room_id) { return this.perform('speak', { message: message, user_id: user_id, room_id: room_id }); } }, $(function () { $('#input-btn').click(function () { message = $('#input-message').val(); user_id = $('#user_id').text(); room_id = $('#room_id').text(); App.room.speak(message, user_id, room_id); return $('#input-message').val(''); }); }) );

jqueryで#input-btnのボタンを押した時、#input-messageの中身を保存して表示する動きです。
チャットの部分を<div id="room_部屋番号">で囲んで部屋ごとの区別をしています。
user_idはdeviceのcurrent_userから値を持ってきています。

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

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

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

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

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

guest

回答1

0

自己解決

$(document).on("turbolinks:request-start", function() {
App.room.unsubscribe();
});
unsubscribeの処理を入れてあげることによって解決しました。

投稿2019/03/25 04:55

amuro_

総合スコア27

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問