4
Tags:
asp
Skrevet af
Bruger #8773
@ 21.06.2007
Hej udviklere.
Jeg har efter hånden set en stor flok der har spurgt efter hvordan man laver sin egen chat, og derfor tænkte jeg at jeg ville skrive en artikel om det.
Jeg har aldrig været særlig god til at forklare noget til andre mennesker, men jeg vil nu gøre mit bedste for at i kan forstå det.
Jeg vil prøve så godt som muligt at beskrive de enkelse liniers funktion igennem hele scriptet, så alle kann følge med.
Funktionerne
Scriptet kommer til at indeholde følgene funktioner:
-Skrive-Se andres besked uden at opdatereDet er ikke meget, men det skal også kun være en meget simpel chat.
Færdigheder
For at kunne følge med i denne artikel, skal du have arbejdet med ASP, HTML og AJAX/Javascript før. I ASP skal du vide hvordan man arbejder med en MySql database, som jeg vil bruge i dette eksempel.
Databasen
I databsen skal du have oprettet en tabel med 3 felter.
Tabellen skal du kalde "chat", og den skal indeholde felterne:
-
id (int, auto_increment & unik)
-
ip (text)
-
besked (text)
Du kan også vælge at indsætte dette under SQL
CREATE TABLE `chat` (
`id` INT NOT NULL AUTO_INCREMENT ,
`ip` TEXT NOT NULL ,
`besked` TEXT NOT NULL ,
UNIQUE (
`id`
)
) ENGINE = MYISAM ;
Filerne
Vi skal bruge 6 filer:
db.aspdb_close.aspdefault.aspvindue.asphent.aspskriv.aspJeg vil nu gennemgå filerne en ad gangen, og så vidt muligt kommentere det hele under vejs.
db.asp
I
db.asp skal forbindelsen til databasen oprettes.
Den ser således ud:
<%
Set MM_db_STRING = Server.CreateObject("ADODB.Connection")' her sætter vi MM_db_STRING til en forbindelse
MM_db_STRING.Open ("Driver={MySQL};SERVER=DIN_SERVER;DATABASE=DIN_DATABASE;UID=DIT_BRUGERNAVN;PASSWORD=DIN_ADGANGSKODE") 'her angiver vi alle vores database information, og åbner forbindelsen samtidig med
%>
db_close.asp
I
db_close.asp skal forbindelsen til databasen lukkes igen.
Den ser således ud:
<%
MM_DB_STRING.close 'først lukker vi forbindelsen
set MM_DB_STRING = Nothing 'og derefter sætter vi MM_db_STRIN til nothing, altså gør den "ubrugelig" igen
%>
default.asp
I
default.asp samler vi alle vores filer, så det hele passer sammen. Dette kan du vælge at gøre som du vil, i iFrames, eller Frames, eller hvordan du nu vil gøre det. Jeg har valgt at bruge frames:
<html>
<head>
<title>Simpel Chat</title>
</head>
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="vindue.asp" name="mainFrame" id="mainFrame" title="mainFrame" noresize="noresize" scrolling="no" />
<frame src="skriv.asp" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Jeg har to frames, et stort i toppen, og et lille neden under. Det store er vindue.asp hvor chatmeddelelserne kommer til at være, og den lille er skriv.asp hvor man kommer til at kunne skrive beskeder.
vindue.asp
I
vindue.asp kommer alt kommunikation med filen hent.asp til at foregå. Dette sker via AJAX. Koden ser således ud:
<html>
<head>
<title>vindue.asp</title>
<script type="text/javascript">
<!--
var xmlHttp
function opdater()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Din browser understøtter ikke denne chat.");
return;
}
//hent tekst fra filen hent.asp
var url="hent.asp";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
//skriv tekst fra hent.asp til elementet "meddelelse" og sæt et timeout der udfører denne funktion igen om 1 sekund
document.getElementById("meddelelse").innerHTML=xmlHttp.responseText;
setTimeout ("opdater();", 1000);
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//sæt et timeout der sætter hele processen igang
setTimeout ("opdater();", 1000);
-->
</script>
</head>
<body>
<!--Her sætter vi et div med id'et meddelelse, så det er her at teksten fra hent.asp bliver udskrevet-->
<div id="meddelelse"></div>
</body>
</html>
Det er meget kort fortalt en AJAX funktion der går ind og henter information fra filen hent.asp, som vi kommer til nu.
hent.asp
I filen
hent.asp henter vi informationen fra databasen. Den ser således ud:
<!--Husk at inkluder filen "db.asp" så vi kan få noget forbindelse til databasen-->
<!--#Include File="db.asp"-->
<%
Response.Expires = -1 'vi sætter denne for at man ikke bare ser det samme data igen og igen, altså man henter nyt data fra denne fil hver gang
Set chat = Server.CreateObject ("ADODB.Recordset")
sql = "SELECT * FROM chat ORDER BY id DESC LIMIT 30" ' vi ordner lige så det er i nyeste øverst hele tiden, og sørger for at der ikke kan blive udskrevet mere end de sidste 30 indlæg, da flere vil sløve systemet alt for meget.
chat.Open sql, MM_db_STRING, 1, 2
while NOT chat.EOF
ip = chat("ip")
ip = Split(ip,".") 'her deler vi ip-adressen op ved hver enkelt punktum
'her tjekker vi om ip-adressen fra databasen er lige med clientens IP, og hvis den er, udskriver vi "Mig >>" Ellers udskriver vi IP adressen med "xx" i slutningen fx "11.111.11.xx >>"
If chat("ip") = Request.ServerVariables("REMOTE_ADDR") Then
id = "<b style=color:#CC0000;>Mig >></b>"
Else
id = ("<b style=color:#009900;>" & ip(0) & "." & ip(1) & "." & ip(2) & ".xx >></b>")
End If
'her tilføjer vi linieskift, og skifter Æ, Ø, Å, æ, ø og å ud med noget der kan læses af AJAX scriptet
besked = chat("besked")
besked = Replace(besked, vbcrlf,"<br />")
besked = Replace(besked, "æ","æ")
besked = Replace(besked, "ø","ø")
besked = Replace(besked, "å","å")
besked = Replace(besked, "Æ","Æ")
besked = Replace(besked, "Ø","Ø")
besked = Replace(besked, "Å","Å")
'her udskriver vi så enten mig eller ip-adressen og beskeden.
Response.Write(id & besked & "<br />")
'her går vi videre til næste række i databasen
chat.MoveNext
' og afslutter "While" løkken
Wend
'og til sidst lukker vi lige forbindelsen til databasen
chat.close
set chat = Nothing
%>
<!--Husk at inkluder filen "db_close.asp" så vi kan få lukket forbindelse til databasen igen-->
<!--#Include File="db_close.asp"-->
Jeg vil ikke kommentere denne kode her nede, da der er kommentare hele vejen igennem koden..
skriv.asp
Så har vi til sidst
skriv.asp tilbage.
Den er delt op i 2 dele. Første del er hvis der er trykket send, altså den del hvor vi gemmer det man har skrevet, og anden del, hvor man kan skrive:
<!--Husk at inkluder filen "db.asp" så vi kan få noget forbindelse til databasen-->
<!--#Include File="db.asp"-->
<html>
<head>
<title>skriv.asp</title>
</head>
<body>
<%
'hvis der er trykket på submit
If Request.Form("Submit") = "Send" Then
Set skriv = Server.CreateObject ("ADODB.Recordset")
sql = "chat" ' Vi åbner lige til databsen, tabellen "chat".
skriv.Open sql, MM_db_STRING, 1, 2
skriv.AddNew 'tilføj en ny række
skriv("ip") = Request.ServerVariables("REMOTE_ADDR") 'her gemmer vi lige klientens IP
skriv("besked") = Request.Form("besked") 'her gemmer vi beskeden der blev skrevet før
skriv.Update 'her opdaterer vi så indholdet
skriv.close
set skriv = Nothing
Response.Redirect("skriv.asp") 'og vi sender klienten tilbage til det almindelig tekstfelt
'hvis der ikke er trykket på submit skal vi ned til resten af koden
Else
%>
<!--Her laver vi lige formen til at skrive i-->
<form action="skriv.asp" method="post">
<textarea name="besked" cols="50" rows="3"></textarea> <input type="submit" name="Submit" value="Send" />
</form>
<% End If %>
</body>
</html>
<!--Husk at inkluder filen "db_close.asp" så vi kan få lukket forbindelse til databasen igen-->
<!--#Include File="db_close.asp"-->
Afslutning
Det kan godt være at alt dette har virket lidt rodet, men det virker i hvert fald.
Hvis du er intereseret i af downloade hele scriptet, så du slipper for at side og kopiere det hele, kan du hente scriptet
HERJeg håber det var til at forstå.
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (10)
Relevant emne. Kunne dog godt have tænkt mig at du brugte XML i stedet for HTML. Den kunne sagtens have været mindre ressource-krævene, men 4 herfra.
Det er sikkert rigtigt nok, men jeg er ikke så meget inde i XML, derfor valgte jeg at lave det som jeg gjorde
Der var også andre ting der kunne have været anderledes, for eksempel den måde det bliver hentet, og der er jo massere af muligheder for at slette beskeder der er mere end et antal dage gamle, hvis man ikke bruger den hver dag, men det er jo sådan nogle ting man selv kan side og lege med og bygge på
En 1'er herfra - denne løsning kommer aldrig til at skalere til et stort antal samtidig brugere, da den simpelthen vil tage livet af webserveren.
Det er ikke så meget det at bruge den, det er jo også det at kunne bruge AJAX i denne sammenhæng
Linket til download er blevet ændret. Det er nu
HER
En 1'er herfra - denne løsning kommer aldrig til at skalere til et stort antal samtidig brugere, da den simpelthen vil tage livet af webserveren.
Det der er negativt ja den er ikke super men den giver en et indblik i hvordan AJAX kan bruges
En 4'er her fra
Det der er negativt ja den er ikke super men den giver en et indblik i hvordan AJAX kan bruges
En 4'er her fra [/qoute]
Det var også meningen
Hvorfor samler du ikke alle koderne i en så folk kan sætte det direkte ind på deres side??
Hvorfor samler du ikke alle koderne i en så folk kan sætte det direkte ind på deres side??
Nu har jeg jo lavet et download link i stedet for, er det ikke lige så godt?
LIGE I ØJET!!!
Selve chatten og sådan har jeg ikke kigget så meget på men der var hele AJAX koden jeg skulle bruge, for at få min egen lille "now playing" gadget til at virke.
Indtil videre har den kørt på META REFRESH
Kig selv:
http://www.hsp.dk/nows.htm
Du skal være
logget ind for at skrive en kommentar.