聊天室Web程序-Ajax应用

     最近两天在做一个简单的聊天室程序，涉及到了jquery的Ajax的无刷新更新页面、php连接mysql数据库、mysql的简单操作以及mysql和mysqli的区别。

     我是在APPServ的Web环境下做的，使用这个环境的好处是所有建立web网页的组件都已经集成进去了，这样就可以忽略构建网页的其他组件的安装，而专注于网页整体的布局和功能的实现，便于新手如我这样的菜鸟的学习。

     步骤包括这么几步：

     1、html、css创建聊天室的外形框架，如下图所示。

     2、JS要做两个方面的工作：1）提交用户聊天信息，然后处理服务器端返回的聊天信息，将信息实时呈现出来；

                                         2）每隔一定时间发起查询数据库中聊天记录的请求，然后处理服务器端返回的聊天信息，将信息实时呈现出来，这是为了使聊天能够进行，但是保存在数据库中的信息是有限的，只能刷新一部分。刷新时间影响聊天记录的延时时间，同时还与网络等速度有关。

     3、使用Mysql建立数据库、建立表格。

     4、服务器端使用php语句查询数据库，并将结果生成xml文件传回到聊天室界面。

    具体：

   1、聊天室的外形框架。使用html和css即可，需要注意的是css的属性中的聊天显示记录的内容溢出设置，overflow：auto，其其他可选选项有hidden、visible、scroll、inherit

                       

     2、客户端的Js需要两个方面的功能，第一是：定时刷新，使用自定义的函数updateMsg来实现

function updateMsg(){
    $.post("./php/backend.php",{time:timestamp},
        function(xml,success){
        $('#loading').remove();//移除loading消息，等待提示
        addMessages(xml);
    });
    setTimeout('updateMsg()',4000);//每隔4秒，读取一次
}

其中的addMessages()函数也是自定义的函数，解析从服务器端传回来的消息文件，然后添加到聊天显示区中。

function addMessages(xml){
    if($('status',xml).text() ==2) return; //text获取节点的文本内容
        timestamp=$('time',xml).text();//更新时间戳
        //$.each循环数据
        $('message',xml).each(function(){
                var author=$('author',this).text();//发布者
                var content=$('msg',this).text();//内容
                var htmlcode='<strong>'+author+'</strong>:'+content+'<br />';
                $('#messagewindow').append(htmlcode);//添加到文档中
                $('#messagewindow').scrollTop($('#messagewindow')[0].scrollHeight);//$('#messagewindow')[0]转化为DOM对象
                //让滚动条始终保持在最底部
        });
}

   3、Mysql数据库的创建名为chat的数据库和名为messages的表。

        用户名：root   密码：12345678  数据库名：chat   表名：messages

        数据库的简单使用方法:1）在cmd中使用；2）使用AppServ的mysql命令行

        1）在cmd中，打开cmd，常用命令

           net start mysql;   ---启动数据库服务。

　　　　mysql-hlocalhost -uroot -p;     回车；要求你输入密码，输入后回车

           SHOW DATABASES；你的数据库列表；

           create table tablename （list）

           describe tablename;----显示表的项

           select * from tablename;

           delete from tablename where ...

           exit/quit；---退出mysql数据库

           net stop mysql；---关闭mysql数据库。

        2）打开AppServ的数据库命令行，用法类似。

        在我的程序中建立的表为： 

create table messages (
id int(7) not null auto_increment,
user varchar(255) not null,
msg text not null,
time int(9) not null,
PRIMARY KEY (id)
);

   4、服务器端使用php语句查询数据库，并将结果生成xml文件传回到聊天室界面。

    使用php的时候注意版本问题，在浏览器中一般会用最新的php来运行【php5、php7等】，就可能对一些使用老版本的语句产生warning或者错误，尽量使用最新的版本，老版本的mysql不够稳定，存在一些安全性的问题，所以推荐使用较高版本的php语句，如mysqli，使用mysql的扩展版本。i为improve的意思。如以下使用数据库和表格语句的新老版本的不同。

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "12345678";
$dbname = "chat";

//旧的，php3、php4等
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);//将来可能被废弃,mysql
mysql_select_db($dbname,$dbconn);

//新的，php5、php7
$dbconn = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);

 

完整程序请查看我的github仓库：