php/Chat/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- Ie8 works better in compatible mode -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>ZeroC - Chat Demo - PHP Client</title>

<link rel="stylesheet" href="resources/style.css" type="text/css" media="screen"/>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/chat.js" type="text/javascript"></script>

<script type="text/javascript">

    //
    // This method is a handler for window.onreszize event.
    // It is called when the window is resized to adjust
    // the size of the chat interface.
    //
    function adjustSize()
    {
        var minHeight = 480;
        var h = $('body').getHeight() - 200;
        if(h < minHeight)
        {
            h = minHeight;
        }
        $('livechat').style.height = h + 'px';
        $('chatcontent').style.height = (h - 69) + 'px';
        $('conversationView').style.height = (h - 69) + 'px';
        $('userList').style.height = (h - 102) + 'px';
        $('messageView').style.height = (h - 102) + 'px';

        var minWidth = 745;
        var w = $('body').getWidth();
        if(w < minWidth)
        {
            w = minWidth;
        }

        $('livechat').style.width = (w - 100) + 'px';
        $('txtMessage').style.width = (w - 120) + 'px';
        $('messageView').style.width = (w - 240) + 'px';
        $('messageView').scrollTop = $('messageView').scrollHeight;
    }

    window.onresize = function()
    {
        adjustSize();
    };

    //
    // The application calls this to return to the login form
    // when the connection is lost.
    //
    // It reloads the main page and shows the login form.
    //
    function reloadPage()
    {
        var pos = window.location.href.lastIndexOf("/");
        var loc = window.location.href;
        if(pos > 0)
        {
            loc = location.href.substr(0, pos);
        }
        window.location.href = loc + "/index.html";
    }

    var chatView;
    var chat;

    //
    // This operation initializes the chat interface.
    //
    function initialize()
    {
        var opts =
        {
            encoding:'UTF-8',
            method: 'get',
            parameters: '',
            asynchronous: false ,
            onComplete:function(response)
            {
                $('loadingContainer').hide();
                $('jsSupportError').replace(response.responseText);
                adjustSize();
            }
        };
        new Ajax.Request("chatview.html",opts);
        chatView = new ChatView();
        chat = new Chat(chatView);
    }
</script>
</head>

<body id="body" onload="initialize();">
    <div id="livechat">
        <div id="header">
            <div id="header-left"><p>Chat Demo</p></div>
            <div id="header-right"><p>ZeroC</p></div>
        </div>
        <!-- Main menu begin -->
        <!-- The menu is by default hidden using css, later we display it
             using JavaScript, so if JavaScript isn't supported the menu
             will never be shown. -->
        <div id="menu" style="display:none;">
            <ul>
                <li id="loginLink">
                    <a class="button" href="#" onclick="reloadPage();" tabindex="1">
                        <span>Login</span>
                    </a>
                </li>
                <li id="logoutLink">
                    <a class="button" href="#" onclick="chatView.logout();" tabindex="1">
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            $('loginLink').hide();
            $('logoutLink').hide();
            $('menu').style.diplay = "block";
            $('menu').hide();
        </script>
        <!-- Main Menu end -->

        <!-- Main Content begin -->
        <div id="chatcontent">
            <div id="loadingContainer">
                <div id="connecting">Loading</div>
            </div>
            <div id="jsSupportError">
                Your browser's JavaScript support is not enabled or your browser is not
                compatible with the Prototype JavaScript library required by this demo.
            </div>
            <script type="text/javascript">
                // This hides the JavaScript error message, using prototype JavaScript library,
                // so if JavaScript isn't enabled or prototype doesn't work the error message
                // is displayed.
                $('jsSupportError').hide();
                $('loadingContainer').style.display = "block";
            </script>

        </div>
        <!--Main Content end-->
        <div id="footer">
            <div id="footer-left"><p id="statusBar">Offline</p></div>
            <div id="footer-right"><div class="copyright">Copyright &copy; 2003-2017 ZeroC, Inc.</div></div>
        </div>
    </div>
</body>
</html>