阅读模式:

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

查看:4503  回复: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

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
centos 7 安装 redis 3.2.9   阅读:3426javascript点击复制内容   阅读:2775php 使用 smtp.php 类在线发送邮件功能   阅读:2889网站性能优化-页面静态缓存   阅读:2780php删除一个文件夹内的所有文件夹和文件   阅读:2643什么是天使轮?什么是A轮融资?B轮融资?   阅读:1683移动端自适应rem原理   阅读:6245php 统计网页打开耗时和脚本运行内存   阅读:3326linux php7安装yaf扩展   阅读:3157简单的DOS攻击之死亡之ping详解   阅读:20068把php session 会话保存到redis   阅读:3617crontab+shell脚本实现定时备份mysql数据库   阅读:3008mysql共享锁和排他锁详解   阅读:3153html5 离线缓存的使用   阅读:2093linux php7编译安装mongodb扩展   阅读:3369crontab+shell脚本实现定时备份mysql数据库   阅读:3008mysql5.7开启sql日志的配置   阅读:3538ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:4505面试的时候回去等通知,等电话的真实意思   阅读:11579php 使用 smtp.php 类在线发送邮件功能   阅读:2889php 生成图片,给图片加水印   阅读:3176人性漫画:打工与创业的残酷区别   阅读:2133linux php7安装yaf扩展   阅读:3157一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:20110mysql数据库性能的基本优化   阅读:2445纯干货,程序员面试的超实用技巧   阅读:1931给 centos 7 安装桌面环境   阅读:10923php打印三角形   阅读:318mysql 为什么添加索引可以提高访问速度   阅读:2941解决 nginx 413 request entity too large   阅读:2107HTTP 1.1 协议详解   阅读:3198霍金24岁博士毕业论文在线预览   阅读:2369php 生成图片,给图片加水印   阅读:3176centos 7 安装 redis 3.2.9   阅读:3426linux php7安装yaf扩展   阅读:3157mysql中文分词全文搜索索引讯搜的安装   阅读:3020shell脚本批量删除几天前的文件   阅读:3863centos7.3安装mongodb3.6   阅读:3755给php7安装redis扩展库   阅读:3489网站局部小图片优化-base64编码图片   阅读:4277php 读取和设置redis的键值   阅读:3898分享:淘宝技术这十年   阅读:2303php冒泡排序法   阅读:3995网站性能优化-页面静态缓存   阅读:2780linux php7安装yaf扩展   阅读:3157php删除一个文件夹内的所有文件夹和文件   阅读:2643php打印九九乘法表   阅读:3856shell脚本批量删除几天前的文件   阅读:3863linux时间戳有趣的情人节秒1234567890   阅读:2448面试的时候和你谈理想,是理想or入坑?   阅读:3737