So here is what I'm trying to do :
所以这就是我要做的事情:
index.js ( is a server-side NodeJS file ) has a receiving webhook function. This file will receive an event when some new msg has been received from Facebook.
index.js(是服务器端NodeJS文件)具有接收webhook功能。当从Facebook收到一些新的消息时,此文件将收到一个事件。
So what I'm trying to do is to toggle the click event in the client side, where there is a javascript file named : conversation.js and here is the conversation.js file :
所以我要做的是在客户端切换click事件,其中有一个名为:conversation.js的javascript文件,这里是conversation.js文件:
var conversations = {
// Resize elements to fit on screen
// This is really just a temporary hack instead of using endelsss hopurs getting the css/html 100%.
resize: function () {
$("#content .user_conversation").css("width", $(window).width() - $("#left_menu").width() - $("#content .conversationcards").width());
$("#content .user_conversation").css("height", $(window).height() - $("#header").height());
$("#content .user_conversation").css("left", $("#content .conversationcards").width() + 4);
$("#content .conversation_typing").css("top", $(window).height() - $("#content .conversation_typing").outerHeight() - $("#header").height());
if ($(window).width() <= 800) {
$("#content .conversation_user_info").css("display", "none");
} else {
$("#content .conversation_user_info").css("top", $("#content .conversation_name").height() - 1);
$("#content .conversation_user_info").css("height", $("#content .user_conversation").height() - $("#content .conversation_typing").outerHeight());
$("#content .conversation_user_info").css("left", $("#content .user_conversation").width() - $("#content .conversation_user_info").width());
$("#content .conversation_user_info").css("display", "block");
}
if ($("#content .conversation_user_info").css("display") == 'none') {
$("#content .conversation").css("width", $("#content .user_conversation").width());
} else {
$("#content .conversation").css("width", $("#content .user_conversation").width() - $("#content .conversation_user_info").width());
}
$("#content .conversation").css("height", $("#content .user_conversation").height() - $("#content .conversation_typing").outerHeight() - $("#content .conversation_name").height());
$("#content .conversation_messages").css("top", $("#content .conversation_name").height() );
$("#content .conversation_messages").css("width", $("#content .user_conversation").width() - $("#content .conversation_user_info").width() );
},
// Start the functionality
start: function () {
var html = "";
// Load ongoing conversations
$.get("/facebook/conversations",function(data){
var pageConversations = (JSON.parse(data)).data;
// Get info about users
for (var i = 0; i <= pageConversations.length - 1; i++) {
html = html + conversations.createConversationCard(pageConversations[i]);
}
$("#content .conversationcards").html(html);
});
},
getUserFromArray: function( id, array ) {
for (var i = 0; i < array.length; i++) {
if ( array[i].facebookid == id ) return array[i];
}
},
// Get user from database
getDialog: function( id, callback ) {
// Load dialog from database
var html = "";
$.get("/dialogs/id/" + id,function(data){
console.log('find this ' + data);
callback( JSON.parse(data) );
});
},
// Get user from database
getUser: function( id, callback ) {
// Load dialog from database
var html = "";
$.get("/dialogs/user/" + id,function(data){
callback( JSON.parse(data) );
});
},
// Creates a conversationcard
createConversationCard: function (conversation) {
// Get data about the user who started the conversation
var user= JSON.parse( $.get({url:"/facebook/user/" + getConversationStarter(conversation.senders.data).id,async: false}).responseJSON );
console.log(conversation);
console.log( user );
var output = {};
output.latesttext = conversation.snippet;
output.id = conversation.id;
output.name = user.name;
output.avatar = user.picture != undefined ? user.picture.data.url : "";
output.formatted_time = formatTime( conversation.updated_time );
return Mustache.render($("#templates #conversations .conversationcard").html(), output);
},
showConversation: function (conversationid) {
var conversationmessages = JSON.parse($.get({url:"/facebook/conversation/messages/" + conversationid,async: false}).responseJSON).data;
var conversationinfo = JSON.parse($.get({url:"/facebook/conversation/" + conversationid,async: false}).responseJSON);
var user = JSON.parse( $.get({url:"/facebook/user/" + getConversationStarter(conversationinfo.senders.data).id,async: false}).responseJSON );
console.log( conversationid );
console.log( conversationmessages );
console.log( conversationinfo );
console.log( user );
var output = {};
output.name = user.name;
$('#content #message_input').data("userid",user.name); // To do : changed from id to name.
$('#content #message_input').data('conversationid', conversationid); // added by MAziar
output.avatar = user.picture != undefined ? user.picture.data.url : "";
output.background = user.cover != undefined ? user.cover.source : "";
var messages = "";
//for (var i = conversationmessages.length - 1; i >= 0; i--) {
for (var i = 0; i < conversationmessages.length; i++) {
var m = {};
m.usermessage = conversationmessages[i].from.id == user.id ? "usermessage" : "";
m.avatar = user.picture != undefined ? user.picture.data.url : "";
m.text = conversationmessages[i].message;
// Check for attachments
if ( conversationmessages[i].attachments != undefined ) {
// Check if file attachment
if ( conversationmessages[i].attachments.data[0].file_url != undefined ) {
m.attachment_file = true;
m.attachment_url = conversationmessages[i].attachments != undefined ? conversationmessages[i].attachments.data[0].file_url : "";
m.attachment_name = conversationmessages[i].attachments != undefined ? conversationmessages[i].attachments.data[0].name : "";
}
// If image
if ( conversationmessages[i].attachments.data[0].image_data != undefined ) {
var image = conversationmessages[i].attachments.data[0].image_data;
m.attachment_image = true;
m.attachment_url = image.animated_gif_preview_url != undefined ? image.animated_gif_preview_url : image.preview_url;
//m.attachment_width = conversationmessages[i].attachments.data[0].image_data.width;
//m.attachment_height = conversationmessages[i].attachments.data[0].image_data.height4;
}
}
// Check for shares
if ( conversationmessages[i].shares != undefined ) {
m.attachment_image = true;
m.attachment_url = conversationmessages[i].shares.data[0].link;
m.attachment_width = 40;
}
messages = messages + Mustache.render($("#templates #conversations .conversation_message").html(), m);
}
// Fill the header for the conversation
$("#content .conversation_name").html(Mustache.render($("#templates #conversations .conversationname").html(), output));
$("#content .conversation_user_info").html(Mustache.render($("#templates #conversations .users_info").html(), output));
$("#content .conversation_messages").html(messages);
$('#content .conversation_typing').css("display", "inherit");
$('#content #message_input').focus();
},
// Dummy/Test
getDummyPerson: function (id) {
for (var i = 0; i < dummy_conversations_data.length - 1; i++) {
if (dummy_conversations_data[i].id == id) return dummy_conversations_data[i];
}
},
// When a message should be posted to the user
postMessage: function( inputField ) {
var message = $('#content #message_input').val();
console.log("Sending data: " + message);
$.post("/facebook/post/message/" + $('#content #message_input').data("userid"),{text:message},function() {
console.log ('here the conversationid is ' + $('#content #message_input').data("conversationid") );
var cid = $('#content #message_input').data("conversationid");
var msg = message;
$('#content #message_input').val("");
conversations.showConversation(cid);
$(".conversationcard[data-id='" + cid +"']").trigger('click'); // This will do it for send, one for receiving part is needed
$(".conversationcard[data-id='" + cid +"']").find('.text').html(msg) ;
//conversations.showConversation($(this).data("id"));
//conversations.resize();
});
return false;
}
}
// Initilize events for this page
$(document).ready(function () {
// When a conversationcard is clicked
$("body").on("click", ".conversationcard", function (event) {
$(".conversationcard.selected").toggleClass("selected");
$(this).toggleClass("selected");
console.log('look for this : ' + $(this).data("id"));
conversations.showConversation($(this).data("id"));
conversations.resize();
});
});
So when an event occures I want to trigger one of the conversationCards with the event click!
所以当一个事件发生时我想用事件点击触发其中一个conversationCards!
Any idea ?
任何的想法 ?
1 个解决方案
#1
0
Behold, the almighty power of WebSockets (smoothly wrapped in an npm library called socket.io (docs)
看,WebSockets的全能功能(顺利包装在名为socket.io(docs)的npm库中)
Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.
Socket.IO支持实时双向基于事件的通信。它适用于每个平台,浏览器或设备,同样关注可靠性和速度。
socket.io can pass server side events into client side actions. Some pseudo example code:
socket.io可以将服务器端事件传递到客户端操作。一些伪示例代码:
(NodeJS index.js)
send: function() {
io.sockets.emit('reload');
}
This is a simple socket 'emit' funciton, which sends a signal to all active webpages. To receive it, we'll check the javascript of the client side:
这是一个简单的套接字'emit'功能,它向所有活动网页发送信号。要接收它,我们将检查客户端的javascript:
(script.js)
// Define the socket
var socket = io();
// When required to reload, reload
socket.on("reload", function(r) {
location.reload();
});
Now when we're emitting the message 'reload' on the server side, we can 'reload' the page on the client side.
现在,当我们在服务器端发出消息'reload'时,我们可以在客户端“重新加载”页面。
Would this help you on your way?
这会对你有所帮助吗?
#1
0
Behold, the almighty power of WebSockets (smoothly wrapped in an npm library called socket.io (docs)
看,WebSockets的全能功能(顺利包装在名为socket.io(docs)的npm库中)
Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.
Socket.IO支持实时双向基于事件的通信。它适用于每个平台,浏览器或设备,同样关注可靠性和速度。
socket.io can pass server side events into client side actions. Some pseudo example code:
socket.io可以将服务器端事件传递到客户端操作。一些伪示例代码:
(NodeJS index.js)
send: function() {
io.sockets.emit('reload');
}
This is a simple socket 'emit' funciton, which sends a signal to all active webpages. To receive it, we'll check the javascript of the client side:
这是一个简单的套接字'emit'功能,它向所有活动网页发送信号。要接收它,我们将检查客户端的javascript:
(script.js)
// Define the socket
var socket = io();
// When required to reload, reload
socket.on("reload", function(r) {
location.reload();
});
Now when we're emitting the message 'reload' on the server side, we can 'reload' the page on the client side.
现在,当我们在服务器端发出消息'reload'时,我们可以在客户端“重新加载”页面。
Would this help you on your way?
这会对你有所帮助吗?