有没有办法将临时用户名添加到操作电缆聊天框

Question

您好，我在 action cable 上设置了一个基本的聊天室，想知道是否有办法在聊天室发帖时为当前用户提供一个临时用户名？最好设置成他们必须先输入用户名才能聊天？

这是我的代码：

这是观点：

<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

最初将用户重定向到将有文本框输入用户名的页面一旦用户输入用户名并点击提交，重定向 him/her 到聊天页面。现在你有 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

注意：相应地创建路线

现在更改现有表单，例如 below.This 表单将隐藏 @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。一旦 he/she 输入用户名，将显示 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>

最后的步骤

一旦发生上述情况done.Just 将用户名连同您的消息一起发送到 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

有没有办法将临时用户名添加到操作电缆聊天框

Is there a way to add a temporary username to action cable chat box

ruby

ruby-on-rails

livechat

actioncable

解决方案 1

解决方案 2：

最后的步骤