Framework7 + Messages + Socketio modified: https://framework7.io/docs/messages.html

framework7-messages-socketio.js

var myApp = new Framework7();

var $$ = Dom7;

// Conversation flag
var conversationStarted = false;

// Init Messages
var myMessages = myApp.messages('.messages', {
    autoLayout: true
});

// Init Messagebar
var myMessagebar = myApp.messagebar('.messagebar');

// Socket - Notify Incoming Chat
socket.on('notifyIncomingChat', function(data) {
    console.log("[DEBUG][io.sockets][notifyIncomingChat]", data);

    var userId = data.userId;

    //Where loggedUserId is an alias of logged user's id set e.g via cookie, local storage
    if (loggedUserId !== userId) {

        myMessages.addMessage({
            text: data.text,
            type: 'received', //Default to received
            avatar: data.avatar,
            name: data.name,
            day: data.day,
            time: data.time
        }, 'append');
    }
});

// Handle message
$$('.messagebar .link').on('click', function() {
    // Message text
    var messageText = myMessagebar.value().trim();
    // Exit if empy message
    if (messageText.length === 0) return;

    // Empty messagebar
    myMessagebar.clear()

    // Default to sent
    var messageType = 'sent';

    // Avatar and name for received message
    var avatar, name;
    if (messageType === 'received') {
        avatar = 'http://lorempixel.com/output/people-q-c-100-100-9.jpg';
        name = 'Kate';
    }

    var messageDay = !conversationStarted ? 'Today' : false;
    var messageTime = !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false;

    // Add message
    myMessages.addMessage({
        // Message text
        text: messageText,
        // Message type
        type: messageType,
        // Avatar and name:
        avatar: avatar,
        name: name,
        // Day
        day: messageDay,
        time: messageTime
    })

    //Socket - Notify server-side to emit to client-side incoming chat
    socket.emit('notifyIncomingChatRequest', {
        // Message text
        text: messageText,
        // Message type
        type: messageType,
        // Avatar and name:
        avatar: avatar,
        name: name,
        // Day
        day: messageDay,
        time: messageTime
    });

    // Update conversation flag
    conversationStarted = true;
});