<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="transparent/transparent.css">
</head>
<script>
var MESSAGE = "message";
var STATISTIC = "statistic";
var userScroll = false;
function onWheel(event)
{
event = event || window.event;
var delta = -( event.deltaY || event.detail || event.wheelDelta );
userScroll = document.body.scrollTop + window.innerHeight + delta < document.body.scrollHeight;
document.body.scrollTop = document.body.scrollTop + delta;
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
}
function scrollToBottom()
{
if( userScroll )
return;
document.body.scrollTop = document.body.scrollHeight;
}
function onStatisticReceived( service, value )
{
}
function onNewMessage( service, nickName, message, type )
{
var serviceElem = document.createElement( "img" );
serviceElem.className = service;
var serviceBlock = document.createElement( "div" );
serviceBlock.className = "service";
serviceBlock.appendChild( serviceElem );
var nickBlock = document.createElement( "div" );
nickBlock.className = "nick";
nickBlock.innerHTML = nickName + "<span class='separator'>: </span>";
var headerkBlock = document.createElement( "div" );
headerkBlock.className = "header";
headerkBlock.appendChild( serviceBlock );
headerkBlock.appendChild( nickBlock );
var messageBlock = document.createElement( "div" );
messageBlock.className = "message";
messageBlock.innerHTML = message;
var messageBox = document.createElement( "div" );
messageBox.className = "messagebox";
messageBox.appendChild( headerkBlock );
messageBox.appendChild( messageBlock );
var messageType = document.createElement( "div" );
messageType.className = type;
messageType.appendChild( messageBox );
var messagesList = document.getElementById( "messagesList" );
if( type != "" )
{
messagesList.appendChild( messageType );
}
else
{
messagesList.appendChild( messageBox );
}
scrollToBottom();
}
</script>
<body>
<div id="messagesList"></div>
<script>
setInterval( scrollToBottom, 500 );
var messagesList = document.getElementById( "messagesList" );
if (messagesList.addEventListener)
{
if ('onwheel' in document)
{
// IE9+, FF17+, Ch31+
messagesList.addEventListener("wheel", onWheel);
}
else if ('onmousewheel' in document)
{
// устаревший вариант события
messagesList.addEventListener("mousewheel", onWheel);
}
}
</script>
<!--START_BROWSER_CODE-->
<script>
var wsUri = "ws://localhost:15619";
var websocket = null;
function initWebSocket()
{
try
{
if (typeof MozWebSocket == 'function')
webSocket = MozWebSocket;
if ( websocket && websocket.readyState == 1 )
websocket.close();
websocket = new WebSocket( wsUri );
websocket.onopen = function (event)
{
console.log( 'initWebSocket:open' );
};
websocket.onclose = function (event)
{
setTimeout( initWebSocket, 3000 );
};
websocket.onerror = function (event)
{
websocket.close();
};
websocket.onmessage = function (event)
{
var message = JSON.parse( event.data );
//onNewMessage( "debug", "debug", message, "" );
if( MESSAGE == message.type )
{
onNewMessage( message.message.service, message.message.nick, message.message.message, message.message.type );
document.body.scrollTop = document.body.scrollHeight;
}
else if( STATISTIC == message.type )
{
onStatisticReceived( message.statistic.service, message.statistic.statistic );
}
document.body.scrollTop = document.body.scrollHeight;
};
}
catch (exception)
{
}
}
initWebSocket();
//setInterval(function() { document.body.scrollTop = document.body.scrollHeight; }, 500 );
</script>
<!--END_BROWSER_CODE-->
</body>
</html> |
