Scripts
Mootools PHP Chatbox
Dit is een simpele chatbox die gebruik maakt van het Mootools javascript framework. Het heeft maar 3 bestanden nodig. Eentje met het berichten venster en het invulveld (index.php) de 2 voor de dataverwerking. Wat op de server gebeurd dus. (chatboxserver.php) en de 3 is het mootools framework (mootools.js) Het script verwijderd oude berichten automatisch. Dit is om te voorkomen dat er 1000den records komen die niet eens gebruikt worden. Deze bestanden kan je gewoon uploaden. Even een sql tabel aanmaken met de onderstaande sql. en in chatboxserver.php even aanpassen zodat hij ook werkelijk verbinding maakt met de mysql server. De sql CREATE TABLE chatbox ( id int(10) NOT NULL auto_increment, userid int(10) default NULL, nick varchar(255) default NULL, msg varchar(255) default NULL, tijd datetime default NULL, PRIMARY KEY (id) ); Deze chatbox maakt gebruik van het Mootools framework Deze is te downloaden op http://mootools.net/download De componenten die je moet aanklikken zijn: AJAX, FX.Scroll en Window.DomReady, alle andere gaan dan automatisch mee. Download het bestand dan onderaan de pagina (met Packer Compression) en sla op als mootools.js of download hem van http://www.aryweb.nl/voorbeelden/chatbox/mootools.js (in mijn voorbeeld werkt de online userlijst niet. Dit komt omdat mijn MySQL server online nog wat oud is bij mijn host... en deze functie nog niet ondersteund. Op mijn localhost met MySQL 5 had ik nergens last van)
mootools-php-chatbox
[b]index.php[/b]
[code]
<?php
session_start();
/**
*
* Session van het laatste bericht verwijderen zodat hij de laatste 20 berichten straks terug geeft
*
**/
unset($_SESSION['lastmsg']);
/**
*
* User ID
*
**/
if(!empty($_SESSION['userid'])){
$userid = $_SESSION['userid'];
}else{
$rand = rand(1,10000000);
$_SESSION['userid'] = $rand;
$userid = $rand;
}
if(!empty($_SESSION['nickname'])){
$nickname = $_SESSION['nickname'];
}else{
$nickname = 'guest'.$userid;
}
?>
<!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="de" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
<script src="mootools.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
<?php
/**
*
* Deze chatbox maakt gebruik van het Mootools framework
* Deze is te downloaden op http://mootools.net/download
* De componenten die je moet aanklikken zijn:
* AJAX, FX.Scroll en Window.DomReady, alle andere gaan dan automatisch mee.
* Download het bestand dan onderaan de pagina (met Packer Compression) en sla op als mootools.js
*
**/
?>
window.addEvent('domready', function() {
/**
*
* Een soort vergeljkbare functie als de php functie date() maken
*
**/
function gettime(vorm){
if(vorm == ''){
vorm = 'Y-m-d G:i:s';
}
var cTime = new Date()
newDate = vorm.replace('m',cTime.getMonth() + 1);
newDate = newDate.replace('d',cTime.getDate());
newDate = newDate.replace('Y',cTime.getFullYear());
newDate = newDate.replace('G',cTime.getHours());
newDate = newDate.replace('i',cTime.getMinutes());
newDate = newDate.replace('s',cTime.getSeconds());
return newDate;
}
// Het element waar alle berichten inkomen
var log = $('log_res');
/**
*
* Verzend de berichten
* Maakt het veld msg weer leeg zodat er een nieuw bericht in kan
* @ $('myForm') = het id van je formulier
* @ $('msg') = het id van je input veld waar je de berichten invult
*
**/
$('myForm').addEvent('submit', function(e) {
new Event(e).stop();
this.send({
onComplete: function() {
$('msg').setProperty('value','');
}
});
});
/**
*
* De functie die de berichten uphaalt en zet ze in een div in het berichtenvenster
* Het update de tijd van de laatste update
* Zorgt dat het venster helemaal beneden is gescrollt
* @ $('last_update') = de div waar de laatste update instaat
*
**/
var getmessage = function(){
var url = $('myForm').getProperty('action')+'?refresh=true';
var myAjax = new Ajax(url, {
method: 'get',
onComplete: function(dedata){
if(dedata != ''){
var nieuwmsg = new Element('div').injectInside(log);
nieuwmsg.setHTML(dedata);
log.scrollTo(0,log.getSize().scrollSize.y);
}
$('last_update').setHTML(gettime('d-m-Y G:i:s'));
}
}).request();
}
/**
*
* Het om de 900 micro seconden de functie getmessage(); uitvoeren voor het updaten van het berichtenvenster
*
**/
getmessage();
var periodical = getmessage.periodical(900);
/**
*
* De functie die de online gebruikers uphaalt
* @ $('usersonline') = is de div waar het resultaat in komt
*
**/
var getusers = function(){
var url = $('myForm').getProperty('action')+'?users=true';
var myAjax = new Ajax(url, {
method: 'get',
onComplete: function(dedata){
if(dedata != ''){
$('usersonline').setHTML(dedata);
}
}
}).request();
}
/**
*
* Het om de 5000 micro seconden de functie getusers(); uitvoeren voor het updaten van de online users
*
**/
getusers();
var periodical = getusers.periodical(5000);
});
//-->
</script>
</head>
<body>
<div id="log_res" style="border: 1px solid black; width: 500px; height: 400px; overflow: auto; float: left"></div>
<div style="border:1px solid black; width: 200px; float: left; margin-left: 20px;">
<h3>Online users</h3>
<div id="usersonline"></div>
</div>
<div style="clear: both;"> </div>
<form id="myForm" action="chatboxserver.php" method="get">
<input type="text" name="nick" id="nick" size="8" value="<?=$nickname?>" />
<input type="text" name="msg" id="msg" size="70" />
<input type="submit" name="button" value="Verzend" />
<div>Laatste update: <span id="last_update"></span></div>
</form>
<h1>Index.php</h1>
<?php
highlight_file('index.php');
?>
<h1>chatboxserver.php</h1>
<?php
highlight_file('chatboxserver.php');
?>
</body>
</html>
[/code]
[b]chatboxserver.php[/b]
[code]
<?php
/**
*
* Deze chatbox is gemaakt door Arian Stolwijk www.aryweb.nl
* Bij somige mysql querys zijn TIMEDIFF als comment. Als je MySQL server versie >= 4.1 dan kan je die regel eronder weghalen met date() en de TIMEDIFF uncommenten...
*
* De MySQL voor de chatbox
*
* CREATE TABLE chatbox (
* id int(10) NOT NULL auto_increment,
* userid int(10) default NULL,
* nick varchar(255) default NULL,
* msg varchar(255) default NULL,
* tijd datetime default NULL,
* PRIMARY KEY (id)
* );
*
*
**/
session_start(); // Sessie starten
/**
*
* Database connectie
*
**/
mysql_connect('localhost','root','');
mysql_select_db('chatbox');
/**
*
* Paar functies
*
**/
// Juist de ' slashen
function quote_smart($value){
// Stripslashes
if (get_magic_quotes_gpc()){
$value = stripslashes($value);
}
// Quote if not a number or a numeric string
if (!is_numeric($value)){
$value = mysql_real_escape_string($value);
}
return $value;
}
// Beveiligen
function beveilig($string){
return(quote_smart(htmlentities($string)));
}
function beveilig_nohtml($string){
return(quote_smart(str_replace(array('<','>'),array('<','>'),trim($string))));
}
// Error handler, net wat je er zelf van wilt maken
function error($errno){
if($errno == 5){
die('MySQL error<pre>'.mysql_error().'</pre>');
}else{
die('Error: '.$errno.'');
}
}
/*
* De datum staat als YYYY-mm-dd GG:ii:ss in de database,
* we willen in nederland dd-mm-YYYY GG:ii:ss dus maken we dat er maar evenvan
**/
function convert_date($tijd){
$tijd = explode(' ',$tijd);
$datum = $tijd[0];
$tijd = $tijd[1];
$datum = explode('-',$datum);
$datum = $datum[2].'-'.$datum[1].'-'.$datum[0];
return $datum.' '.$tijd;
}
/**
*
* Een ubb parser. Hier kan je alle berichten doorheen laten gaan zodat ze geparsed worden
* Dit is bijvoorbeeld handig voor smilies of ubb teksten
*
* Dit is enkel als voorbeeld, als je een echte parser wilt moet je maar zoeken op php hulp,
* daar staat vast wel een goede ubbparser
*
**/
function ubb_parser($value){
$value = str_replace(array('[b]','[/b]'),array('<strong>','</strong>'),$value);
$value = str_replace(array('[i]','[/i]'),array('<em>','</em>'),$value);
$value = str_replace(':P','<img src="images/tongue.gif" alt=":P" />',$value);
return($value);
}
/**
*
* User ID
*
**/
if(!empty($_SESSION['userid'])){
$userid = $_SESSION['userid'];
}else{
$rand = rand(1,10000000);
$_SESSION['userid'] = $rand;
$userid = $rand;
}
// De tijd
$tijd = date('Y-m-d G:i:s');
if(!empty($_POST['msg'])){
/**
*
* Berichten posten
* $_POST['msg'] gaat niet door beveilig() maar door quote_smart() anders gaan de é è ë rare tekens etc. niet goed
* Ook met nickname
*
**/
$msg = beveilig_nohtml($_POST['msg']);
if(!empty($_POST['nick'])){
$nick = beveilig_nohtml($_POST['nick']);
$_SESSION['nickname'] = $nick;
}else{
$nick = 'guest'.$userid;
}
$insrt_sql = "INSERT INTO chatbox (msg,userid,nick,tijd) VALUES ('".$msg."','".$userid."','".$nick."','".$tijd."')";
$insrt_res = mysql_query($insrt_sql);
if(!$insrt_res){
error(5);
}
}elseif(isset($_GET['refresh'])){
/**
*
* Berichten ophalen
* Of alle berichten die na het ID komen wat in de session al staat opgeslagen
* Of 20 berichten gelijk uit de database halen (als de pagina net is geopend)
*
**/
if(!empty($_SESSION['lastmsg'])){ // Als de sessie al bestaat en niet leeg is...
/**
*
* De sessie bestaat dus worden hier alle berichten geselecteerd die na het ID uit de sessie komen
* Vervolgens worden ze geechoot
* Het ID van het laatste bericht wordt opgeslagen in de session
*
**/
$lastmsg = beveilig($_SESSION['lastmsg']);
$select_sql = "
SELECT
id,
msg,
tijd,
nick
FROM
chatbox
WHERE
id >= '".beveilig($lastmsg)."'";
$select_res = mysql_query($select_sql) or die(mysql_error());
if(mysql_num_rows($select_res) >= 1){
while($msgs = mysql_fetch_assoc($select_res)){
$msg = '<strong>'.$msgs['nick'].'</strong> zegt om: '.convert_date($msgs['tijd']).'<br /> '.ubb_parser($msgs['msg']).'<br />';
if(print($msg)){
$lastmsg = ($msgs['id']+1);
}
}
$_SESSION['lastmsg'] = $lastmsg;
}
}else{
/**
*
* De laaste 20 berichten worden nog weergegeven standaard,
* als er nog geen sessie bestaat (dus net de pagina heeft geopend)
* De geselecteerde berichten staan nog in de verkeerde volgeorde dus worden nog omgedraaid dmv de for loop
* Het ID van het laatste bericht wordt ook nog opgeslagen in de session
*
**/
$select_sql = "
SELECT
id,
msg,
nick,
tijd
FROM
chatbox
ORDER BY
id DESC
LIMIT
20";
$select_res = mysql_query($select_sql);
if(mysql_num_rows($select_res) >= 1){
$selected_last_msg = false;
while($msgs = mysql_fetch_assoc($select_res)){
$msg[] = '<strong>'.$msgs['nick'].'</strong> zegt om: '.convert_date($msgs['tijd']).'<br /> '.ubb_parser($msgs['msg']).'<br />';
if(!$selected_last_msg){
$lastmsg = ($msgs['id']+1);
$selected_last_msg = true;
}
}
for($i=(count($msg)-1);$i>=0;$i--){
echo $msg[$i];
}
$_SESSION['lastmsg'] = $lastmsg;
}
}
}elseif(isset($_GET['users'])){
/**
*
* De online gebruikers
* De berichten die binnen 5 minuten (300 seconden) zijn gepost worden geselecteerd
* De fotografen van die berichten worden dan achterhaald en geechoot
*
**/
$user_sql = "
SELECT
userid,
nick
FROM
chatbox
WHERE
";
// TIME_TO_SEC(TIMEDIFF(NOW(),tijd)) < 300
$user_sql .= "
tijd > '".date ("Y-m-d G:i:s",(time()-600))."'
ORDER BY
id ASC";
$user_res = mysql_query($user_sql) or die(mysql_error());
if($user_res){
$user_aant = mysql_num_rows($user_res);
if($user_aant >= 1){
while($user = mysql_fetch_assoc($user_res)){
$fotograaf[$user['userid']] = $user['nick'];
}
foreach($fotograaf as $last_users){
echo $last_users.'<br />';
}
}
}
/**
*
* Oude berichten verwijderen
* 3600 staat voor 3600 seconden == 1 uur
*
**/
$del_msg_sql = "
DELETE FROM
chatbox
WHERE
";
// TIME_TO_SEC(TIMEDIFF(NOW(),tijd)) > 3600
$del_msg_sql .= "
tijd < '".date ("Y-m-d G:i:s",(time()-3600))."'
LIMIT
30";
$del_msg_res = mysql_query($del_msg_sql);
if(!$del_msg_res){
echo '<pre>',$del_msg_sql.'</pre>';
error(5);
}
}else{
/**
*
* Er is geen bericht gepost
* Er is geen aanvraag om berichten op te halen
* Er hoeven geen users geselecteerd te worden die online zijn
*
**/
echo 'Je wilt niet heel veel ofwel ??';
}
?>
[/code]
Reacties
0