Szüksége lesz erre a fájlra.
chat.sql
Az első lépés egy adatbázis létrehozása. Nevezze "mysimplechat" -nek vagy hasonlónak. Ezután hozzon létre egy "chat" nevű táblát, amelynek 2 mezővel, azonosítóval és szöveggel kell rendelkeznie.
CREATE TABLE IF NOT EXISTS `chat` (
`Id` int(11) NOT NULL auto_increment,
`Text` text NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
server.php
Készítsen új fájlt, és nevezze el server.php. Ez teljes kód, alább részben magyarázom meg.
<?
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'your password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');
$dbname = 'chat_database';
mysql_select_db($dbname);
$message = $_POST['message'];
if($message != "")
{
$sql = "INSERT INTO `chat` VALUES('','$message')";
mysql_query($sql);
}
$sql = "SELECT `Text` FROM `chat` ORDER BY `Id` DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
echo $row['Text']."\n";
?>
Rendben, ez a szkript nagyon egyszerű.
Először az adatbázishoz kapcsolódik. Ne felejtse el beállítani a saját adatbázis-adatait (gazdagép, felhasználónév, jelszó és adatbázis neve).
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'your password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');
$dbname = 'chat_database';
mysql_select_db($dbname);
?>
Ezután $ üzenetváltozót kap POST módszerrel.
$message = $_POST['message'];
Ha a kapott üzenet nem volt üres, vegye fel az adatbázisba.
if($message != "")
{
$sql = "INSERT INTO `chat` VALUES('','$message')";
mysql_query($sql);
}
Ezután jelenítse meg az összes sort a "chat" táblából.
$sql = "SELECT `Text` FROM `chat` ORDER BY `Id` DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
echo $row['Text']."\n";
index.php
És ez az! Tehát ugorjunk a jQuery részre. Készítsen új fájlt, és nevezze el a kívánt fájlokat. Az index.php-t használtam, de lehet HTML-fájl is.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function update()
{
$.post("server.php", {}, function(data){ $("#screen").val(data);});
setTimeout('update()', 1000);
}
$(document).ready(
function()
{
update();
$("#button").click(
function()
{
$.post("server.php",
{ message: $("#message").val()},
function(data){
$("#screen").val(data);
$("#message").val("");
}
);
}
);
});
</script>
</head>
<body>
<textarea id="screen" cols="40" rows="40"> <//textarea> <br>
<input id="message" size="40">
<button id="button"> Send </button>
</body>
</html>
Ez eleinte kissé zavarónak tűnhet, de nagyon egyszerű.
First it includes jQuery script
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
Ezután meghatározunk egy új funkciót. Ez a server.php (a fent fentebb leírt PHP szkript) megnyitásához és az összes tartalom másolásához egy id = képernyőjű szövegdobozba. És amint az a fentiekből látható, a server.php tartalma az összes üzenet listáját tartalmazza.
function update()
{
$.post("server.php", {}, function(data){ $("#screen").val(data);});
setTimeout('update()', 1000);
}
Ebben a részben a. .Post módszert használjuk, amelyet itt jól leírunk. De megpróbálom magam elmagyarázni.
Make a POST request $.post
Target server.php script "server.php",
Here is the list of all variables we want to send, (in this case none) {},
Ha minden jól megy, akkor ezt a funkciót végre kell hajtani a célzott szkriptből (server.php) származó tartalmat az "data" változóban. Állítsa be az id = képernyő textarea értékét adatokra.
function(data)
{
$("#screen").val(data)
;}
Azt akarjuk, hogy a szkriptünk másodpercenként ellenőrizze a szervert az új üzenetek szempontjából. Egy rekurzív függvényt fogunk végrehajtani, minden futtatásakor felhívja magát, de 1 másodperc után, tehát másodpercenként végrehajtja.
setTimeout('update()', 1000);
So we are done with update() function.
Most megvizsgáljuk, hogy az oldal teljesen betöltődött-e, mielőtt bármit megtennénk.
$(document).ready(function()
Ezután egyszer meghívjuk az update () függvényt, és ez továbbra is önmagát fogja hívni.
update();
Most, amikor rákattintunk az id = gombbal rendelkező elemre, új üzenetet kell küldenünk a szervernek, és frissítenünk kell a "képernyőn" (egy id = képernyő szövegmezővel).
Ez a rész nagyon hasonlít a frissítés () függvényre, kivéve, ebben az esetben egy változót küldünk POST módszerrel, és az új üzenet tartalma az id = üzenet beviteli mezőben.
$("#button").click(
function()
{
$.post("server.php",
{message: $("#message").val()},
function(data){
$("#screen").val(data);
$("#message").val("");
}
);
}
);
Most csak adjon hozzá egy szövegtagot, beviteli mezőt és egy gombot a megfelelő azonosítóval!
<textarea id="screen" cols="40" rows="40"> <//textarea> <br>
<input id="message" size="40">
<button id="button"> Send </button>
Másik módszer
chat.sql
Az első lépés egy adatbázis létrehozása. Nevezze "mysimplechat" -nek vagy hasonlónak. Ezután hozzon létre egy "chat" nevű táblát, amelynek 2 mezővel, azonosítóval és szöveggel kell rendelkeznie.
CREATE TABLE IF NOT EXISTS `chat` (
`Id` int(11) NOT NULL auto_increment,
`Text` text NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
server.php
Készítsen új fájlt, és nevezze el server.php. Ez teljes kód, alább részben magyarázom meg.
<?
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'your password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');
$dbname = 'chat_database';
mysql_select_db($dbname);
$message = $_POST['message'];
if($message != "")
{
$sql = "INSERT INTO `chat` VALUES('','$message')";
mysql_query($sql);
}
$sql = "SELECT `Text` FROM `chat` ORDER BY `Id` DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
echo $row['Text']."\n";
?>
Rendben, ez a szkript nagyon egyszerű.
Először az adatbázishoz kapcsolódik. Ne felejtse el beállítani a saját adatbázis-adatait (gazdagép, felhasználónév, jelszó és adatbázis neve).
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'your password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');
$dbname = 'chat_database';
mysql_select_db($dbname);
?>
Ezután $ üzenetváltozót kap POST módszerrel.
$message = $_POST['message'];
Ha a kapott üzenet nem volt üres, vegye fel az adatbázisba.
if($message != "")
{
$sql = "INSERT INTO `chat` VALUES('','$message')";
mysql_query($sql);
}
Ezután jelenítse meg az összes sort a "chat" táblából.
$sql = "SELECT `Text` FROM `chat` ORDER BY `Id` DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
echo $row['Text']."\n";
index.php
És ez az! Tehát ugorjunk a jQuery részre. Készítsen új fájlt, és nevezze el a kívánt fájlokat. Az index.php-t használtam, de lehet HTML-fájl is.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function update()
{
$.post("server.php", {}, function(data){ $("#screen").val(data);});
setTimeout('update()', 1000);
}
$(document).ready(
function()
{
update();
$("#button").click(
function()
{
$.post("server.php",
{ message: $("#message").val()},
function(data){
$("#screen").val(data);
$("#message").val("");
}
);
}
);
});
</script>
</head>
<body>
<textarea id="screen" cols="40" rows="40"> <//textarea> <br>
<input id="message" size="40">
<button id="button"> Send </button>
</body>
</html>
Ez eleinte kissé zavarónak tűnhet, de nagyon egyszerű.
First it includes jQuery script
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
Ezután meghatározunk egy új funkciót. Ez a server.php (a fent fentebb leírt PHP szkript) megnyitásához és az összes tartalom másolásához egy id = képernyőjű szövegdobozba. És amint az a fentiekből látható, a server.php tartalma az összes üzenet listáját tartalmazza.
function update()
{
$.post("server.php", {}, function(data){ $("#screen").val(data);});
setTimeout('update()', 1000);
}
Ebben a részben a. .Post módszert használjuk, amelyet itt jól leírunk. De megpróbálom magam elmagyarázni.
Make a POST request $.post
Target server.php script "server.php",
Here is the list of all variables we want to send, (in this case none) {},
Ha minden jól megy, akkor ezt a funkciót végre kell hajtani a célzott szkriptből (server.php) származó tartalmat az "data" változóban. Állítsa be az id = képernyő textarea értékét adatokra.
function(data)
{
$("#screen").val(data)
;}
Azt akarjuk, hogy a szkriptünk másodpercenként ellenőrizze a szervert az új üzenetek szempontjából. Egy rekurzív függvényt fogunk végrehajtani, minden futtatásakor felhívja magát, de 1 másodperc után, tehát másodpercenként végrehajtja.
setTimeout('update()', 1000);
So we are done with update() function.
Most megvizsgáljuk, hogy az oldal teljesen betöltődött-e, mielőtt bármit megtennénk.
$(document).ready(function()
Ezután egyszer meghívjuk az update () függvényt, és ez továbbra is önmagát fogja hívni.
update();
Most, amikor rákattintunk az id = gombbal rendelkező elemre, új üzenetet kell küldenünk a szervernek, és frissítenünk kell a "képernyőn" (egy id = képernyő szövegmezővel).
Ez a rész nagyon hasonlít a frissítés () függvényre, kivéve, ebben az esetben egy változót küldünk POST módszerrel, és az új üzenet tartalma az id = üzenet beviteli mezőben.
$("#button").click(
function()
{
$.post("server.php",
{message: $("#message").val()},
function(data){
$("#screen").val(data);
$("#message").val("");
}
);
}
);
Most csak adjon hozzá egy szövegtagot, beviteli mezőt és egy gombot a megfelelő azonosítóval!
<textarea id="screen" cols="40" rows="40"> <//textarea> <br>
<input id="message" size="40">
<button id="button"> Send </button>
Másik módszer
<div class="container">
<img src="/w3images/bandmember.jpg"
alt="Avatar">
<p>Hello. How are you today?</p>
<span
class="time-right">11:00</span>
</div>
<div class="container darker">
<img src="/w3images/avatar_g2.jpg"
alt="Avatar" class="right">
<p>Hey! I'm fine. Thanks for asking!</p>
<span class="time-left">11:01</span>
</div>
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar">
<p>Sweet! So, what
do you wanna do today?</p>
<span class="time-right">11:02</span>
</div>
<div class="container darker">
<img src="/w3images/avatar_g2.jpg"
alt="Avatar" class="right">
<p>Nah, I dunno. Play soccer.. or learn
more coding perhaps?</p>
<span class="time-left">11:05</span>
</div>
Step 2) Add CSS:
Example
/* Chat containers */
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;}
/* Darker
chat container */
.darker {
border-color: #ccc;
background-color: #ddd;}
/* Clear floats */
.container::after {
content: "";
clear: both;
display: table;}
/* Style images
*/
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;}
/*
Style the right image */
.container img.right
{
float: right;
margin-left: 20px;
margin-right:0;}
/* Style time text */
.time-right {
float: right;
color:
#aaa;}
/* Style time text */
.time-left {
float: left;
color: #999;}
vagy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
</style>
</head>
<body>
<h2>Chat Messages</h2>
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Hey! I'm fine. Thanks for asking!</p>
<span class="time-left">11:01</span>
</div>
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Sweet! So, what do you wanna do today?</p>
<span class="time-right">11:02</span>
</div>
<div class="container darker">
<img src="/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span class="time-left">11:05</span>
</div>
</body>
https://www.w3schools.com/howto/howto_js_popup_chat.asp
Nincsenek megjegyzések:
Megjegyzés küldése