Edit in JSFiddle

<script type="text/mustache" id="app-template">
    <chat></chat>
</script>

<div id="my-app"></div>

<script src='http://agile-everglades-1937.herokuapp.com/socket.io/socket.io.js'></script>

var myServerUrl = "http://agile-everglades-1937.herokuapp.com";

// define our message model
var Message = can.Model({
    findAll : 'GET ' + myServerUrl + '/messages',
    create : function(attrs) {
        $.post(myServerUrl + '/messages', attrs)
        //keep '{Message} created' from firing twice
        return $.Deferred()
    }
},{});

can.Component.extend({
    tag: 'chat',
    template: '<ul id="messages">' +
                '{{#each messages}}' +
                '<li>{{body}}</li>' +
                '{{/each}}' +
              '</ul>' +
              '<form id="create-message" action="" can-submit="submitMessage">' +
                  '<input type="text" id="body" placeholder="type message here..." can-value="newMessage" />' +
              '</form>',
    scope: {    
        Message: Message,
        messages: new Message.List({}),
        submitMessage: function(el, ev, ev2){
            ev2.preventDefault();
            new Message({body: this.attr("newMessage")}).save();
            this.attr("newMessage", "");
        }
    },
    events: {
        '{Message} created': function(construct, ev, message){
            this.scope.attr('messages').push(message);
        }
    }
});

var frag = can.view('app-template', {});
$('#my-app').html(frag);

// connect using Socket.io
var socket = io.connect(myServerUrl)
// listen for 'message-created' event to create a Message instance
// Note: the 'created' event IS triggered on this model instance. 
socket.on('message-created', function(message){
	new Message(message).created();
})