What the difference between `onmessage` and `.addEventListener`?

Question

I'm trying to get data with server-sent event, what the different using

source.onmessage vs source.addEventListener?

Answer 1

source.onmessage is the built in function wrapper for EventSource that is triggered when new data is sent to the client. It fires when no event attribute is returned (default) and doesn't fire when it is set.

addEventListener is similar, but differs in that it listens for a specific event name, and triggers on its presence, allowing you to separate your functionality for multiple events. You can then parse the JSON data returned. It can be used on any event type. Have a look at this example:

source.addEventListener("login", function(e) {
    // do your login specific logic
    var returnedData = JSON.parse(e);
    console.log(returnedData);
}, false);

This snippet will listen for a server message with event specified as login, then it triggers the callback function.

More info:

• https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events
• http://html5doctor.com/server-sent-events/