SÓ FALTA UM ITEM MÍNIMO DO FRONT END QUE AINDA NÃOCONSEGUI MUDAR, MAIS ISSO QUE QUALQUER UM COM NIVEL INTERMEDIÁRIO PODE VER JÁ...
Código: Selecionar todos
<!--
This is the HTML file for the front-end of the AJAX Driven Chat application
This code was developed by Ryan Smith of 345 Technical Services
You may use this code in your own projects as long as this copyright is left
in place. All code is provided AS-IS.
This code is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
For the rest of the code visit http://www.DynamicAJAX.com
Copyright 2005 Ryan Smith / 345 Technical / 345 Group.
-->
<html>
<head>
<title>Live Chat</title>
<style type="text/css" media="screen">
#div_chat {
height: 200px;
width: 400px;
overflow: auto;
background-color: #FFFFFF;
border: 1px solid #555555;
}
#txt_message, #txt_name {
background-color: #FFFFFF;
border: 1px solid #555555;
}
.chat_time {
font-style: italic;
font-size: 9px;
}
body {
background-color: #f2efef;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
label {
width: 4.5em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
#btn_send_chat {
margin-left: 5.2em;
}
</style>
<script language="JavaScript" type="text/javascript">
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var lastMessage = 0;
var id = 0;
var mTimer;
//Function for initializating the page.
function startChat() {
//Set the focus to the Message Box.
document.getElementById('txt_message').focus();
//Start Recieving Messages.
getChatText();
}
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
//Gets the current messages from the server
function getChatText() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'getChat.php?chat=' + id + '&last=' + lastMessage, true);
receiveReq.onreadystatechange = handleReceiveChat;
receiveReq.send(null);
}
}
//Add a message to the chat server.
function sendChatText() {
if(document.getElementById('txt_message').value == '') {
alert("Necessário digitar uma mensagem!");
return;
}
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=' + id + '&last=' + lastMessage, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleSendChat;
var param = 'message=' + document.getElementById('txt_message').value;
param += '&name=' + document.getElementById('txt_name').value;;
param += '&chat=' + id;
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}
//When our message has been sent, update our page.
function handleSendChat() {
//Clear out the existing timer so we don't have
//multiple timer instances running.
clearInterval(mTimer);
getChatText();
}
//Function for handling the return of chat text
function handleReceiveChat() {
if (receiveReq.readyState == 4) {
var chat_div = document.getElementById('div_chat');
var xmldoc = receiveReq.responseXML;
var message_nodes = xmldoc.getElementsByTagName("message");
var n_messages = message_nodes.length
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
var text_node = message_nodes[i].getElementsByTagName("text");
var time_node = message_nodes[i].getElementsByTagName("time");
chat_div.innerHTML += user_node[0].firstChild.nodeValue + ' ';
chat_div.innerHTML += '<font class="chat_time">' + time_node[0].firstChild.nodeValue + '</font><br />';
chat_div.innerHTML += text_node[0].firstChild.nodeValue + '<br />';
chat_div.scrollTop = chat_div.scrollHeight;
lastMessage = (message_nodes[i].getAttribute('id'));
}
var room = xmldoc.getElementsByTagName("room");
id = room[0].getAttribute('id');
mTimer = setTimeout('getChatText();',2000); //Refresh our chat in 2 seconds
}
}
//This functions handles when the user presses enter. Instead of submitting the form, we
//send a new message to the server and return false.
function blockSubmit() {
sendChatText();
return false;
}
//This cleans out the database so we can start a new chat session.
function resetChat() {
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=' + id + '&last=' + lastMessage, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleResetChat;
var param = 'action=reset';
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}
//This function handles the response after the page has been refreshed.
function handleResetChat() {
document.getElementById('div_chat').innerHTML = '';
getChatText();
}
</script>
</head>
<body onload="javascript:startChat();">
<br>
<p id="p_status"> Status: Normal</p>
<div id="div_chat"><b>Ola, em que podemos ajuda-lo?</b><br>
<br>
</div>
<form id="frmmain" name="frmmain" onsubmit="return blockSubmit();">
<fieldset>
<legend>Painel de Chat</legend>
<input type="button" name="btn_get_chat" id="btn_get_chat" value="Recarregar Chat" onclick="javascript:getChatText();" />
<input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reiniciar Chat" onclick="javascript:resetChat();" />
<br />
<p>
<label for="txt_name">Nome</label>
<input type="text" id="txt_name" name="txt_name" style="width: 147px;" value="Seu nome aqui"/>
</p>
<p>
<label for="txt_message">Messagem</label>
<textarea id="txt_message" name="txt_message" style="width: 320px;height: 50px;"></textarea>
</p>
<p>
<input type="button" name="btn_send_chat" id="btn_send_chat" value="Enviar" onclick="javascript:sendChatText();" />
</p>
</fieldset>
</form>
</body>
</html>
