2017-10-05 4 views
0

こんにちは私はアクションケーブルで基本的なチャットルームをセットアップしていて、チャットに投稿中に現在のユーザーに一時的なユーザー名を与える方法があるのだろうかルーム?彼らがチャットすることが許可される前に、彼らは彼らのユーザー名を入力する必要があるように設定することをお勧めしますか?アクションケーブルチャットボックスに一時的なユーザー名を追加する方法はありますか

ここでは、高度な

のおかげで、私が持っているコード:

これは図である。

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.create! content: data['message'] 
end 
end 

メッセージ放送の仕事:

<h1>Chat room</h1> 

<div id="messages"> 
<%= render @messages %> 
</div> 

<form> 
<label>Say something:</label><br> 
<input type="text" data-behavior="room_speaker"> 

</form> 

これは部屋のチャンネルです:

class MessageBroadcastJob < ApplicationJob 
queue_as :default 

def perform(message) 
ActionCable.server.broadcast 'room_channel', message:  render_message(message) 
end 

private 

def render_message(message) 
ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message }) 
end 
end 

とコーヒースクリプト:ここ

App.room = App.cable.subscriptions.create "RoomChannel", 
    connected: -> 
     # Called when the subscription is ready for use on the server 

    disconnected: -> 
     # Called when the subscription has been terminated by the server 


    received: (data) -> 
     $('#messages').append data['message'] 

    speak: (message) -> 
     @perform 'speak' , message: message 



    $(document).on 'keypress', '[data-behavior~=room_speaker]', (event) -> 
    if event.keyCode is 13 
     App.room.speak event.target.value 
     event.target.value = '' 
     event.preventDefault(); 

は私のコントローラである:

class RoomsController < ApplicationController 
def index 
    @messages = Message.all 
end 

end 

私はレンダリングのページ:

<div class="message"> 
    <p><%=message.content%></p> 
</div> 

答えて

1

ソリューション1

は、最初のユーザーをリダイレクト〜へユーザー名を入力して送信をクリックすると、チャットページにリダイレクトされます。 これで、params [:user_name]はチャットアクションで@usernameを作成し、チャットフォームの隠し変数にします。 below.Thisフォームが非表示@username値を持つことになりますように今、あなたの既存のフォームを変更するに応じて

をルートを作成します(つまり、ユーザーがチャットメッセージを入力する形で) 今すぐあなたのフォームは、この

class RoomsController < ApplicationController 

#index action will render form with just text_field to enter username and submit 

def index 
end 

# Now chat_window will handle you chat_form 
# From index action u will receive params username.Just create object with it 
# so that u can refer it in chat form 
def chat_window 
    @username = params[:user_name] 
    @messages = Message.all 
end 
end 

NOTEのようになります。 。

<form> 
<label>Say something:</label><br> 
<input type="hidden" id="user_name" value="<%[email protected]%>"> 
<input type="text" data-behavior="room_speaker"> 
</form> 

対処方法2:

あなただけの非表示と表示機能を使用して、単一の形でそれを行うことができます。 ここでは、最初はチャットフォームを隠していて、ユーザー名divのみを表示しています。 ユーザー名を入力すると、chat_formが表示され、そのフォームのユーザー名フィールドに というユーザー名が追加されます。それだけです。

<h1>Chat room</h1> 

<div class="user-block"> 
<input type="text" id="temp_user" placeholder="Enter Username"></input> 
<button id="submit_username">Ok</button> 
</div> 


<div class="chat-block" style="display: none;"> 
<div id="messages"> 

</div> 

<form> 
<label>Say something:</label><br> 
<input type="hidden" id="user_name" value="anonyms"></input> 
<input type="text" data-behavior="room_speaker"> 

</form> 
</div> 



<script> 

$(document).ready(function(){ 
$("#submit_username").click(function(){ 
    $(".chat-block").show(); 
    $(".user-block").hide() 
    $("#user_name").val($("#temp_user").val()); 
}); 
}); 
</script> 

FinalSteps一度行って上記のものの上

。ちょうどあなたがで@usernameを作成すると、返信用この

def speak(data, user_name) 
    # here you got user_name.Do whatever. 
    # Either create field in message model called user_name or Separate User model. 
    Message.create! content: data['message'] 
end 
+0

おかげで、のようなユーザ名を持っています ルームチャンネルクラッセの話す

App.room = App.cable.subscriptions.create "RoomChannel", connected: -> # Called when the subscription is ready for use on the server disconnected: -> # Called when the subscription has been terminated by the server received: (data) -> $('#messages').append data['message'] speak: (message, user_name) -> @perform 'speak' , message: message, user_name: user_name $(document).on 'keypress', '[data-behavior~=room_speaker]', (event) -> if event.keyCode is 13 App.room.speak event.target.value, $("#user_name").val() event.target.value = '' event.preventDefault(); 

にそして、あなたの部屋チャンネルにメッセージと同様に沿ってユーザ名を送信私は実際にどこにパラメータを送信しているのですか?すみません、私はこれに初めてです – dave

+0

@daveあなたのチャットフォームが正しくレンダリングされているコントローラがありますか?あなたはそれのコードを表示することができます – krishnar

+0

コードの余分なビットが追加されました – dave

関連する問題