有没有办法为动作有线聊天框添加临时用户名

Question

您好我在操作电缆上设置了一个基本的聊天室，并想知道是否有办法在聊天室发布时为当前用户提供临时用户名？最好设置好让他们在允许聊天之前输入用户名吗？

先谢谢

这里是我的代码：

这是观点：

<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 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

消息广播作业：

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>

Answer 1

解决方案1 ​​

最初将用户重定向到将有文本框输入用户名的页面 用户输入用户名并点击提交后，将他/她重定向到聊天页面。 现在你有了params [：user_name]，只需在聊天动作中创建@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 you will receive params username. Just create object with it
 # so that you can refer it in chat form
 def chat_window 
  @username = params[:user_name] 
  @messages = Message.all
 end
end

注意：相应地创建路线

现在更改现有表单，如下所示。此表单将隐藏@username值。

<form>
 <label>Say something:</label><br>
 <input type="hidden" id="user_name" value="<%=@username%>">
 <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>

最后的步骤

完成上述事情。只需发送用户名以及您的留言给Room Channel classe发言

  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();

在你的会议室频道中会有这样的用户名

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