您现在的位置是:网站首页 > 脚本编程>

thinkphp 实现在线聊天功能

2015-05-112279人围观
简介 你想为你的博客或者网站添加的在线聊天功能,为你的用户提供技术支持,或者不仅仅是客服功能,让你的用户能够相互交流,增强网站或者博客互动功能,这里为大家介绍1个为博客或者网站打造的聊天工具,只要您懂得thinkphp就能看得懂此段代码。主要实现的方法是thinkphp+ajax,不在赘述直接贴出代码:数据库结构:think_msg 表用来存储聊天记录...

你想为你的博客或者网站添加的在线聊天功能,为你的用户提供技术支持,或者不仅仅是客服功能,让你的用户能够相互交流,增强网站或者博客互动功能,这里为大家介绍1个为博客或者网站打造的聊天工具,只要您懂得thinkphp就能看得懂此段代码。主要实现的方法是thinkphp+ajax,不在赘述直接贴出代码:

数据库结构:

think_msg 表用来存储聊天记录

DROP TABLE IF EXISTS `think_msg`;
CREATE TABLE IF NOT EXISTS `think_msg` (
  `id` int(40) NOT NULL auto_increment COMMENT '信息数目',
  `content` text character set utf8 NOT NULL COMMENT '信息内容',
  `time` int(50) NOT NULL COMMENT '发送信息时间',
  `sender` varchar(20) character set utf8 NOT NULL COMMENT '发送信息人',
  `timee` varchar(20) NOT NULL,
  `tosend` varchar(50) character set utf8 NOT NULL COMMENT '接收人',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

think_user表 用来存储用户的信息

DROP TABLE IF EXISTS `think_user`;
CREATE TABLE IF NOT EXISTS `think_user` (
  `id` mediumint(6) NOT NULL auto_increment,
  `nickname` varchar(25) NOT NULL,
  `dept_id` smallint(3) NOT NULL,
  `account` varchar(20) NOT NULL COMMENT '账号',
  `pwd` varchar(50) NOT NULL COMMENT '密码',
  `status` int(2) NOT NULL COMMENT '状态:‘0’不在线,‘1’在线,‘2’隐身,‘3’忙碌',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;


html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>在线聊天</title>
    <script type="text/javascript" src="/Public/js/jquery.js"></script>
</head>
<style>
    .chat{
        width: 610px;
        height: 422px;
        margin: 0 auto;
        position: relative;
        border: 1px solid #000;
    }
    .show{
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        width: 400px;
        height: 300px;
        display: block;
        overflow:auto;
        position:relative;
    }
    .neirong{
        
        display: block;
        margin-top: 5px;
        width: 383px;
        border-bottom:1px dashed #000;
    }
    .nei{
        width: 400px;
        display: block;
    }
    .online{
        width: 200px;
        height: 422px;
        border-left: 1px solid #000;
        position:absolute;
        right:0px;
        top:0px;
    }
    p{
        display: inline;
        width: 400px;
    }
    .one{
        color: blue;
    }
    .neir{
        bottom: 22px;
        position: absolute;
        width: 402px;
        padding-left:1px;
    }
    .fs{
        bottom: 0px;
        position: absolute;
        width: 402px;
        padding-left:1px;
    }
    .submit{
         background-color: blue;
        border: medium none;
        color: #fff;
        float: right;
        line-height: 19px;
        margin-top: 2px;
        cursor: pointer;
        }
    .button{
         background-color: red;
        border: medium none;
        color: #fff;
        float: right;
        line-height: 19px;
        margin-top: 2px;
        margin-left:5px;
        cursor: pointer;
    }
    .option{position:relative;}
    .option ul{height:20px;line-height:20px; margin-top: 2px;padding-left: 9px;}
    .option li{
        float:left;
        list-style:none;
        margin-right: 10px;
    }
    #face1{
        display:none;
        z-index:9999;
        position: absolute;
        top: 326px;
        width:160px;
    }
    #face1 img{
    border: 1px solid #ccc;
    margin-left: 5px;
    cursor: pointer;
    margin-top: 5px;}    
</style>
<body>
    <div><span><a href="{:U(GROUP_NAME.'/Login/logout')}">退出</a></span></div>
    <div class="chat" id="close">
    <!-- 信息展示框 -->
    <div class="show">
        <volist name="msg" id="vo">
            <div class="neirong">
                <span>{$vo.sender}:</span>
                <br>{$vo.content}
            </div>    
        </volist>
    </div>
    <!-- 在线用户框 -->
    <div class="online">
        <span class="neiron">在线会员</span><br />
        <volist name="user" id="vo">
             <a href=""><span class="one">{$value.nickname}</span></a>
        </volist>
    </div>
    <!-- 输入框 -->
    <div class="option">
        <ul>
            <li><a href="javascript:void(0);" id="face" title="表情">^_^</a></li>
        </ul>
    </div>
    <div id="face1">
    [f:1][f:2][f:3][f:4][f:5][f:6][f:7][f:8][f:9][f:10]
    [f:11][f:12][f:13][f:14][f:15][f:16][f:17][f:18][f:19][f:20]
    </div>
    <div class="neir">
        <textarea name="content" class="content" id="content" cols="45" rows="3"  style="width: 394px; height: 70px;"></textarea>
        
    </div>
    <div class="fs">
        <input type="button" class="button" value="关 闭" /><input type="submit" class="submit" value="发 送" />
    </div>
    </div>
</body>
    <script>
    function face_xz(v){
            var facebook='[f:'+v+']';
            var yy=$('#content').val();
            var demo =yy+facebook;
            $('#content').val(demo);
            $('#face1').hide();
        }
    $(document).ready(function(){
        $('.submit').click(function(){
            var name=$('.content').val();
            if(name=="")
            {
                alert("内容不能为空");
            }else
            {
                $.post("{:U(GROUP_NAME.'/Index/ajax')}",{content:name},function(msg){
                    var dat=eval("(" + msg + ")");
                     $(".show").empty();
                     $.each(dat,function(neirongIndex,datt){
                    var html = "<div class='neirong'><span>"+datt['sender'];
                     html += ":</span><br/>"+face_2(datt['content']);
                     html += "</div>";     
                     $('.show').append(html);                                    
                });
                 $("textarea").val('');
                });
            }
        });
        //关闭聊天框
        $('.button').click(function(){
            $('#close').hide();
        });
        /*工具栏*/
        $(document).on('click','#face',function(){
            $('#face1').show();
            $(this).attr("id","gb");
        
        });
        
        $(document).on('click','#gb',function(){
            $('#face1').hide();
            $(this).attr("id","face");
        
        });
        $(function(){
            val=$("#face1").html();
            val=val.replace(/[f:(100|d{1,2})]/g,"<img onclick="face_xz($1)" src='/Public/face/$1.gif'>")
            $("#face1").html(val);
        })
        /**/
    });
    function xx(){
        //返回处理最新十条信息
         $.get("{:U(GROUP_NAME.'/Index/fresh')}",'',function(mess){
             var dat=eval("(" + mess + ")");
             $(".show").empty();
             $.each(dat,function(neirongIndex,datt){
             var html = "<div class='neirong'><span>"+datt['sender'];
              html += ":</span><br/>"+face_2(datt['content']);    
             html += "</div>";  
                $('.show').append(html);                                      
        });            
             });
             //返回处理在线用户    
         $.get("{:U(GROUP_NAME.'/Index/freshUser')}",'',function(mes){
            var dat=eval("(" + mes + ")");
             $(".one").empty();
             $.each(dat,function(oneIndex,onlin){
                 var line="<a href='' title='点击进行私聊'><span class='one'>"+onlin['nickname']+"<br/></span></a>";
            $('.online').append(line);
    });
    });

    }
    //自动刷新
    setInterval("xx()",1000);    
    //处理表情
    function face_2(val){
    val=val.replace(/[f:(100|d{1,2})]/g,"<img src='/Public/face/$1.gif'>")
    return val
    }
    </script>
</html>

php执行代码:

<?php

    Class IndexAction extends CommentAction{


        //登陆默认页面,因继承commentAction故不显示

        public function index(){
            $this->display();
        }

        //利用ajaxreturn以JSON方式返回聊天内容数组
        public function ajax(){
            $data=array();
            $Model = new Model();
            $data['content']=$_POST['content'];
            $data['time']=time();
            $data['timee']=date('Y-m-d H:i:s',time());
            $data['sender']=session('account');
            $dd=M(msg)->data($data)->add();
            if($dd){
                $dataa=M(msg)->order('id desc')->limit('10')->select();

            $this->ajaxReturn($dataa);
           }
        }
        

        //刷新时获取最新十条聊天内容和在线用户
        public function homePage(){
            $this->msg=M(msg)->order('id desc')->limit('10')->select();
            $this->user=M(user)->where(array('status'=>1))->select();
            $this->display();
        }


        //即时返回最新十条聊天内容
        public function fresh(){
            $data=M(msg)->order('id desc')->limit('10')->select();
            $this->ajaxReturn($data);
        }


        //即时返回在线用户
        public function freshUser(){
            $dat=M(user)->where(array('status'=> 1))->select();
            $this->ajaxReturn($dat);
        }

    }
?>

效果图:

以上贴出的主要代码,还有注册、登录等小编就不在贴出。

下载地址:http://pan.baidu.com/s/1bnO8yvH

打赏本站,你说多少就多少

精彩评论

微信关注

Copyright © 2013-2019 千奇博客 保留所有权利 辽ICP备13008238号