Rails TurboStream 同步多态视图
IAM正在处理一个任务,该任务将在日历上显示约会,其中约会的位置由其start_time
和end_time
,使用Rails7 + TurboStream进行同步(实时) )参与者之间的约会(创建/更新/破坏)。
这是一个问题:参与者(用户)生活在不同的时区
中,以便每个用户日历上的约会位置不同,例如,我在我的时区设置了一个约会,请在上午8点 - && && gt; ,由于他的时区,我的伴侣将在晚上8点至晚上8点 - 时间见到约会。现在,如果json
格式中的约会数据,则在js
中的某些代码(在正面)中,我们可以处理这种情况。但是,我们如何通过服务器有效渲染来做到这一点呢? Hotwire Style将直接将HTML与客户同步,因此我必须向所有参与者广播约会的HTML。
# appointment view on calendar
<div id="appointment<%= appointment.id %><%= current_user.timezone %>"
class="absolute top- left-" # <-- base on timezone
# update appointment success -> sync
def update
# ...
if @appointment.save
# ....
@appointment.participant_timezones.each do |tz|
Turbo::StreamsChannel.broadcast_replace_to(
@appointment,
target: ...,
partial: ..., # this will be render base on user timezone
locals: {timezone: tz}
)
end
end
如您所见,在我当前的解决方案中,我必须同步多个涡轮框架(对于每个参与者的时区),而且我还需要同步/cache时区,我认为这不是有效的方法。
有什么方法可以拦截turbo js
,以便我只广播一个涡轮框架,每个客户端JS都会在DOM操作之前对其进行操纵?
-> user1: turbo.js update css position -> dom replace
|
one update appointment -> broadcast updated frame ->|->user2: ................................
|
-> ...
iam working on a task that make appointments that will show on calendar in which the appointment's position be calculated by its start_time
and end_time
, iam using Rails7 + TurboStream to sync (real time) the appointment(create/update/destroy) between its participants.
Here is the problem: participants (users) live in different timezones
so that the position of the appointment on each user's calendar are different, for example, i setup a appointment at my timezone at 8AM->10AM, my partner will see the appointment on 8PM->10PM due to his timezone. Now if the appointment data in json
format then which some code in js
(on frontend) we could handle this case. But how could we do it by server rendering effectively ? Hotwire style will sync HTML directly to clients, hence i have to broadcast the appointment's html in variant timezones to all participants.
# appointment view on calendar
<div id="appointment<%= appointment.id %><%= current_user.timezone %>"
class="absolute top- left-" # <-- base on timezone
# update appointment success -> sync
def update
# ...
if @appointment.save
# ....
@appointment.participant_timezones.each do |tz|
Turbo::StreamsChannel.broadcast_replace_to(
@appointment,
target: ...,
partial: ..., # this will be render base on user timezone
locals: {timezone: tz}
)
end
end
As you can see, in my current solution, i have to sync multiple turbo frames (for each participant's timezone) and i also need to sync/cache timezones, i think it is not an effective way.
Is there any way to intercept turbo js
so that i just broadcast only one turbo frame and each client js will manipulate it before do Dom actions ?
-> user1: turbo.js update css position -> dom replace
|
one update appointment -> broadcast updated frame ->|->user2: ................................
|
-> ...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论