從服務器端NodeJ編輯客戶端jQuery

Question

所以這就是我想要做的：

index.js（是服務器端NodeJS文件）具有接收webhook函數。 從Facebook收到一些新的味精后，此文件將收到一個事件。

所以我想做的是在客戶端切換click事件，這里有一個名為：conversation.js的javascript文件，這是session.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();
    });
});

因此，當發生事件時，我想通過事件單擊來觸發其中一張對話卡！

任何想法 ？

Answer 1

看得出來， WebSockets的強大功能（平滑地包裝在一個名為socket.io的npm庫中（ docs ）

Socket.IO支持基於事件的實時雙向通信。 它適用於所有平台，瀏覽器或設備，並同時關注可靠性和速度。

socket.io可以將服務器端事件傳遞到客戶端操作中。 一些偽示例代碼：

（NodeJS index.js）

send: function() {
    io.sockets.emit('reload');
}

這是一個簡單的套接字“發射”功能，它向所有活動網頁發送信號。 要接收它，我們將檢查客戶端的javascript：

（script.js）

// Define the socket
var socket = io();

// When required to reload, reload
socket.on("reload", function(r) {
    location.reload();
});

現在，當我們在服務器端發出“重新加載”消息時，我們可以在客戶端“重新加載”頁面。

這對您有幫助嗎？