Question

I save the value of a textarea id="save" inside addEventListener. Then, I send it to the server with xhr and at the same time I open a channel by using Google App Engine Channel API, then I am trying to capture the message sent back with onMessage.

Everything works, except the returned message. I understand that the returned message will be evt.data but it is not logged. Can you help me understand what I am doing wrong? This is a follow up to my previous question. Thanks!

document.getElementById("save").addEventListener
(
    "click", 
    function ()
    {
        var userEmail = document.getElementById("getEmail").value;
        var formData = new FormData();
        formData.append("extension_user", userEmail);

        var channel;
        var socket;
        var handler = 
        {
            //I changed this to "onmessage" as draevor's answer but 
            //I still don't see "evt.data" logged
            onMessage: function (evt)
            {
                //evt.data will be what the server sends in channel.send_message
                console.log("evt.data received from authhandler: " + evt.data);
                alert("evt.data is: " + evt.data)
            }
        };    

        var xhr = new XMLHttpRequest();
        xhr.onReadyStateChange = function()
        {   
            //this alert does not trigger
            alert("xhr.onReadyStateChange")
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                token = xhr.responseText;
                //this alert does not trigger
                alert("token: " + token)
                channel = new goog.appengine.Channel(token);
                socket = channel.open(handler);
            }
        };
        xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
        xhr.send(formData);
        console.log("formData sent to authsender: " + formData);

    }, false
)

UPDATE

Update as suggested by draevor’s answer I added other properties of onmessage. I followed this question although I am not sure why he puts the properties in single quotes.

document.getElementById("save").addEventListener
(
    "click", 
    function ()
    {
        var userEmail = document.getElementById("getEmail").value;
        var formData = new FormData();
        formData.append("extension_user", userEmail);

        var channel;
        var socket;
        var handler = 
        {
            onopen: onOpen,
            onmessage: onMessage,
            onerror: onError,
            onclose: onClose
        };    

        var xhr = new XMLHttpRequest();
        xhr.onReadyStateChange = function()
        {
            //this alert does not trigger
            alert("xhr.onReadyStateChange")
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                token = xhr.responseText;
                //this alert does not trigger
                alert("token: " + token)
                channel = new goog.appengine.Channel(token);
                socket = channel.open(handler);
            }
        };
        xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
        xhr.send(formData);
        console.log("formData sent to authsender: " + formData);
    }, false
)
onMessage = 
function (evt)
{
    //evt.data will be what the server sends in channel.send_message
    console.log("evt.data received from authhandler: " + evt.data);
    alert("evt.data is: " + evt.data)
}

onOpen =
function ()
{
    alert("onOpen")
}

onError =
function ()
{
    alert("onError")
}

onClose =
function ()
{
    alert("onClose")
}

Answer 1

I think the problem is simply having named the property onMessage instead of onmessage. I would also suggest setting all the other properties (onopen, onerror, onclose), at least for debugging purposes in case the above doesn’t solve your problem.