Getting messages in chat history to display in messenger Pubnub

Question

I have come to post this question after 2 days of torture not being able to understand how I can actually publish the historic messages stored on my pubnub storage account. To try and understand it at its most basic I have made a chat app and used the history function as described in the SDK but still every time I refresh the page the messages are lost. I have tried the backfill and the restore attributes in subscribe with no luck. All I want to do is click refresh on chrome and see the messages still there.

<div><input id=input placeholder=you-chat-here /></div>

Chat Output
<div id=box></div>

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.0.min.js"></script>

<script>(function(){
    var pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo' });
    function $(id) { return document.getElementById(id); }
    var box = $('box'), input = $('input'), channel = 'chat';
    pubnub.addListener({

        message: function(obj) {
            box.innerHTML = (''+obj.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML
        }});
        pubnub.history({
            channel: 'chat',
            reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
            count: 100, // how many items to fetch
            callback : function(msgs) {
                pubnub.each( msgs[0], chat );
            }
        },
        function (status, response) {
            // handle status, response
            console.log("messages successfully retreived")
        });

        pubnub.subscribe({channels:[channel],
                          restore: true,
                          backfill: true,
                          ssl: true});

        input.addEventListener('keyup', function(e) {
            if ((e.keyCode || e.charCode) === 13) {
                pubnub.publish({channel : channel, message : input.value,x : (input.value='')});
            }
        });
    })();
</script>

</body>

Answer 1

EDIT: updated link that was broken. New version of history function is called fetchMessages .

I think your history code is not correct. No need for the callback as your code response will be in the function argument. This example is from the JavaScript SDK docs .

// deprecated function
pubnub.history(
    {
        channel: 'chat',
    },
    function (status, response) {
        var msgs = response.messages;
        
        if (msgs != undefined && msgs.length > 0) {
            // if msgs were retrieved, do something useful
            console.log(msgs);
        }
    }
);

// latest function (response output format has changed)
pubnub.fetchMessages(
    {
        channels: ['chat']
    },
    (status, response) => {
        console.log(msgs);
    }
);