Ajax Chat skänkes

Kekke · 2011-02-23, 20:29

Hade lite tråkigt ikväll, och när jag har tråkigt försöker jag programmera något roligt.
Idag blev det att lära mig lite mer jQuery + Ajax.

Här finns en väldigt, väldigt simpel chat gjord i php, jQuery & ajax:

http://78.72.111.66/ajaxchat.php

Filerna finns här:
ajaxchat.php

PHP-kod:


			
<?php

    session_start();

    

    include("libs/libsql.php");

?>



<!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">



<head>



<title>

    Ajax jQuery chat example!

</title>



<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />



<link rel="stylesheet" type="text/css" href="styles/style.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jQueryAjaxChat.js"></script>



</head>



<body>

    <div id="content">

        <div id="messages">

            Loading messages..

        </div>

        <div id="message-div">

            <form method="post" action="">

                Username: <br />

                <input type="text" id="username" name="username"></input><br />

                Message: <br/>

                <input type="text" id="message" name="message"></input>

                <input type="submit" id="message-send" value="Send"></input>

            </form>

        </div>

        <div id="errsucc">

            

        </div>

    </div>

</body>



</html>

styles.css

PHP-kod:


			
body {

    background: #181818;

    font: 11px/165% 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;

}



#content {

}



#messages {

    color: white;

    background: #763;

    margin-left: auto;

    margin-right: auto;

    width: 600px;

    padding: 5px;

}



#message-div {

    color: white;

    background: #777;

    margin-left: auto;

    margin-right: auto;

    width: 600px;

    padding: 5px;

}



#errsucc {

    color: #01EE20;

    background: #777;

    margin-left: auto;

    margin-right: auto;

    width: 600px;

    padding: 5px;

}



#errsucc h2{

    color: #EE4225;

}



#message-div input#username {

    margin-left: 0px;

}



#message-div input#message {

    width: 500px;

}



#message-div input[type=submit] {

    width: 90px;

}



#message-send {

cursor:pointer;

border:outset 2px #ccc;

background:#aaa;

color:#444;

font-weight:bold;

}

getMessages.php

PHP-kod:


			
<?php

    require_once("libs/libsql.php");

    $result = mysql_query("SELECT * FROM messages ORDER BY added DESC LIMIT 0, 15");

    

    $retHtml = "";

    

    while($row = mysql_fetch_array($result)) {

        $retHtml .= strip_tags($row['username']) . ": " . strip_tags($row['message']) . "<br />";

    }



    echo $retHtml;

?>

libsql.php

PHP-kod:


			
<?php



$DEBUG = false;



$vg_Username = "root";

$vg_Password = "dittLOSEN";

$vg_Database = "databas";

$vg_DatabaseIP = "localhost";





//Anslut till databasen

if($DEBUG)

{

    $vg_Handle = mysql_connect($vg_DatabaseIP, $vg_Username, $vg_Password) 

    or die("Could not connect to " . $vg_DatabaseIP);

}

else

{

    $vg_Handle = mysql_connect($vg_DatabaseIP, $vg_Username, $vg_Password);

}



if($DEBUG)

    echo "Connected to " . $vg_DatabaseIP . "<br>";



//Välj rätt Databas

if($DEBUG)

{

    mysql_select_db($vg_Database, $vg_Handle) or die (" Database not found.");

}

else

{

    mysql_select_db($vg_Database, $vg_Handle) or die();

}



if($DEBUG)

    echo "Database " . $vg_Database . " selected.<br>";



    

?>

jQueryAjaxChat.js

PHP-kod:


			
function fetchMessages()

{

    $.ajax({

        method: "get",

        url: "getMessages.php",

        data: "",

        success: function(result) { $("#messages").html(result); }

    });

        

    setTimeout('fetchMessages()', 1000);

}



$(document).ready(function(){

    fetchMessages();

    

    $("#message-send").click(

        function()

        {

            var message = $("#message").val();

            var username = $("#username").val();

            

            if(username == "") {

                username = "anonymous";

            }

            

            if(message == "") {

                $("#errsucc").html("<h2>Please enter a message.</h2>");

                return false;

            }

            

            $.ajax({

                method: "get",

                url: "sendMessages.php",

                data: "username=" +    username + "&message=" + message,

                success: function(result) { $("#errsucc").html(result); }

            });

            

            $("#message").val("");

            

            return false;

        }

    );

});

sendMessages.php

PHP-kod:


			
<?php

    require_once("libs/libsql.php");



    $message = mysql_real_escape_string($_GET['message']);

    $username = mysql_real_escape_string($_GET['username']);

    $result = mysql_query("INSERT INTO messages (message, username, added) VALUES (

                            '$message', '$username', NOW())");

                

    if($result > 0)    

        echo "Message sent!";

?>

Hela paketet finns att ladda ner här:
http://data.fuskbugg.se/skalman02/ajaxchat.zip

Är det någon som har tips eller ser något som är osäkert eller dylikt, dålig programmeringsstruktur?
obs libsql.php är väldigt gammal..

MVH Kekke

grizz · 2011-02-23, 20:48

Tackar så mykcet!

najk · 2011-02-23, 20:55

Nice Kekke, tackar så mycket!

Kekke · 2011-02-23, 22:01

Lugnt, hoppas någon får nytta för det :-)

youheardit · 2011-02-24, 11:47

Ser bra ut men hittade en sak som jag skulle vilja ändra på för allas skull.
Filen: getMessages.php

PHP-kod:


			
<?php 
    require_once("libs/libsql.php"); 
    $result = mysql_query("SELECT * FROM messages ORDER BY added DESC LIMIT 0, 15"); 
     
    $retHtml = ""; 
     
    while($row = mysql_fetch_array($result)) { 
        $retHtml .= strip_tags($row['username']) . ": " . htmlspecialchars($row['message'],ENT_QUOTES) . "<br />"; 
    } 

    echo $retHtml; 
?>

Ändringen är strip_tags($row['message']) till htmlspecialchars($row['message'],ENT_QUOTES)

Detta då striptags tar bort taggarna, men om man nu vill skriva in hmtl/xml kod i chatten kommer de raderas. Med htmlspecialchars kan man skriva hmtl/xml-taggar utan att de förändrar på sidan och går in i koden.
Läs mer: http://php.net/manual/en/function.htmlspecialchars.php

BarateaU · 2011-02-24, 12:35

Tidsstämpel kanske vore nått så man vet om den senaste posten var för en vecka sedan eller 1 sek sedan.

Och så kan du ju göra om det till ett WP plugin så kommer de laddas ner flitigt säkert, och passa på köra in länk till din sida eller så

Kekke · 2011-02-24, 12:42

Citat:

Ursprungligen postat av youheardit

Ser bra ut men hittade en sak som jag skulle vilja ändra på för allas skull.
Filen: getMessages.php

PHP-kod:


			
<?php 

    require_once("libs/libsql.php"); 

    $result = mysql_query("SELECT * FROM messages ORDER BY added DESC LIMIT 0, 15"); 

     

    $retHtml = ""; 

     

    while($row = mysql_fetch_array($result)) { 

        $retHtml .= strip_tags($row['username']) . ": " . htmlspecialchars($row['message'],ENT_QUOTES) . "<br />"; 

    } 



    echo $retHtml; 

?>

Ändringen är strip_tags($row['message']) till htmlspecialchars($row['message'],ENT_QUOTES)

Detta då striptags tar bort taggarna, men om man nu vill skriva in hmtl/xml kod i chatten kommer de raderas. Med htmlspecialchars kan man skriva hmtl/xml-taggar utan att de förändrar på sidan och går in i koden.
Läs mer: http://php.net/manual/en/function.htmlspecialchars.php

Det stämmer, tackar, har även ändrat lite:

PHP-kod:


			
<?php

    require_once("libs/libsql.php");

    $result = mysql_query("

                        DELETE FROM messages

                        WHERE username=' '

                        ");

    $result = mysql_query("SELECT * FROM messages ORDER BY added DESC LIMIT 0, 25");

    

    $retHtml = "";

    

    while($row = mysql_fetch_array($result)) {

        if($row['username'] == "xxzzxx") {

            $username = "Admin";

        }

        else {

            $haystack = strtolower($row['username']);

            

            $pos = strpos($haystack, "admin");

            

            if($pos === false) {

                $username = $row['username'];

            }

            else {

                $username = "Noob";

            }

        }

        

        $retHtml .= strip_tags($username) . ": " . htmlspecialchars($row['message'], ENT_QUOTES) . "<br />";

    }



    echo $retHtml;

?>

Jag testade med att lägga in datumet men får det inte att passa in riktigt. :-)

youheardit · 2011-02-24, 17:14

En annan sak är att du slänger in trim($username) innan den åker in i databasen. Detta då du kan slippa att använda:

PHP-kod:


			
$result = mysql_query(" 
                        DELETE FROM messages 
                        WHERE username=' ' 
                        ");

trim() tar bort blanksteg före och efter en String.

Så alltså ska filen (sendMessage.php) se ut såhär:

PHP-kod:


			
<?php 
    require_once("libs/libsql.php"); 

    $message = mysql_real_escape_string($_GET['message']); 
    $username = mysql_real_escape_string(trim($_GET['username'])); //Notera trim()

    //Ändrar namn till anonym ifall användarnamnet är tomt efter trim(), dvs så kan det inte ske att en användare sätter ett eller flera blanksteg som användarnamn.
    if($username == ""){
        $username = "Anonymous";
    }

    $result = mysql_query("INSERT INTO messages (message, username, added) VALUES ( 
                            '$message', '$username', NOW())"); 
                 
    if($result > 0)     
        echo "Message sent!"; 
?>

Här är mer info om trim()
http://php.net/manual/en/function.trim.php

Kekke · 2011-02-24, 17:21

Citat:

Ursprungligen postat av youheardit

En annan sak är att du slänger in trim($username) innan den åker in i databasen. Detta då du kan slippa att använda:

PHP-kod:


			
$result = mysql_query(" 

                        DELETE FROM messages 

                        WHERE username=' ' 

                        ");

trim() tar bort blanksteg före och efter en String.

Så alltså ska filen (sendMessage.php) se ut såhär:

PHP-kod:


			
<?php 

    require_once("libs/libsql.php"); 



    $message = mysql_real_escape_string($_GET['message']); 

    $username = mysql_real_escape_string(trim($_GET['username'])); //Notera trim()



    //Ändrar namn till anonym ifall användarnamnet är tomt efter trim(), dvs så kan det inte ske att en användare sätter ett eller flera blanksteg som användarnamn.

    if($username == ""){

        $username = "Anonymous";

    }



    $result = mysql_query("INSERT INTO messages (message, username, added) VALUES ( 

                            '$message', '$username', NOW())"); 

                 

    if($result > 0)     

        echo "Message sent!"; 

?>

Jag hade det endast för att någon med användarnamn " " spammade " " så att man inte kunde se något.

eliasson · 2011-02-24, 18:59

En rekommendation är att använda JSON.
Vidare bör du endast hämta nya meddelanden, om du skall använda PULL-teknik, för att slippa onödig trafik när det är samma meddelanden som hämtas.
Det gör du enkelt, speciellt om du använder JSON, genom att hämta ny data baserat på exempel timestamp alt. senast ID.

Nästa steg är att använda dig av PUSH-teknik där du exempel kan använda dig av APE-server, BeaconPush eller PubNub.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Ajax Chat skänkes