addEventListener에서 onMessage를 사용하는 방법은 무엇입니까?

Question

내 textarea id="save"의 값을 addEventListener 안에 저장합니다. 그런 다음 xhr으로 서버에 보내고 동시에 Google App Engine 채널 API를 사용하여 채널을 열고 나서 onMessage과 함께 보낸 메시지를 캡처하려고합니다.

반환 된 메시지를 제외한 모든 것이 작동합니다. 반환 된 메시지는 evt.data이긴하지만 기록되지는 않습니다. 내가 뭘 잘못하고 있는지 이해하도록 도와 줄 수 있니? 내 previous question에 대한 후속 조치입니다. 감사! draevor's answer에 의해 제안

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

업데이트 나는 onmessage의 다른 속성을 추가했다. 왜 그가 작은 따옴표로 속성을 넣을 지 모르겠지만 나는 this question을 따랐다.

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

나는 문제가 단순히 onmessage 대신 재산 onMessage라는 데 생각합니다. 위의 코드가 문제를 해결하지 못할 경우 디버깅을 위해 다른 모든 속성 (onopen, onerror, onclose)을 설정하는 것이 좋습니다.

Answer 2

window.onmessage는 프레임간에 메시지를 보내는 데 사용됩니다. 채널 API는 이것을 사용합니다. 그래서 당신이 당신 자신의 창을 만들면. 여기 - 당신이하고있는 메시지 - 모든 지옥이 느슨해집니다.

핸들러를 인라인으로 정의하거나 완전히 다른 것을 (handleChannelMessage 또는 what-have-you) 호출하십시오.