您现在的位置是：网站首页 > 脚本编程>
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);
}
}
?>
效果图：
以上贴出的主要代码，还有注册、登录等小编就不在贴出。
打赏本站，你说多少就多少
本文地址：https://www.qi522.com/view/72.html
来 源：千奇博客
