如何防止 actioncable 消息显示两次?
how to prevent actioncable message from displaying twice?
我正在构建一个聊天应用程序并有一个错误,当您键入一条消息时,它会显示两条消息而不是一条消息,但是当我重新加载页面时,重复的消息就会消失。有人可以告诉我问题是什么吗?谢谢 !
javascripts/channels/room.咖啡
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) ->
# Called when there's incoming data on the websocket for this channel
$messages = $('#messages')
$messages.append data
$messages.scrollTop $messages.prop('scrollHeight')
speak: (message) ->
@perform 'speak', message: message
javascript/rooms.咖啡
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$messages = $('#messages')
$messages.scrollTop $messages.prop('scrollHeight')
$('#message_input').focus()
$(document).on 'keypress', '#message_input', (e) ->
if e.keyCode == 13 and e.target.value
App.room.speak(e.target.value)
e.target.value = ''
e.preventDefault()
channels/application_cable/connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
logger.add_tags 'ActionCable', current_user.email
end
protected
def find_verified_user
if (current_user = User.find_by_id cookies.signed['user.id'])
current_user
else
reject_unauthorized_connection
end
end
end
end
房间控制器
class RoomsController < ApplicationController
before_action :authenticate_user!
def show
@messages = Message.all
end
end
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.create content: data['message'], user: current_user
end
end
查看_message.html.erb
<div class="message">
<a href="" class="message_profile-pic"></a>
<h2><a href="" class="message_username"><%= link_to message.user.email, message.user %></a></h2>
<div class="form-group">
<div class="col-sm-6">
<span class="user-menu_profile-pic"><%= image_tag message.user.avatar.url(:thumb), class: 'col-sm-2 control-label' %></span>
</div>
</div>
<span class="message_timestamp">
<%= message.created_at %>
</span>
<span class="message_star"></span>
<span class="message_content">
<%= message.content %>
</span>
</div>
房间show.html.erb
<% content_for :title, 'admin | Action Cable Chat' %>
<div class="header">
<div class="team-menu">ActionCable</div>
<h2 class="listings_header">Direct Messages</h2>
<ul class="channel_list">
<li class="channel">
<a class="channel_name"><span class="unread">20</span><span><span class="prefix"> </span>dhh@basecamp.com</span></a>
</li>
</ul>
</div>
</div>
<div class="message-history" id="messages">
<%= render @messages %>
</div>
</div>
<div class="footer">
<div class="user-menu">
<span class="user-menu_username"><%= link_to current_user.email, current_user %></span>
<span class="user-menu_username"><%= image_tag current_user.avatar.url(:thumb) %></span>
<span class="connection_status">online</span>
<span class="logout"><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></span>
</div>
<div class="input-box">
<input type="text" class="input-box_text" id="message_input"/>
</div>
</div>
<% content_for :title, 'admin | Action Cable Chat' %>
<div class="header">
<div class="team-menu">ActionCable</div>
<h2 class="listings_header">Direct Messages</h2>
<ul class="channel_list">
<li class="channel">
<a class="channel_name"><span class="unread">20</span><span><span class="prefix"> </span>dhh@basecamp.com</span></a>
</li>
</ul>
</div>
</div>
<div class="message-history" id="messages">
<%= render @messages %>
</div>
</div>
<div class="footer">
<div class="user-menu">
<span class="user-menu_username"><%= link_to current_user.email, current_user %></span>
<span class="user-menu_username"><%= image_tag current_user.avatar.url(:thumb) %></span>
<span class="connection_status">online</span>
<span class="logout"><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></span>
</div>
<div class="input-box">
<input type="text" class="input-box_text" id="message_input"/>
</div>
</div>
您需要禁用 turbolinks
从 Gemfile 中删除 gem 'turbolinks' 行。从你的 app/assets/javascripts/application.js 中删除 //= require turbolinks。
从 app/views/layouts/application.html.erb 中删除两个 "data-turbolinks-track" => true hash key/value 对。
完成!
您需要禁用 turbolinks 从您的 Gemfile 中删除 gem 'turbolinks' 行。从你的 app/assets/javascripts/application.js 中删除 //= require turbolinks。从 app/views/layouts/application.html.erb 中删除两个 "data-turbolinks-track" => true hash key/value 对。完成!
我正在构建一个聊天应用程序并有一个错误,当您键入一条消息时,它会显示两条消息而不是一条消息,但是当我重新加载页面时,重复的消息就会消失。有人可以告诉我问题是什么吗?谢谢 !
javascripts/channels/room.咖啡
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) ->
# Called when there's incoming data on the websocket for this channel
$messages = $('#messages')
$messages.append data
$messages.scrollTop $messages.prop('scrollHeight')
speak: (message) ->
@perform 'speak', message: message
javascript/rooms.咖啡
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$messages = $('#messages')
$messages.scrollTop $messages.prop('scrollHeight')
$('#message_input').focus()
$(document).on 'keypress', '#message_input', (e) ->
if e.keyCode == 13 and e.target.value
App.room.speak(e.target.value)
e.target.value = ''
e.preventDefault()
channels/application_cable/connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
logger.add_tags 'ActionCable', current_user.email
end
protected
def find_verified_user
if (current_user = User.find_by_id cookies.signed['user.id'])
current_user
else
reject_unauthorized_connection
end
end
end
end
房间控制器
class RoomsController < ApplicationController
before_action :authenticate_user!
def show
@messages = Message.all
end
end
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.create content: data['message'], user: current_user
end
end
查看_message.html.erb
<div class="message">
<a href="" class="message_profile-pic"></a>
<h2><a href="" class="message_username"><%= link_to message.user.email, message.user %></a></h2>
<div class="form-group">
<div class="col-sm-6">
<span class="user-menu_profile-pic"><%= image_tag message.user.avatar.url(:thumb), class: 'col-sm-2 control-label' %></span>
</div>
</div>
<span class="message_timestamp">
<%= message.created_at %>
</span>
<span class="message_star"></span>
<span class="message_content">
<%= message.content %>
</span>
</div>
房间show.html.erb
<% content_for :title, 'admin | Action Cable Chat' %>
<div class="header">
<div class="team-menu">ActionCable</div>
<h2 class="listings_header">Direct Messages</h2>
<ul class="channel_list">
<li class="channel">
<a class="channel_name"><span class="unread">20</span><span><span class="prefix"> </span>dhh@basecamp.com</span></a>
</li>
</ul>
</div>
</div>
<div class="message-history" id="messages">
<%= render @messages %>
</div>
</div>
<div class="footer">
<div class="user-menu">
<span class="user-menu_username"><%= link_to current_user.email, current_user %></span>
<span class="user-menu_username"><%= image_tag current_user.avatar.url(:thumb) %></span>
<span class="connection_status">online</span>
<span class="logout"><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></span>
</div>
<div class="input-box">
<input type="text" class="input-box_text" id="message_input"/>
</div>
</div>
<% content_for :title, 'admin | Action Cable Chat' %>
<div class="header">
<div class="team-menu">ActionCable</div>
<h2 class="listings_header">Direct Messages</h2>
<ul class="channel_list">
<li class="channel">
<a class="channel_name"><span class="unread">20</span><span><span class="prefix"> </span>dhh@basecamp.com</span></a>
</li>
</ul>
</div>
</div>
<div class="message-history" id="messages">
<%= render @messages %>
</div>
</div>
<div class="footer">
<div class="user-menu">
<span class="user-menu_username"><%= link_to current_user.email, current_user %></span>
<span class="user-menu_username"><%= image_tag current_user.avatar.url(:thumb) %></span>
<span class="connection_status">online</span>
<span class="logout"><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></span>
</div>
<div class="input-box">
<input type="text" class="input-box_text" id="message_input"/>
</div>
</div>
您需要禁用 turbolinks 从 Gemfile 中删除 gem 'turbolinks' 行。从你的 app/assets/javascripts/application.js 中删除 //= require turbolinks。 从 app/views/layouts/application.html.erb 中删除两个 "data-turbolinks-track" => true hash key/value 对。 完成!
您需要禁用 turbolinks 从您的 Gemfile 中删除 gem 'turbolinks' 行。从你的 app/assets/javascripts/application.js 中删除 //= require turbolinks。从 app/views/layouts/application.html.erb 中删除两个 "data-turbolinks-track" => true hash key/value 对。完成!