thinkphp 实现在线聊天功能的例子

你想为你的博客或者网站添加的在线聊天功能，为你的用户提供技术支持，或者不仅仅是客服功能，让你的用户能够相互交流，增强网站或者博客互动功能，这里为大家介绍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://filesimg.111cn.net/down/thinkphp(www.111cn.net)ajax.zip

时间： 2025-01-23 16:07:44

thinkphp 实现在线聊天功能的例子的相关文章

网页实现在线聊天功能

问题描述 怎样用ASP.NET实现在线聊天功能 解决方案 解决方案二:(个人观点)在页面加一个GirdView控件或者ListView控件作为显示聊天信息,在加一个ListBox控件,用来输入信息的(附带表情要另作考虑),加一个确定按钮,输入信息时,点击确定按钮,数据插入到数据库中,并调用显示信息的方法,就能实现那种聊天的效果,同时页面最好加一个无闪烁刷新,这样才能同步,从而达到那种聊天效果.解决方案三:这个可以去看看,做的简单点可以ajax不停的轮询,就是服务器会吃不消 -----------

基于Java Socket实现一个简易在线聊天功能（一）_java

先给大家说下实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首先实现第一步的简单功能,难点在于: 1.没有用过awt组件,没有用过java相关的监听事件: 2.长时间没有使用socket进行客户端和服务端的交互,并

想开发一个类似人人网右下角的在线聊天功能？？

问题描述 我想开发一个类似人人网右下角的在线聊天功能,主要功能有31.可以实时显示在线好友(不想要定时刷新数据库的方式,因为占资源太大,当然Ajax是必需的)2.加好友并分组3.在线聊天请问各位有没有代码或参考资料-多谢 解决方案 解决方案二:顶一下!解决方案三:没有做过.帮顶解决方案四:没有做过.帮顶解决方案五:我觉得AJAX估计不行,可以用flex,silverlight等,当然这些插件表现出来很小,用户注意不到,然后利用这些插件做跳板,利用其socket通信,这样才会很及时.javascr

腾讯微博新增在线聊天功能

腾讯微博新增了在线http://www.aliyun.com/zixun/aggregation/10032.html">聊天功能,发起聊天的范围仅限微博中相互收听的用户(好友),我输入"徐静蕾"然后它提示我"无法发起聊天".在微博上有很多人看到MM.靓仔都会想要求交往.求合体,其中最重要的一个媒介就是IM工具,腾讯微博的聊天功能在保护QQ用户隐私的同时提供基于微博的一种新沟通方式. 在这个新工具中,你可以设置自己的聊天状态,联系人列表会显示你最近聊

java Socket实现简单在线聊天（一）

最近的项目有一个在线网页交流的需求,由于很久以前做过的demo已经忘记的差不多了,因此便重新学习一下. 我计划的大致实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首先实现第一步的简单功能,难点在于: 1.没有用过

java Socket实现简单在线聊天（二）

接<java Socket实现简单在线聊天(一)>,在单客户端连接的基础上,这里第二步需要实现多客户端的连接,也就需要使用到线程.每当有一个新的客户端连接上来,服务端便需要新启动一个线程进行处理,从而解决之前的循环读取中造成阻塞的问题. 写线程通常有两种方法,集成Thread或者实现runnable接口,原则上是能实现runnable的情况下就不继承,因为实现接口的方式更加灵活. 客户端代码相较之前没有变化,变得是服务端,因此这里便只贴出服务端代码: package chat.chat; im

java Socket实现简单在线聊天（三）

在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实现客户端转发,无非就是增加输出流:而之前客户端都只发不收,这里也需要更改客户端达到循环接收服务端消息的目的,因此也需要实现多线程. 在实现这个功能的时候,偶然想起随机生成验证码的功能,于是也灵机一动随机给每个客户端生成一个名字,从而在输出的时候看起来更加像是群聊,不仅有消息输出,还能看到是谁. 实现

AgileEAS.NET SOA 中间件平台.Net Socket通信框架-完整应用例子-在线聊天室系统-下载配置

一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍      在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA中间Socket/Tcp框架进行了总体的介绍,我们知道 AgileEAS.NET SOA中间件Socket/Tcp框架是一套Socket通信的消息中间件: 二.简单的服务器客户段消息应答      在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架-简单例子-实

asp.net实现QQ在线聊天程序中javascript的窗口注册机制

前段时间给公司做了一个类似QQ的Asp.net在线聊天程序,与服务器之间的通讯是通过前台页面的定时 器到服务器上的临时消息目录中取得相关信息来实现的,消息结构XML,为了避免对服务器造成太大的压 力就只开了一个定时器,也没敢多开,程序完成后由于测试条件限制只在少的可怜的几台机器上测试了一 下,效果还算可以吧,目前能实现发送文字,图片,文件查看历史记录,网络硬盘等基本功能,由于聊天 窗口是嵌套在公司主框架里面的所以得实现聊天主窗体和聊天窗体以及一些其他窗体之间指针的引用问题 ,避免某个聊天窗口被打