icaromh/app.js

## app.js
var LivePublish = {

    pushstream: {},

    broadcastConfig:  {
        host: "stream.push.qa.globoi.com/ws/p.bslive",
        port: 80,
        // channel: "p.ZzEuZ2xvYm8uY29tL3Nhby1wYXVsby90cmFuc2l0by9yYWRhci10ZW1wby10cmFuc2l0by1hZ29yYS5odG"
        channel: "p.test"
    },


    initPushStream : function initPushStream(){
        var self = this,
            pushstreamSettings,
            modes = 'websocket|eventsource|stream|longpolling';

        // modes = 'eventsource';

        PushStream.LOG_LEVEL = 'debug';

        pushstreamSettings = {
            messagesControlByArgument: true,
            host: self.broadcastConfig.host,
            port: self.broadcastConfig.port,
            longPollingInterval: 60000,
            modes: modes
        };

        this.pushstream = new PushStream(pushstreamSettings);
        this.pushstream.messagesPublishedAfter = new Date('Tue Dec 13 2016 10:44:42 GMT-0200 (BRST)');

        this.pushstream.onmessage = function (post) {
            var postdoms, i;

            // stream mode returns string
            if (window.console) {
                console.warn('PUSHSTREAM onmessage', post);
            }

            if (post === 'ping') {
                return;
            }

            if(typeof post === 'object'){
                post = post.resource;
            }

            var postEl = document.createElement('p');
            var content = document.createTextNode(post.createdBy + ': ' + post.body);
            postEl.appendChild(content);

            window.setTimeout(function(){
                postEl.classList.add('new-post');
            }, 500);

            var firstPost = document.querySelector('.live-posts-container p:first-child');
            document.querySelector('.live-posts-container').insertBefore(postEl, firstPost);

        };

        this.subscribeChannels();
        return this;
    },

    subscribeChannels: function subscribeChannels() {
        if (this.pushstream === undefined) {
            return this;
        }
        this.pushstream.disconnect();
        this.pushstream.removeAllChannels();
        try {
            this.pushstream.addChannel(this.broadcastConfig.channel);
            if (this.pushstream) {
                try {
                    this.pushstream.addChannel(
                        '_' + '1481633566434'
                    );
                } catch (e) {
                    console.error(e);
                }
            }
            this.pushstream.connect();
        } catch (e) {
            console.error(e);
        }
        return this;
    },

    initialize: function initialize(){
        this.initPushStream();
    },
}

LivePublish.initialize();

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Publish</title>
    <style>
        p{
            padding: 5px;
            transition: background-color 500ms linear;
            background-color: red;
        }
        .new-post{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <h1>🚀 Live Publish 🚀 </h1>

    <h2>Posts 👇</h2>
    <div class="live-posts-container"></div>

    <script type="text/javascript" src="http://s3.glbimg.com/cdn/libs/pushstream/0.0.1/pushstream.js"></script>
    <script type="text/javascript" src="https://gist.githubusercontent.com/icaromh/6b2e4a4875d54d4ccd06091ccf0a80e3/raw/e9942763bcd8f3d3e125c402bc12ea0034ca11bb/app.js"></script>
</body>
</html>
	var LivePublish = {

	pushstream: {},

	broadcastConfig: {
	host: "stream.push.qa.globoi.com/ws/p.bslive",
	port: 80,
	// channel: "p.ZzEuZ2xvYm8uY29tL3Nhby1wYXVsby90cmFuc2l0by9yYWRhci10ZW1wby10cmFuc2l0by1hZ29yYS5odG"
	channel: "p.test"
	},


	initPushStream : function initPushStream(){
	var self = this,
	pushstreamSettings,
	modes = 'websocket\|eventsource\|stream\|longpolling';

	// modes = 'eventsource';

	PushStream.LOG_LEVEL = 'debug';

	pushstreamSettings = {
	messagesControlByArgument: true,
	host: self.broadcastConfig.host,
	port: self.broadcastConfig.port,
	longPollingInterval: 60000,
	modes: modes
	};

	this.pushstream = new PushStream(pushstreamSettings);
	this.pushstream.messagesPublishedAfter = new Date('Tue Dec 13 2016 10:44:42 GMT-0200 (BRST)');

	this.pushstream.onmessage = function (post) {
	var postdoms, i;

	// stream mode returns string
	if (window.console) {
	console.warn('PUSHSTREAM onmessage', post);
	}

	if (post === 'ping') {
	return;
	}

	if(typeof post === 'object'){
	post = post.resource;
	}

	var postEl = document.createElement('p');
	var content = document.createTextNode(post.createdBy + ': ' + post.body);
	postEl.appendChild(content);

	window.setTimeout(function(){
	postEl.classList.add('new-post');
	}, 500);

	var firstPost = document.querySelector('.live-posts-container p:first-child');
	document.querySelector('.live-posts-container').insertBefore(postEl, firstPost);

	};

	this.subscribeChannels();
	return this;
	},

	subscribeChannels: function subscribeChannels() {
	if (this.pushstream === undefined) {
	return this;
	}
	this.pushstream.disconnect();
	this.pushstream.removeAllChannels();
	try {
	this.pushstream.addChannel(this.broadcastConfig.channel);
	if (this.pushstream) {
	try {
	this.pushstream.addChannel(
	'_' + '1481633566434'
	);
	} catch (e) {
	console.error(e);
	}
	}
	this.pushstream.connect();
	} catch (e) {
	console.error(e);
	}
	return this;
	},

	initialize: function initialize(){
	this.initPushStream();
	},
	}

	LivePublish.initialize();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Live Publish</title>
	<style>
	p{
	padding: 5px;
	transition: background-color 500ms linear;
	background-color: red;
	}
	.new-post{
	background-color: transparent;
	}
	</style>
	</head>
	<body>
	<h1>🚀 Live Publish 🚀 </h1>

	<h2>Posts 👇</h2>
	<div class="live-posts-container"></div>

	<script type="text/javascript" src="http://s3.glbimg.com/cdn/libs/pushstream/0.0.1/pushstream.js"></script>
	<script type="text/javascript" src="https://gist.githubusercontent.com/icaromh/6b2e4a4875d54d4ccd06091ccf0a80e3/raw/e9942763bcd8f3d3e125c402bc12ea0034ca11bb/app.js"></script>
	</body>
	</html>