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

通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能。附带详细源码案例。这个聊天室是一个简单的聊天室,通过javascript setInterval()和ajax函数,不停的去获取服务器获取最新的聊天数据信息,并无刷新的写入到前台DOM中,来实现在线聊天的功能,这是一个比较笨的方法实现在线聊天室功能,不建议用于实际项目中。html代码:

实现一个简单的在线聊天室功能

在线聊天

.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;}

发送

//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("

"+data[i].name+" "+data[i].addtime+" ["+data[i].address+"] :
"+data[i].content+"
");

$('#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("

"+data[i].name+" "+data[i].addtime+" ["+data[i].address+"] :
"+data[i].content+"
");

$('#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('请求出错!');

}

});

});

});

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简单聊天室源码下载:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP是一种用于创建动态网页的服务器端脚本语言,而AJAX是一种通过后台异步请求实现页面无刷新更新的技术。要实现一个简单聊天室,可以使用ASP和AJAX的结合使用。 首先,我们需要一个包含聊天室界面的ASP页面。在页面中,我们可以添加一个文本框输入框用于输入聊天内容,以及一个按钮用于发送消息。还可以添加一个用于显示聊天内容的区域。 在后台,我们可以使用ASP来处理用户的消息发送和接收。当用户点击发送按钮时,可以使用AJAX来发送消息到后台的ASP页面。在后台,我们可以将接收到的消息存储到数据库或者其他数据源中,并返回一个成功的响应给前端。 同时,我们可以定期使用AJAX来从后台获取新的消息。在前端,我们可以使用JavaScript定时请求后台的ASP页面,获取最新的消息。后台可以从存储消息的数据库或其他数据源中获取最新的消息,并返回给前端。 在前端,我们可以使用JavaScript将接收到的消息动态地添加到聊天窗口中。可以使用DOM操作来动态地创建和添加聊天消息的元素,以及修改其内容。 总结来说,通过使用ASP和AJAX的组合,我们可以实现一个简单聊天室。用户可以在前端输入消息并发送,后台接收到消息后保存并返回,前端定时获取并动态显示接收到的新消息。这样就实现一个简单的聊天功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值