'Blinkfri' OleBole-Chat ... download et skelet her
<ole>Hej drenge og piger. Lad mig starte med at undskylde, jeg hermed spammer Ekspertens database på det groveste :)
Jeg har lagt mærke til, der hver uge er mindst ét spm. vedr. en chat, der ikke 'blinker' ved opdatering. Jeg er blevet træt af at gentage mig selv - og ofte bliver forklaringerne ikke forstået.
Jeg besluttede mig derfor for at skrive en, der fungerer, som ønsket og lægge den her, så der altid kan linkes til den ... og her er den så :)
Den består af filerne:
chat.sql (opretter tabellerne i databasen)
config.php (Konfigurerer app'en og indeholder lidt global funktionalitet)
login.php (Siger sig selv)
index.php (Selve chat-vinduet med to skjulte iframes)
msg.php (Ligger i den ene iframe og ndeholder PHP-funktioner til DB-indsættelse)
chat.php (Ligger i den anden skjulte iframe, trækker fra DB'en og opdaterer chat-vinduet)
logout.php (Popper op og logger brugeren ud, når chat-vinduet lukkes)
Udover at være 'blinkfri', downloader den kun de seneste beskeder, som den enkelte bruger endnu ikke har set. Det betyder et minimum af belastning på serveren.
Chat'en er ikke perfekt - den er banket sammen over en søvnig nat - men den vil sikkert udvikle sig med tiden, i takt med at flere og flere bruger den og bliver eksperter på koden.
Har I spm. til den, vil det nok være smart at oprette et spm. (dette bliver rigelig langt i sig selv) og kalde det noget med 'OleBole-Chat', da den så bliver lettere at søge på - og dermed at finde alle opdateringer, uddybninger og forklaringer.
Det eneste, jeg vil bede Jer om, er at overholde den copyright-notice, jeg har sat i toppen. Det formoder jeg ikke I finder for meget, når nu jeg har skrevet den til jeres frie brug :)
-------- chat.sql --------
# MySQL-Dump
# Database: chat
# --------------------------------------------------------
# Table structure for table 'messages'
#
CREATE TABLE messages (
user char(15) NOT NULL default '0',
msg char(250) NOT NULL default '0',
stamp int(14) NOT NULL default '0',
KEY stamp (stamp)
) TYPE=MyISAM;
# Table structure for table 'users'
#
CREATE TABLE users (
user char(15) NOT NULL default '0',
UNIQUE KEY user (user)
) TYPE=MyISAM;
------------------------
-------- config.php --------
<?
# ------------------------------------------
# Server variables
$db_server = "localhost";
$db_user = "";
$db_pass = "";
$db_db = "chat";
# ------------------------------------------
# The longest time messages are kept in DB
$maxAge = 60*10; // seconds
# ------------------------------------------
# Variables used for rendering of messages
$maxNumMsgs = 50; // Max numbers of lines showed
$hiCol = "#ffffff"; // Highlight row-color
$loCol = "#ededed"; // Lolight row-color
# ==========================================
# Functionality used globaly (don't alter)
$connection = mysql_connect($db_server, $db_user, $db_psw) or die (mysql_error());
$do_connect = mysql_select_db($db_db, $connection) or die (mysql_error());
if ( !empty($_SESSION) ) {
extract($_SESSION);
} else if ( !empty($HTTP_SESSION_VARS) ) {
extract($HTTP_SESSION_VARS);
}
if ( !empty($_GET) ) {
extract($_POST);
} else if ( !empty($HTTP_GET_VARS) ) {
extract($HTTP_GET_VARS);
}
if ( !empty($_POST) ) {
extract($_POST);
} else if ( !empty($HTTP_POST_VARS) ) {
extract($HTTP_POST_VARS);
}
?>
------------------------
-------- login.php --------
<?
include ( "config.php" );
if ( isset($user) && $user<>"" && strlen($user)<=15 ) {
$user = addslashes( $user );
$sql = "insert into users set user='$user'";
$res = mysql_query( $sql );
if ( mysql_affected_rows()>0 ) {
$msg = "<b>Ny bruger logget på</b>";
$stamp = time();
$sql = "insert into messages ( user, msg, stamp ) values ( '$user', '$msg', '$stamp' )";
mysql_query( $sql );
session_start();
session_register( "user_name" );
$user_name = $user;
Header ( "Location: index.php" );
} else {
$err_msg = "<div style=\"color:#ff0000;font-weight:bold;text-align:center;\">Dette nick er allerede optaget</div>";
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ..:: LogIn ::.. </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div, input, button {
font-family: verdana, arial, sans-serif;
font-size: 11px;
}
input {
width: 200px;
border: 1px dashed #336699;
}
button {
background-color: #dedede;
border: 1px solid #336699;
margin-left: 15px;
}
</style>
<script type="text/JavaScript">
var d=document;
function checkForm(f) {
if ( f.user.value=="" ) {
alert("Du skal skrive et chat-nick");
return false;
}
if ( f.user.value.length>15 ) {
alert("Dit chat-nick må højest være på 15 tegn");
return false;
}
}
</script>
</head>
<body>
<div style="padding-top:120px;" align="center">
<?=$err_msg?>
<b>Skriv dit chat-nick og tryk 'LogIn':</b>
<form action="login.php" method="post" onsubmit="return checkForm(this)">
<input type="text" name="user">
<button type="submit">LogIn</button>
</form>
</div>
<script type="text/JavaScript">d.forms[0].user.focus();</script>
</body>
</html>
------------------------
-------- index.php --------
<?
include ( "config.php" );
unset( $user_name );
session_start();
if ( !isset($user_name) || $user_name=="" ) Header ( "Location: login.php" );
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ..:: OleBoleChat ::.. </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ***********************************************************************
OleBole-Chat Version 1.0
(c) Copyright Ole Clausen, 2003
This chat was downloaded from http://www.eksperten.dk/spm/320350
The code is free to use if you leave these lines untouched.
If you alter the code, dont erase these lines.
Add a modification-notice instead.
************************************************************************ -->
<style type="text/css">
td {
font-family: verdana, arial, sans-serif;
font-size: 11px;
}
.msgTbl {
width: 100%;
}
td, input, button {
font-family: verdana, arial, sans-serif;
font-size: 11px;
}
input {
width: 100%;
border: 1px dashed #336699;
}
button {
background-color: #dedede;
border: 1px solid #336699;
margin-left: 15px;
}
.u {
width: 100px;
color: #ff0000;
vertical-align: top;
padding: 5px 12px 5px 5px;
border-bottom: 1px dashed #999999;
}
.m {
padding: 5px;
border-bottom: 1px dashed #999999;
}
.time {
color: #336699;
font-size: 9px;
}
.clHidFrame {
position: absolute;
width: 1px;
height: 1px;
left: 0px;
top: 0px;
}
#chat {
width: 450px;
}
</style>
<script type="text/JavaScript">
var maxNumMsgs = <?=$maxNumMsgs?>;
var hiCol = "<?=$hiCol?>";
var loCol = "<?=$loCol?>";
var d=document;
function gE(id){return d.getElementById(id)}
function gA(o,tN){return o.getElementsByTagName(tN)}
function writeChat( a ) {
var tbl = gE("chat");
for (i=0; i<a.length; i+=3) {
var bgCol = ( gA(tbl, "TR")[0].style.backgroundColor=="#ffffff" )? loCol : hiCol;
var newRow = tbl.insertRow(0);
var newCell = newRow.insertCell(0);
newCell.innerHTML = "<b>" + a[i] + "</b><div class=\"time\">[" + a[i+1] + "]</div>";
newCell.className = "u";
var newCell = newRow.insertCell(1);
newCell.innerHTML = a[i+2];
newCell.className = "m";
newRow.style.backgroundColor = bgCol;
}
var numMsgs = gA(tbl, "TR").length;
while ( numMsgs>maxNumMsgs ) {
tbl.deleteRow(numMsgs-1);
numMsgs--;
}
}
window.onunload = function() {
window.open( "logout.php", "logOutWin", "width=100,height=100" );
}
</script>
</head>
<body>
<div style="width:470px">
<div id="bla" style="height:250px;overflow:auto;">
<table id="chat" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2"> </td>
</tr>
</table>
</div>
<form name="msgForm" target="msgFrame" action="msg.php" method="post">
<table class="msgTbl" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><input type="text" name="msg"></td>
<td style="width:10px;"><button type="submit">Send</button></td>
</tr>
</table>
</form>
</div>
<iframe name="msgFrame" class="clHidFrame" src="msg.php" frameborder="0"></iframe>
<iframe name="chatFrame" class="clHidFrame" src="chat.php" frameborder="0"></iframe>
</body>
</html>
------------------------
-------- msg.php --------
<?
include ( "config.php" );
unset( $user_name );
session_start();
if ( isset($msg) && $msg<>"" && $user_name ) {
$replArr = array(
"<" => "<",
">" => ">",
"\"" => "'",
"--" => ""
);
strtr( $msg, $replArr );
$msg = addslashes( $msg );
$stamp = time();
$sql = "insert into messages ( user, msg, stamp ) values ( '$user_name', '$msg', '$stamp' )";
mysql_query( $sql );
$oldStamp = $stamp - $maxAge;
$sql = "delete from messages where stamp<$oldStamp";
mysql_query( $sql );
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/JavaScript">
parent.d.forms[0].msg.value = "";
parent.d.forms[0].msg.focus();
</script>
</html>
------------------------
-------- chat.php --------
<?
include ( "config.php" );
if ( !isset($s) || $s=="" ) $s = 0;
$sql = "select * from messages where stamp>'$s' order by stamp";
$res = mysql_query( $sql ) or die (mysql_error());
$num_rows = mysql_num_rows( $res );
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/JavaScript">
var a = new Array();
<?
if ($num_rows>0) {
while ( $row=mysql_fetch_array($res) ) {
$arr_str .= "a[a.length] = \"".stripslashes($row["user"])."\";\n";
$arr_str .= "a[a.length] = \"".date( "h:i:s", $row["stamp"] )."\";\n";
$arr_str .= "a[a.length] = \"".stripslashes($row["msg"])."\";\n";
$s = $row["stamp"];
}
print $arr_str;
}
?>
parent.writeChat( a );
setTimeout( "location.href='chat.php?s=<?=$s?>'", 5000 );
</script>
</html>
------------------------
-------- logout.php --------
<?
include ( "config.php" );
unset( $user_name );
session_start();
if ( isset($user_name) ) {
$msg = "<b>Bruger logget af</b>";
$stamp = time();
$sql = "insert into messages ( user, msg, stamp ) values ( '$user_name', '$msg', '$stamp' )";
mysql_query( $sql );
$sql = "delete from users where user='$user_name'";
mysql_query( $sql );
session_unset();
session_destroy();
}
print "<script type=\"text/JavaScript\">window.close();</script>";
?>
------------------------
Nu håber jeg så, der er mange, der med tiden vil få glæde af koden ;o)
/mvh
</bole>