我的app / assets / javascripts / channels文件夹中有一个messages.js.erb文件,该文件应生成代码以从数据库中获取每个聊天室并为该聊天室创建频道订阅。
这是我的messages.js.erb文件
//**app/assets/javascripts/channels/messages.js.erb**
$(document).on('turbolinks:load', function() {
submitNewMessage();
});
<% Chatroom.all.each do |chatroom| %>
App['room' + <%=chatroom.id%>] = App.cable.subscriptions.create({channel: 'MessagesChannel', room: <%=chatroom.id%>}, {
received: function(data) {
$("[data-chatroom='" + this.chatroomId + "']").removeClass('hidden');
return $("[data-chatroom='" + this.chatroomId + "']").append(data.message);
},
setChatroomId: function(chatroomId) {
this.chatroomId = chatroomId;
}
});
<% end %>
function submitNewMessage(){
//console.log(uid);
$('textarea#message_content').keydown(function(event) {
if (event.keyCode === 13) {
var msg = event.target.value;
var chatroomId = $("[data-chatroom]").data().chatroom;
var uid = $('#uid').val();
//console.log(uid);
App['room' + chatroomId].setChatroomId(chatroomId);
App['room' + chatroomId].send({message: msg, chatroom_id: chatroomId, user_id: uid});
$('[data-textarea="message"]').val(" ");
return false;
}
});
}
优选地,每次创建新聊天室时都应该重新加载该文件,但是rails在第一次加载后缓存(precompiling?
)文件(asset?
)并在每次请求时提供它。
所以,问题是:每次创建一个新的聊天室时,如果我想让它流式传输(即能够发送消息立即流式传输给该聊天室的每个参与者),我需要手动更改文件(通过添加空格,或添加注释或记录到控制台,something
)并保存它,以便rails认为文件已更改并重新加载它,从而再次迭代所有包含新创建的聊天室的Chatroom
s。
否则,当我在一个尚未流媒体的聊天室中发布消息(点击输入)时(因为缓存版本看不到它)我得到了一个
未捕获的TypeError:无法读取HTMLTextAreaElement中未定义的属性“setChatroomId”。在HTMLTextAreaElement.dispatch(jQuery的1.11.3.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js体= 1〜5):(436?messages.self-cbf13df66ead12b7956faa24e880ce07c0289634216a096fafd4ac1c6d262f43.js体= 1)在HTMLTextAreaElement.r.handle(jquery的1.11 ?.3.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js体= 1:5)
在我的浏览器控制台(开发人员工具)。错误的来源是:
这是生成的messages.js代码(为简洁而修剪重复行)
$(document).on('turbolinks:load', function() {
submitNewMessage();
});
App['room' + 1] = App.cable.subscriptions.create({channel: 'MessagesChannel', room: 1}, {
received: function(data) {
$("[data-chatroom='" + this.chatroomId + "']").removeClass('hidden');
return $("[data-chatroom='" + this.chatroomId + "']").append(data.message);
},
setChatroomId: function(chatroomId) {
this.chatroomId = chatroomId;
}
});
.
.
.
.
.
.
.
App['room' + 37] = App.cable.subscriptions.create({channel: 'MessagesChannel', room: 37}, {
received: function(data) {
$("[data-chatroom='" + this.chatroomId + "']").removeClass('hidden');
return $("[data-chatroom='" + this.chatroomId + "']").append(data.message);
},
setChatroomId: function(chatroomId) {
this.chatroomId = chatroomId;
}
});
function submitNewMessage(){
//console.log(uid);
$('textarea#message_content').keydown(function(event) {
if (event.keyCode === 13) {
var msg = event.target.value;
var chatroomId = $("[data-chatroom]").data().chatroom;
var uid = $('#uid').val();
App['room' + chatroomId].setChatroomId(chatroomId); // <-- line 436
App['room' + chatroomId].send({message: msg, chatroom_id: chatroomId, user_id: uid});
$('[data-textarea="message"]').val(" ");
return false;
}
});
}
我明白这个错误是显而易见的,因为App['room' + 38]
尚未定义为id为38的新聊天室,我们正在尝试发布消息(此处,所有聊天室的ID大于37)
但是,如何让rails了解每次创建新聊天室时都需要重新加载此文件。如果不是每次,那么每次请求?基本上,告诉rails不要预先编译/缓存它,以便我可以在移动中创建聊天室并从中流式传输?
将您的messages.js.erb
文件移动到lib/assets
或vendor/assets
目录。
来自doc:
... lib / assets或vendor / assets下的资产可通过应用程序清单包含但不再是预编译数组的一部分。
确保它没有在你的application.js
中列出,你应该好好去。
我想你使用了https://www.thegreatcodeadventure.com/rails-5-action-cable-with-multiple-chatroom-subscriptions/的教程,这是一个很好的教程。您应该解决此问题,而不是更改预编译。而是更有效地吸收渠道。
例如,从外部执行方法。使用帮助方法只获取所需的房间。
subscripeToChannels(<%= raw chatrooms_for_client %>)
在订阅方法中检查您是否已经订阅。
for (var i = 0; i < App.cable.subscriptions.subscriptions.length; i++) {
var s = App.cable.subscriptions.subscriptions[i]
var JSONObject = JSON.parse(s.identifier);
var room = JSONObject["room"];
if (room == chatroomId)
{
preventMultipleSubscripe = true;
}
}
如果创建了新房间,您可以在create.js.erb文件中再次执行subscripeToChannels。
subscripeToChannels(<%= raw chatrooms_for_client %>)
对我来说,这以更清洁的方式解决了它