You want to add online chat for your blog or site, to provide technical support to your users, or not just customer service functions, so that your users can communicate with each other, enhance the site or blog interactive features, here for you to introduce 1 for the blog or website to create a chat tool, You can read this code as long as you know thinkphp. The main implementation of the method is Thinkphp+ajax, not to repeat the direct posting of code:
Database structure:
Think_msg table to store chat records
DROP TABLE IF EXISTS ' think_msg ';
CREATE TABLE IF not EXISTS ' think_msg ' (
' id ' int ' not NULL auto_increment COMMENT ' number of messages ',
' Content ' text character set UTF8 not NULL COMMENT ' information contents ',
' Time ' int (m) not NULL COMMENT ' send Info ',
' Sender ' varchar character set UTF8 not NULL COMMENT ' send message person ',
' Timee ' varchar not NULL,
' tosend ' varchar (m) Character set UTF8 not NULL COMMENT ' receiver ',
PRIMARY KEY (' id ')
) Engine=innodb DEFAULT charset=latin1 auto_increment=3;
Think_user tables are used to store user information
DROP TABLE IF EXISTS ' Think_user ';
CREATE TABLE IF not EXISTS ' Think_user ' (
' ID ' mediumint (6) Not NULL auto_increment,
' Nickname ' varchar not NULL,
' dept_id ' smallint (3) not NULL,
' Account ' varchar ' is not NULL COMMENT ' accounts ',
' pwd ' varchar not NULL COMMENT ' password ',
' Status ' int (2) not NULL COMMENT ' state: ' 0 ' not line, ' 1 ' online, ' 2 ' stealth, ' 3 ' busy ',
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT Charset=utf8 auto_increment=4;
HTML code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> Online chat </title>
<script type= "Text/javascript" src= "/public/js/jquery.js" ></script>
<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 ')} ' > Exit </a></span></div>
<div class= "chat" id= "Close" >
<!--information Display box-->
<div class= "Show" >
<volist name= "msg" id= "VO" >
<div class= "Neirong" >
<span>{$vo .sender}:</span>
<br>{$vo. Content}
</div>
</volist>
</div>
<!--online User box-->
<div class= "Online" >
<span class= "Neiron" > Online member </span><br/>
<volist name= "user" id= "VO" >
<a href= "" ><span class= "one" >{$value .nickname}</span></a>
</volist>
</div>
<!--input Box-->
<div class= "option" >
<ul>
<li><a href= "javascript:void (0);" id= "Face" title= "facial expression" > ^_^ </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= "" rows= "3" style= "WIDTH:394PX; height:70px; " ></textarea>
</div>
<div class= "FS" >
<input type= "button" class= "button" value= "Close"/><input type= "Submit" class= "submit" value= "Send"/>
</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 ("Content cannot be empty");
}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 (');
});
}
});
Close Chat Box
$ ('. Button '). Click (function () {
$ (' #close '). Hide ();
});
/* Toolbar * *
$ (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, "$ ("#face1"). html (val);
})
/**/
});
function xx () {
Back to processing latest 10 information
$.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);
});
});
Back to processing online users
$.get ("{: U (group_name.") /index/freshuser ')} ",", function (MES) {
var dat=eval ("(" + mes + ")");
$ (". One"). empty ();
$.each (Dat,function (Oneindex,onlin) {
var line= ' <a href= ' title= ' Click for private chat ' ><span class= ' one ' > ' +onlin[' nickname ' ']+ ' <br/></span> </a> ";
$ ('. Online '). append (line);
});
});
}
Auto Refresh
SetInterval ("xx ()", 1000);
Dealing with facial expressions
Function Face_2 (val) {
Val=val.replace (/[f: (100|d{1,2})]/g, "Return Val
}
</script>
PHP Execution Code:
<?php
Class Indexaction extends commentaction{
Login to the default page, due to inheritance commentaction so do not show
Public Function index () {
$this->display ();
}
Using Ajaxreturn to return an array of chat content in 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 (' ")->select ();
$this->ajaxreturn ($DATAA);
}
}
//Refresh to get the latest 10 chat content and online users
Public Function homepage () {
$this- >msg=m (msg)->order (' id desc ')->limit (' ")->select ();
$this->user=m (user)->where Array (' Status ' =>1)->select ();
$this->display ();
}
Instant return to the latest 10 chat content
Public Function Fresh () {
$data =m (msg)->order (' id desc ')->limit (' ")->select ();
$this->ajaxreturn ($data);
}
Instant return to online users
Public Function Freshuser () {
$dat =m (user)->where (' status ' => 1))->select ();
$this->ajaxreturn ($dat);
}
}
?>
Effect Chart:
SOURCE Download: http://filesimg.111cn.net/down/thinkphp (www.111cn.net) ajax.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
