【发布时间】:2017-12-21 14:13:17
【问题描述】:
我的 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?)并在每次请求时提供它。
所以,问题是:每次创建新聊天室时,如果我希望它进行流式传输(即,能够发布消息以立即流式传输到该聊天室的每个参与者),我需要手动更改文件(通过添加空格,或添加 cmets 或记录到控制台,something)并保存它,以便 rails 认为文件已更改并重新加载它,从而再次迭代所有包含新创建的聊天室的 Chatrooms .
否则,当我在尚未流式传输的聊天室中发布(按回车键)消息时(因为缓存版本看不到它),我得到一个
未捕获的类型错误:无法读取未定义的属性“setChatroomId” 在 HTMLTextAreaElement。 (messages.self-cbf13df66ead12b7956faa24e880ce07c0289634216a096fafd4ac1c6d262f43.js?body=1:436) 在 HTMLTextAreaElement.dispatch (jquery-1.11.3.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js?body=1:5) 在 HTMLTextAreaElement.r.handle (jquery-1.11.3.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js?body=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;
}
});
}
我知道这个错误很明显,因为尚未为 ID 为 38 的新聊天室定义 App['room' + 38],我们试图在其中发布消息(此处为 ID 大于 37 的所有聊天室)
但是我如何让 rails 理解每次创建新聊天室时都需要重新加载此文件。如果不是每次,那么在每个请求中?基本上,告诉 Rails 不要预编译/缓存它,这样我就可以创建聊天室并随时随地从它们流式传输?
【问题讨论】:
标签: javascript ruby-on-rails asset-pipeline actioncable precompile