Maziar Maziar - 3 months ago 11
Node.js Question

Edit client-side jQuery from server-side NodeJs

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.

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 :

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!

Any idea ?

Answer

Behold, the almighty power of WebSockets (smoothly wrapped in an npm library called socket.io (docs)

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 can pass server side events into client side actions. Some pseudo example code:

(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:

(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.

Would this help you on your way?