Message bus example

Pure JavaScript message bus usage.

by Oliver Caldwell

HTML

<p>This is an example used by a post on my blog. <a href='http://oli.me.uk/2013/06/05/implementing-a-message-bus-in-javascript/'>Implementing a message bus in JavaScript.</a></p>
<hr />
<input type='text' id='value' placeholder='Type here, then hit enter...' />
<button id='update'>Update</button>
<p><span id='count'>0</span> value(s) in the message bus. Click update to render them.</p>
<ul id='list'></ul>

JavaScript

var messages = [];
var input = document.getElementById('value');
var list = document.getElementById('list');
var updateButton = document.getElementById('update');
var count = document.getElementById('count');

input.addEventListener('keydown', function (e) {   
    if (e.keyCode === 13) {
        messages.push({
            type: 'input',
            value: e.target.value
        });
        e.target.value = '';
        updateCount();
    }
});

updateButton.addEventListener('click', function () {
    clearMessageBus();
    updateCount();
});

function clearMessageBus() {
    var message;
    while (message = messages.pop()) {
        if (message.type === 'input') {
            appendValueToList(message.value);
        }
    }
}

function appendValueToList(value) {
    var el = document.createElement('li');
    el.textContent = value;
    list.appendChild(el);
}

function updateCount() {
    count.textContent = messages.length;
}