阅读模式:

ajax+php 实现一个简单的在线聊天室功能(附带源码)

查看:5178  回复:0  类型:  来源:php自学网  标签 php ajax

        通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能。附带详细源码案例。这个聊天室是一个简单的聊天室,通过javascript setInterval()和ajax函数,不停的去获取服务器获取最新的聊天数据信息,并无刷新的写入到前台DOM中,来实现在线聊天的功能,这是一个比较笨的方法实现在线聊天室功能,不建议用于实际项目中。

html代码:

<html>
<head>
    <meta charset="utf-8"/>
    <title>实现一个简单的在线聊天室功能</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="sectiontips" style="min-height:200px;">
<span id="datachat" style="display:none" data_num="load"></span>
<h1 class="glyphicon glyphicon-calendar">在线聊天</h1>
    <style type="text/css">
        .chats { width:100%;max-height:295px;min-height:200px; height:auto; overflow-y:auto; }
        .chatbtn { width:100%; padding:10px 10px; border-top:1px dashed #000;}
        .chats .chatlist { width:100%; padding:10px 10px; min-height:24px; line-height:1.2; font-size:13px; text-align:left; }
        .chats .chatlist .chattit {  font-size:14px; }
        .chats .chatlist .chattit span { margin-right:2px; }
        .chats .chatlist .chatcon { font-size:13px; padding-left:10px; margin-top:6px;text-decoration: underline;}
    </style>
    <div class="chats">
    </div>
    <div class="chatbtn">
        <form class="form-inline">
            <div class="form-group">
                <label for="name"></label>
                <input type="text" class="form-control" id="name" placeholder="昵称">
            </div>
            <div class="form-group" style="margin-top:5px;">
                <label for="con"></label>
                <textarea id="con" class="form-control" rows="3" placeholder="内容"></textarea>
            </div>
            <div class="form-group" style="margin-top:5px;margin-left:5px;">
                <button type="button" id="chat_send" class="btn btn-default">发送</button>
            </div>
        </form>
    </div>
</div>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    //js聊天代码
    $(function(){
        //获取聊天数据
        setInterval(function(){
            var star = $('#datachat').attr('data_num');
            //判断是不是第一次加载,如果是第一次加载直接获取数据库最新的数据
            //如果不是第一次加载,就不停的去获取服务器的最新聊天数据
            if(star=='load'){
                $.ajax({
                    url:'inc/chat.php?type=get_def',
                    type:'post',
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if(data !='error!'){
                            var clength = data.length-1;
                            for(var i=clength;i>=0;i--){
                                $(".chats").append("<div class="chatlist"><div class="chattit"><span>"+data[i].name+"</span><span>"+data[i].addtime+"</span><span>["+data[i].address+"]</span><span>:</span></div><div class="chatcon">"+data[i].content+"</div></div>");
                                $('#datachat').attr('data_num',data[i].id);
                                $(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},2000);
                            }
                        }
                    }
                });
            }else{

                $.ajax({
                    url:'inc/chat.php?type=get_new',
                    type:'post',
                    cache:false,
                    dataType:'json',
                    data:{
                        'num':star
                    },
                    success:function(data){
                        if(data !='error!'){
                            var clength = data.length-1;
                            for(var i=clength;i>=0;i--){
                                $(".chats").append("<div class="chatlist"><div class="chattit"><span>"+data[i].name+"</span><span>"+data[i].addtime+"</span><span>["+data[i].address+"]</span><span>:</span></div><div class="chatcon">"+data[i].content+"</div></div>");
                                $('#datachat').attr('data_num',data[i].id);
                                $(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},700);
                            }
                        }
                    }
                });

            }
        },1500);

        //发送聊天数据
        $('#chat_send').click(function(){
            var chat_name = $('#name').val();
            var chat_con = $('#con').val();

            if(chat_name==''){
                $('#name').val('昵称不可以为空!');
                return false;
            }else if(chat_name=='昵称不可以为空!'){
                $('#name').val(' ');
                return false;
            }else if(chat_name.length<1){
                $('#name').val('昵称太短!');
                return false;
            }else if(chat_name=='昵称太短!'){
                $('#name').val(' ');
                return false;
            }
            if(chat_con==''){
                $('#con').val('内容不可以为空!');
                return false;
            }else if(chat_con=='内容不可以为空!'){
                $('#con').val(' ');
                return false;
            }else if(chat_con.length<1){
                $('#con').val('内容太短!');
                return false;
            }else if(chat_con=='内容太短!'){
                $('#con').val(' ');
                return false;
            }
            $.ajax({
                url:'inc/chat.php?type=send',
                type:'post',
                cache:false,
                dataType:'text',
                data:{
                    'name':chat_name,
                    'con':chat_con
                },
                success:function(data){
                    if(data=='发送成功!'){
                        $('#chat_send').text('发送成功');
                    }else{
                        $('#chat_send').text('发送失败');
                    }
                    setTimeout(function(){
                        $('#chat_send').text('发送');
                    },1000);
                },
                error:function(){
                    alert('请求出错!');
                }
            });

        });
    });

</script>
</body>
</html>

php数据处理代码 chat.php:

<?php
    header("Conten-type:text/html;charset=utf-8");
    require('../config.php');
    require('getip.php');
    if( $_SERVER['REQUEST_METHOD'] == "POST" ) {
        if ($_GET['type'] == 'send') {
            //添加聊天数据
            $name = htmlspecialchars(addslashes(trim($_POST['name'])));
            $con = htmlspecialchars(addslashes(trim($_POST['con'])));
            if (empty($name) || empty($con)) {
                echo "信息填写不完整。";
                exit;
            } else {
                $ip = GetIpFrom();
                $ips = $ip[0] .'-'. $ip[1];
                if($dbh->exec("insert into chat (name,content,addtime,address) values('$name','$con',now(),'$ips')")>0){
                    echo '发送成功!';
                    exit;
                }else{
                    echo '发送失败!';
                    exit;
                }
            }
        }else if ($_GET['type'] == 'get_def'){
            //获取数据
            $res = $dbh->query("SELECT * FROM chat ORDER BY id DESC LIMIT 10");
            $res = $res->fetchAll();
            if($res){
                echo json_encode($res);
                exit;
            }else{
                echo 'error!';
                exit;
            }
        }else if($_GET['type'] == 'get_new'){
            $num = intval($_POST['num']);
                $sql1 ="SELECT * FROM chat WHERE id>{$num} ORDER BY id DESC";
                $res1 = $dbh -> query($sql1);
                $res2 = $res1->fetchAll();
                if($res2){
                    echo json_encode($res2);
                    exit;
                }else{
                    echo 'error!';
                    exit;
                }
        }
    }
?>

mysql数据库结构:

CREATE TABLE IF NOT EXISTS `chat` (
  `id` int(8) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `name` char(10) NOT NULL COMMENT '昵称',
  `content` varchar(255) NOT NULL COMMENT '内容',
  `addtime` datetime NOT NULL COMMENT '发布时间',
  `address` varchar(80) DEFAULT '未知' COMMENT 'ip地址',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COMMENT='在线聊天' AUTO_INCREMENT=3 ;


ajax+php简单聊天室源码下载:

chat.rar


分享到:
1 0

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
mysql中文分词全文搜索索引讯搜的安装   阅读:3591php连接redis   阅读:3355比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:2909linux时间戳有趣的情人节秒1234567890   阅读:2956浅谈javascript的函数节流   阅读:2398用php从1加到100的值   阅读:5344nginx安装mysql和json模块   阅读:230php打印九九加法表   阅读:5090javascript获取两个日期间的所有日期   阅读:2066给网站添加一键qq登录的功能   阅读:4025移动端js触摸touch详解(附带案例源码)   阅读:9034php 获取当前前后年、月、星期、日、时分秒的时间   阅读:3359php生成二维码   阅读:3120php 读取和设置redis的键值   阅读:4608十张GIF让你弄懂递归等概念   阅读:3316mysql中文分词全文搜索索引讯搜的安装   阅读:3591Mysql在大型网站的应用架构演变   阅读:2692centos7开启交换内存   阅读:5656给php7安装redis扩展库   阅读:4187centos7开启交换内存   阅读:5656php打印九九乘法表   阅读:4820php删除一个文件夹内的所有文件夹和文件   阅读:3024linux教程,鸟哥私房菜(pdf全集)   阅读:3210linux教程,鸟哥私房菜(pdf全集)   阅读:3210php删除一个文件夹内的所有文件夹和文件   阅读:3024把php session 会话保存到redis   阅读:4075html5 离线缓存的使用   阅读:2469什么是天使轮?什么是A轮融资?B轮融资?   阅读:1997shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:5191linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:6747centos 7 安装 samba 服务   阅读:3567mysql 为什么添加索引可以提高访问速度   阅读:3553比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:2909mongodb设置shell开机启动脚本   阅读:4822纯干货,程序员面试的超实用技巧   阅读:2230mysql的四种索引类型   阅读:8979php打印九九乘法表   阅读:4820一步步带你,如何网站架构   阅读:2275centos7开启交换内存   阅读:5656session与cookie的区别   阅读:2424给网站添加一键qq登录的功能   阅读:4025web项目高并发量网站解决方案   阅读:2625php设置cookie为HttpOnly防止XSS攻击   阅读:6391面试都会问你为什么你从上一家公司离职的真实意思   阅读:6686linux教程,鸟哥私房菜(pdf全集)   阅读:3210shell发送邮件脚本   阅读:1908web性能测试工具ab的测试方法   阅读:2786移动端自适应rem原理   阅读:6905centos 7 忘记root密码   阅读:2618javascript对cookie操作详细代码函数   阅读:2884