最近在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的滚动条始终在最下方。
总结:可能我这么理解这个网页聊天一点都不高明,但是大致的方法思路应该是这样子的,争取学的更多,然后完善一下。