I am currently working on a chat system for a school project and I have a problem with updating the chat while 2 users talk simultaneously. I am using ajax, javascript, aspx, html, c# and xml. I save every chat between two users in an xml file. Everything worked great, until I checked if the chat update automatically when both users talk online. To check that, I opened the project with 2 microsoft visual studio programmes, logged in with 2 different users and try to send messages. The xml file has been updated in both visual studio programmes but the chat only updated in one tab. I only see the new message if I refresh the page.
How can I update both tabs automatically without refreshing the page?
Here is the code that loads the conversation for the first time:
<div id="Conversation">
<script type="text/javascript">
/*Load xml Document */
var xmlDoc = LoadXMLDoc(MakeFileName());
/*Checkes which users are talking*/
from = document.getElementById("ContentPlaceHolder1_SenderID").value;
to = document.getElementById("ContentPlaceHolder1_ReciverID").value;
/*Get all messages*/
message = xmlDoc.getElementsByTagName("text");
for (i = 0; i < message.length; i++) {
/*Create new p element with the message's text*/
var PElement = document.createElement("p");
var TextNode = document.createTextNode(message[i].childNodes[0].nodeValue);
var DivElement = document.getElementById("Conversation");
/*Write the text in the right direction according to who sent the message*/
if (from == xmlDoc.getElementsByTagName("from")[i].getAttribute("id") && to == xmlDoc.getElementsByTagName("to")[i].getAttribute("id")) {
PElement.appendChild(TextNode);
DivElement.appendChild(PElement).style.textAlign = "right";
}
else
if (to == xmlDoc.getElementsByTagName("from")[i].getAttribute("id") && from == xmlDoc.getElementsByTagName("to")[i].getAttribute("id")) {
PElement.appendChild(TextNode);
DivElement.appendChild(PElement).style.textAlign = "left";
}
}
</script>
</div>
Javascript file:
var xmlhttp = LoadXMLHttp();
var xmlDoc = LoadXMLDoc(MakeFileName());
//crate an xmlhttp request that support all web browsers
function LoadXMLHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
else
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
// load the xml document
function LoadXMLDoc(FileName) {
url = "Conversations/" + FileName;
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
return xmlhttp.responseXML;
}
//create the file name to retrive xml document
function MakeFileName() {
/..../
}
//create a new xml element and adds it the the xml document
function CreateXmlMessage() {
/..../
}
//prints the new massage on screen
function PringMessage() {
var PElement = document.createElement("p");
var TextNode = document.createTextNode(document.getElementById("MessageText").value);
var DivElement = document.getElementById("Conversation");
PElement.appendChild(TextNode);
DivElement.appendChild(PElement).style.textAlign = "right";
}
function SendMessage() {
if (document.getElementById("MessageText").value != "") {
CreateXmlMessage();
//create a post request to Chats.aspx
xmlhttp.open("POST", "Chats.aspx", true);
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.setRequestHeader("IsMessageSent", "true");
//Parse the xml document to string
var XMLString = new XMLSerializer();
var sendStr = XMLString.serializeToString(xmlDoc);
//sends the string to the server
xmlhttp.send(sendStr);
}
}
No comments:
Post a Comment