What is needed to make something like this?

While I'm pretty new to web and mobile development (and not knowing the inner secrets of iMessaging, FB Messenger or Google Hangouts), I believe these technologies would help get an idea of what's being done:

1. Is the app checking every second? I believe they probably use something like socket.io: http://socket.io/ It basically keeps an open connection between the two which allows for those 3 bouncing dots letting you know when the other user is typing... (and then really fast sending of the message)

2. How will the receiver know the message is delivered? A callback function would be perfect here. Basically user1 sends the message to user2 along with a function specifying what do when user2 receives the message. When the message is received by user2, the callback function is fired which sends a message back to user1 saying user2 received the message. Something pseudocode like:

user1.submit(message, recipient, function(){
      recipient.sendMessage(message, function(status){
        print(status); 
     }); 
}); 

then on the other end:

user2.receive(message, sender, function(callback){
      read(message); 
      callback("got the message");      // this is what gets send back as the "status"
}); 

There's a lot of documentation and tutorials to better understand the callback function but I believe its what you would want to use.

Hope that at least helps get you in the right direction!