asp.net+jquery+xml实现最简单的聊天室

最近在sina看nba的文字直播的时候，对网站右下角的那一个聊天窗口产生兴趣，就决定自己也做一个。

上网查查资料，这样的聊天室无非就是用户输入数据传到服务器保存，然后用户页面再实时地从数据库取出数据，显示在页面上，即可完成一次聊天操作。

首先我定义了一个xml文件，用于保存用户的聊天数据，

<?xml version="1.0" encoding="utf-8"?>
<Messages>
<Message>
<users>crazyluo</users>
<data>ceshide</data>
<sendtime>23:25</sendtime>

<sendto>me</sendto>
</Message>

</Messages>

users保存发送信息的用户，data是发送的数据，sendtime是发送的时间，sendto是发送的对象

然后创建一个聊天的页面，页面代码大致是如下：

<div id="main">
<div id="msg"></div>
<div id="div1">
<textarea id="text" style="width:200px;"></textarea>
<input type="button" id="btn" value="提交" />
</div>
</div>

然后通过js从xml中取数据

var chatXml = function() {
var obj = document.getElementById("msg");
obj.scrollTop = obj.scrollHeight - obj.clientHeight;

$.get("Message.xml?time=" + new Date(), function(xml) {
$("#msg").html("");
$(xml).find("Messages>Message").each(function() {
$("#msg").append("<table><tr><td style='width:50px'>" + $(this).find("users").text() + "说:" + "</td><td>" + $(this).find("data").text() + "</td></tr></table>");
})
})
}

其中“time=" + new Date(), ”这句代码不加的话，页面显示的数据就不会更新，网上有人解释说，在这个地方加一个随机显示的代码就ok，暂时还不是很清楚这个的用途。

var start = function() {

setInterval("chatXml()", 1000);
}

定义一个显示数据的函数，每隔一秒刷新一次页面。

下面是输入数据，提交数据，（暂时没用考虑用户这些信息，只写了提交的数据，其他的同样的道理就ok）

这里我用的是get方式，我觉得最好用post方式吧，等我有时间了就修改修改这个源代码

var create = function() {
$.get(encodeURI("updateMessage.ashx?message=" + $("#text").val()), function(xml) {
$("#text").val("");
}, "xml")

}

updateMessage.ashx中是对xml的操作。主要是把message数据存入我们制定的xml文件中就ok了。

一下是显示框的css

#msg
{
border:#A9A9A9 1px solid;
width:400px;
height:400px;
word-spacing:normal;
overflow-y:scroll;
list-style-type:none;
word-break:break-all;
overflow-x:hidden;
}
在显示数据的函数中：

var obj = document.getElementById("msg");
obj.scrollTop = obj.scrollHeight - obj.clientHeight;

这两句话使得显示数据的div的滚动条始终在最下方。

总结：可能我这么理解这个网页聊天一点都不高明，但是大致的方法思路应该是这样子的，争取学的更多，然后完善一下。