客户端显示重新加载页面时最后一个连接用户的数据
Client-side shows data from the last user who connected when reload the page
我正在尝试创建一个 "lobby",您可以在其中加入派对,其他用户可以从列表中接受他想要的人,我正在使用 ActionCable 并且Ruby 在 Rails
传入请求显示来自最后一个连接的用户接收数据的信息,并且必须显示向我们的传入请求的信息(不要用其他用户数据改变我们的观点!).
这就是js文件(咖啡)
App.join = App.cable.subscriptions.create "JoinChannel",
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) ->
$('#join_list_table').empty()
this.render_list(data)
$(".button-collapse").sideNav();
$(".modal-trigger").click ->
joinListId = $(this).attr('id')
App.join.joinTheList joinListId
# Called when there's incoming data on the websocket for this channel
joinTheList: (listId) ->
@perform "join", list_id: listId
$('.modal').modal opacity: 0
leave: ->
render_list: (data) ->
joinLists = data['joinLists']
for joinList in joinLists
joinings = joinList['joinings']
if joinList['user']['id'] != data['current_user_id'] # here must say if the joinlist have the same id than the user
$('#join_list_table').append(
"<tr>
<td>#{joinList['user']['name']}</td>
<td>#{joinList['user']['email']}</td>
<td>#{joinList['user']['language']}</td>
<td>#{joinList['user']['country_code']}</td>
<td>#{joinList['user']['price']}</td>
<td>#{joinList['user']['currency']}</td>
<td>
<a class='modal-trigger' id='#{joinList['list']['id']}' href='#modal#{joinList['list']['id']}' >
Join
</a>
</td>
</tr>
")
$('main').append(
"<div class='modal z-depth-0' id='modal#{joinList['list']['id']}'>
<div class='modal-content'>
<div class='col s12'>
<ul id='joinings#{joinList['list']['id']}' class='collection with-header'>
<li class='collection-header'><h4>Join list for #{joinList['user']['name']}</h4></li>
</ul>
</div>
</div>
</div>")
for joining in joinings
$("#user_#{joining['user']['id']}_joining").remove();
$("#joinings#{joinList['list']['id']}").append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
else
joinings = joinList['joinings']
for joining in joinings
$('#slide-out').append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
document.addEventListener 'turbolinks:load', ->
App.join.perform "render_all"
$('#query').on 'keyup', ->
value = $(this).val().toLowerCase()
$('tr').filter ->
$(this).toggle $(this).text().toLowerCase().indexOf(value) > -1
那是 ruby 文件
class JoinChannel < ApplicationCable::Channel
def subscribed
unless current_user.join_list
current_user.create_join_list
end
stream_from "join_channel"
render_all
end
def unsubscribed
if current_user.join_list.joinings
current_user.join_list.joinings.destroy_all
end
current_user.join_list.destroy
# Any cleanup needed when channel is unsubscribed
end
def join(data)
joinlist = JoinList.find(data['list_id'])
unless current_user.joining
puts "esta creando"
current_user.create_joining(join_list_id: joinlist.id)
else
puts "esta actualizando"
current_user.joining.update(join_list_id: joinlist.id)
end
render_all
end
def render_all
joinlistArr = []
joinlists = JoinList.joins(:user)
joinlists.each do |joinlist|
joiningusers = []
joinlist.joinings.each do |joining|
joiningusers << {'user' => joining.user}
end
joinlistArr << {'list' => joinlist, 'user' => joinlist.user, 'joinings' => joiningusers}
end
puts "dame los joinings de la joinlist del current_user"
puts current_user.join_list.joinings
ActionCable.server.broadcast "join_channel", {joinLists: joinlistArr, current_user_id: current_user.id}
end
end
已解决!
改变
ActionCable.server.broadcast "join_channel", {joinLists: joinlistArr, current_user_id: current_user.id}
为
JoinChannel.broadcast_to(
current_user,
joinLists: joinlistArr,
current_user_id: current_user.id
)
我正在尝试创建一个 "lobby",您可以在其中加入派对,其他用户可以从列表中接受他想要的人,我正在使用 ActionCable 并且Ruby 在 Rails
传入请求显示来自最后一个连接的用户接收数据的信息,并且必须显示向我们的传入请求的信息(不要用其他用户数据改变我们的观点!).
这就是js文件(咖啡)
App.join = App.cable.subscriptions.create "JoinChannel",
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) ->
$('#join_list_table').empty()
this.render_list(data)
$(".button-collapse").sideNav();
$(".modal-trigger").click ->
joinListId = $(this).attr('id')
App.join.joinTheList joinListId
# Called when there's incoming data on the websocket for this channel
joinTheList: (listId) ->
@perform "join", list_id: listId
$('.modal').modal opacity: 0
leave: ->
render_list: (data) ->
joinLists = data['joinLists']
for joinList in joinLists
joinings = joinList['joinings']
if joinList['user']['id'] != data['current_user_id'] # here must say if the joinlist have the same id than the user
$('#join_list_table').append(
"<tr>
<td>#{joinList['user']['name']}</td>
<td>#{joinList['user']['email']}</td>
<td>#{joinList['user']['language']}</td>
<td>#{joinList['user']['country_code']}</td>
<td>#{joinList['user']['price']}</td>
<td>#{joinList['user']['currency']}</td>
<td>
<a class='modal-trigger' id='#{joinList['list']['id']}' href='#modal#{joinList['list']['id']}' >
Join
</a>
</td>
</tr>
")
$('main').append(
"<div class='modal z-depth-0' id='modal#{joinList['list']['id']}'>
<div class='modal-content'>
<div class='col s12'>
<ul id='joinings#{joinList['list']['id']}' class='collection with-header'>
<li class='collection-header'><h4>Join list for #{joinList['user']['name']}</h4></li>
</ul>
</div>
</div>
</div>")
for joining in joinings
$("#user_#{joining['user']['id']}_joining").remove();
$("#joinings#{joinList['list']['id']}").append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
else
joinings = joinList['joinings']
for joining in joinings
$('#slide-out').append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
document.addEventListener 'turbolinks:load', ->
App.join.perform "render_all"
$('#query').on 'keyup', ->
value = $(this).val().toLowerCase()
$('tr').filter ->
$(this).toggle $(this).text().toLowerCase().indexOf(value) > -1
那是 ruby 文件
class JoinChannel < ApplicationCable::Channel
def subscribed
unless current_user.join_list
current_user.create_join_list
end
stream_from "join_channel"
render_all
end
def unsubscribed
if current_user.join_list.joinings
current_user.join_list.joinings.destroy_all
end
current_user.join_list.destroy
# Any cleanup needed when channel is unsubscribed
end
def join(data)
joinlist = JoinList.find(data['list_id'])
unless current_user.joining
puts "esta creando"
current_user.create_joining(join_list_id: joinlist.id)
else
puts "esta actualizando"
current_user.joining.update(join_list_id: joinlist.id)
end
render_all
end
def render_all
joinlistArr = []
joinlists = JoinList.joins(:user)
joinlists.each do |joinlist|
joiningusers = []
joinlist.joinings.each do |joining|
joiningusers << {'user' => joining.user}
end
joinlistArr << {'list' => joinlist, 'user' => joinlist.user, 'joinings' => joiningusers}
end
puts "dame los joinings de la joinlist del current_user"
puts current_user.join_list.joinings
ActionCable.server.broadcast "join_channel", {joinLists: joinlistArr, current_user_id: current_user.id}
end
end
已解决!
改变
ActionCable.server.broadcast "join_channel", {joinLists: joinlistArr, current_user_id: current_user.id}
为
JoinChannel.broadcast_to(
current_user,
joinLists: joinlistArr,
current_user_id: current_user.id
)