การสนทนาเป็นหนึ่งในคุณสมบัติการใช้งานมากที่สุดในเว็บไซต์ การสนทนาเป็นกลุ่มที่ทำให้ผู้ใช้สามารถแบ่งปันความรู้สึกและข่าวอื่น ๆ ของพวกเขาได้อย่างง่ายดายเพื่อเพื่อนของพวกเขาได้อย่างง่ายดาย AJAX ทำให้การสนทนานี้สวยงามมากขึ้นสง่างามที่เรียบง่ายและสะดวกสบาย การสนทนากลุ่มอาจจะเสี่ยงต่อการฉีด SQLและโจมตี XSS . แต่ในการโพสต์ที่เรากำลังจะทำสนทนากลุ่มนี้ไม่ได้มีช่องโหว่เหล่านี้ซึ่งจะทำให้มันน่ากลัวมากขึ้น คุณสามารถดูตัวอย่างหรือคุณสามารถดาวน์โหลดไฟล์ได้โดยตรง
tables.sql
รหัส SQL ที่สร้างตารางที่สองที่จำเป็นสำหรับการแชทเป็นกลุ่มที่มีอยู่ใน tables.sqlไฟล์:
- ตั้ง MySQL โซนเวลาที่จะ UTC
sql_mode SET = "NO_AUTO_VALUE_ON_ZERO";
SET TIME_ZONE GLOBAL = "+00:00";
- โครงสร้างตารางสำหรับตาราง `chatters`
CREATE TABLE IF NOT EXISTS `chatters` (
`ชื่อ` ข้อความไม่เป็นโมฆะ
`เห็น` varchar (20) ไม่เป็นโมฆะ
) เครื่องยนต์ = MyISAM เริ่มต้น CHARSET = latin1;
- โครงสร้างตารางสำหรับตาราง `` ข้อความ
CREATE TABLE IF NOT EXISTS `ข้อความ` (
`ชื่อ` ข้อความไม่เป็นโมฆะ
`` msg ข้อความที่ไม่เป็นโมฆะ
`โพสต์` varchar (20) ไม่เป็นโมฆะ
) เครื่องยนต์ = MyISAM เริ่มต้น CHARSET = latin1;
เมื่อคุณดำเนินการดังกล่าวข้างต้น SQLรหัสคุณจะมีสองตารางหนึ่ง chattersและอื่น ๆ ข้อความ . ใน chattersตารางเราเพิ่มเข้าสู่ระบบในรายละเอียดของผู้ใช้ที่เป็นอีกคนหนึ่งเราจะเพิ่มข้อความที่ส่งมาจากผู้ใช้
config.php
การกำหนดค่าฐานข้อมูลจะถูกเก็บไว้ในแฟ้มนี้ คุณควรเปลี่ยนสิทธิตามฐานข้อมูลของคุณ
<?
/ / ini_set ("display_errors", "ที่");
ถ้า (! isset ($ dbh)) {
session_start ();
date_default_timezone_set ("UTC");
$ musername = "ชื่อผู้ใช้";
$ mpassword = "รหัสผ่าน";
$ ชื่อโฮสต์ = "ชื่อโฮสต์";
$ dbname = "dbname";
$ dbh = PDO ใหม่ ('mysql ที่: dbname ='.... $ dbname '; โฮสต์ =' $ ชื่อโฮสต์ "; port = 3306", $ musername $ mpassword);
/ * เปลี่ยนข้อมูลประจำตัวที่จะเชื่อมต่อไปยังฐานข้อมูล. * /
รวมถึง ("user_online.php");
}
>
เซสชั่นจะเริ่มต้นเมื่อโหลดไฟล์นี้ มีไฟล์ที่มีชื่อเป็น user_online.phpรวมอยู่ในแฟ้ม ไฟล์นี้จะลบผู้ใช้แบบออฟไลน์และการปรับปรุงการประทับเวลาของผู้ใช้ที่ล็อกอินอยู่ในขณะนี้การประทับเวลานี้จะกำหนดออนไลน์สถานะออฟไลน์ ฉันอธิบายเพิ่มเติมเกี่ยวกับมันใน user_online.phpหัวข้อในการโพสต์นี้
index.php
ตัวละครหลักของการสนทนาของเราเป็นไฟล์นี้ index.php ร่วมทุกอย่างร่วมกัน
<? รวม ("config.php"); รวมถึง ("login.php");>
<! DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js"> </ script>
<script src="chat.js"> </ script>
<link href="chat.css" rel="stylesheet"/>
<title> PHP แชทด้วย jQuery และ AJAX </ title>
</ head>
<body>
<div id="content" style="margin-top:10px;height:100%;">
<center> <h1> แชทใน PHP </ h1> </ center>
<div class="chat">
<div class="users">
<? รวม ("users.php");>
</ div>
<div class="chatbox">
<?
ถ้า (isset ($ _SESSION ['ผู้ใช้'])) {
รวมถึง ("chatbox.php");
} อื่น {
$ display_case = true;
รวมถึง ("login.php");
}
>
</ div>
</ div>
</ div>
</ body>
</ html>
เมื่อผู้ใช้ไม่ได้รับการบันทึกไว้ในไฟล์นี้จะโหลด login.phpไฟล์ที่มีกล่องเข้าสู่ระบบและคนอื่น ๆ ถ้าผู้ใช้ที่ถูกบันทึกไว้ในนั้นโดยตรงจะแสดงchatbox.phpซึ่งมี chatbox ผู้ใช้ที่กำลังออนไลน์จะแสดงการใช้ users.phpไฟล์
login.php
กล่องเข้าสู่ระบบและการตรวจสอบการเข้าสู่ระบบการกรองการตรวจสอบจะมีการเพิ่มในแฟ้มนี้ ไฟล์นี้จะรวมสองครั้งใน index.phpแฟ้มหนึ่งสำหรับการตรวจสอบและอื่น ๆ สำหรับการแสดงกล่องเข้าสู่ระบบ
<?
ถ้า (isset ($ _POST ['ชื่อ']) &&! isset ($ display_case)) {
$ name = htmlspecialchars ($ _POST ['ชื่อ']);
$ sql = $ dbh-> เตรียม ("SELECT ชื่อจาก chatters WHERE ชื่อ =?");
SQL $> รัน (array ($ ชื่อ));
ถ้า (SQL $> rowCount (!) = 0) {
$ ermsg = ".. <h2 ชื่อ class='error'> นำ <a href='index.php'> ลองชื่ออื่น </ a> </ h2>";
} อื่น {
$ sql = $ dbh-> เตรียม ("INSERT INTO chatters (ชื่อ, ที่เห็น) VALUES (NOW ())");
SQL $> รัน (array ($ ชื่อ));
$ _SESSION ['ผู้ใช้'] = $ ชื่อ;
}
} elseif (isset ($ display_case)) {
ถ้า (! isset ($ ermsg)) {
>
ชื่อ <h2> จำเป็นสำหรับการพูดคุย </ h2>
คุณจะต้องให้ชื่อสำหรับการสนทนา ชื่อนี้จะปรากฏต่อผู้ใช้อื่น ๆ . <br/> <br/>
<form action="index.php" method="POST">
<div> ชื่อของคุณ: <input name="name" placeholder="A ชื่อ Please"/> </ div>
<button> ส่งและเริ่มการพูดคุย </ ปุ่ม>
</ form>
<?
} อื่น {
echo $ ermsg;
}
}
>
หากผู้ใช้มีการส่งแบบฟอร์มการเข้าสู่ระบบแล้วไฟล์นี้จะทำดังต่อไปนี้
- ชื่อตัวกรอง (เอาหน่วยงาน HTML)
- ตรวจสอบหากมีผู้ใช้คนอื่นที่มีชื่อ
หากทุกอย่าง OK แล้วไฟล์ที่มีการเปลี่ยนแปลง ผู้ใช้ค่าของเซสชั่นที่จะส่งชื่อ index.phpและ chatbox.phpดูแลส่วนที่เหลือ
chatbox.php
ไฟล์นี้ไม่ได้มีเนื้อหามากว่า ไฟล์นี้มีการเชื่อมโยงออกจากระบบแชทที่เก็บข้อความและแชทแบบ:
<?
รวมถึง ("config.php");
ถ้า (isset ($ _SESSION ['ผู้ใช้'])) {
>
ห้องพักสำหรับ <h2> ทั้งหมด </ h2>
<a style="right: 20px;top: 20px;position: absolute;cursor: pointer;" href="logout.php"> Log Out </ a>
<div class='msgs'>
<? รวม ("msgs.php");>
</ div>
<form id="msg_form">
<input name="msg" size="30" type="text"/>
</ ปุ่ม> <button> ส่ง
</ form>
<?
}
>
ข้อความจะมีการแสดงจาก msgs.phpและรูปแบบที่จะแสดง
msgs.php
แสดงข้อความที่ส่งมาจากผู้อื่นและตัวเอง / ตัวเอง ขอทำกับไฟล์นี้ทุกๆ 5 วินาทีในการตรวจสอบข้อความใหม่ เมื่อผู้ใช้ล็อกออกจากหน้าของหน้าต่างเบราว์เซอร์อื่น msgs.phpจะทำให้โหลดหน้าเว็บปัจจุบันเพื่อให้แน่ใจว่าทุกอย่างจะไม่เป็นไร
<?
รวมถึง ("config.php");
$ sql = $ dbh-> เตรียม ("SELECT * FROM ข้อความ");
SQL $> รัน ();
ในขณะที่ ($ r = SQL $-> เรียก ()) {
echo "<div class='msg' title='{$r['posted']}'> <span class='name'> {$ r ['ชื่อ']} </ span> <ช่วงชั้น = ' msgc '> {$ r [' ผงชูรส ']} </ span> </ div> ";
}
ถ้า (! isset ($ _SESSION ['ผู้ใช้']) && strtolower ($ _SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo "<script> window.location.reload () </ script>";
}
>send.php
เมื่อผู้ใช้ส่งข้อความข้อความจะถูกส่งไป send.php . ไฟล์นี้จะจัดการกับข้อความที่กรองมันและใส่ลงในฐานข้อมูล
<?
รวมถึง ("config.php");
ถ้า (! isset ($ _SESSION ['ผู้ใช้']) && strtolower ($ _SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
ตาย ("<script> window.location.reload () </ script>");
}
ถ้า (isset ($ _SESSION ['ผู้ใช้']) && isset ($ _POST ['ผงชูรส'])) {
$ msg = htmlspecialchars ($ _POST ['ผงชูรส']);
หาก ($ msg! = "") {
$ sql = $ dbh-> เตรียม ("INSERT INTO ข้อความ (ชื่อ, ผงชูรส, โพสต์) VALUES (,, NOW ())?");
SQL $> รัน (array ($ _SESSION ['ผู้ใช้'], $ msg));
}
}
>users.php
ขณะนี้ผู้ใช้ออนไลน์ได้รับการแสดงโดยใช้ไฟล์นี้ ไฟล์นี้มีการร้องขอในทุก 5 วินาทีโดย jQuery .
<?
รวมถึง ("config.php");
echo "ผู้ใช้ <h2> </ h2>";
$ sql = $ dbh-> เตรียม ("SELECT ชื่อจาก chatters");
SQL $> รัน ();
ในขณะที่ ($ r = SQL $-> เรียก ()) {
echo "<div class='user'> {$ r ['ชื่อ']} </ div>";
}
>user_online.php
เมื่อใดก็ตามที่ config.php ไฟล์ที่เรียกว่าไฟล์นี้จะเรียกว่า ไฟล์นี้ loops ผ่านผู้ใช้ออนไลน์บนโต๊ะ chattersและตรวจสอบว่าการประทับเวลาของพวกเขาคือน้อยกว่า 25 วินาทีที่เวลาปัจจุบัน ถ้าเป็นน้อยกว่านั้นผู้ใช้ที่มีการปรับตัวลดลง (ลบ) จากตาราง นอกจากนี้ยังปรับปรุงการประทับเวลาของผู้ใช้ที่ล็อกอินอยู่ในขณะนี้ถ้ามีคนทำให้มันเป็นไปไม่ได้สำหรับสคริปต์อื่น ๆ ที่จะลบผู้ใช้ปัจจุบัน มันเป็นสิ่งที่จำเป็นที่จะมีโซนเวลาเดียวกันใน MySQL เซิร์ฟเวอร์และ PHPเซิร์ฟเวอร์ ถ้าผู้ใช้ที่ล็อกอินอยู่ในขณะนี้จะถูกลบโดยไม่ตั้งใจในกรณีของความเข้าใจผิดสคริปต์โดยอัตโนมัติจะเพิ่มผู้ใช้ไปยังตาราง chatters . สิ่งที่เป็นไฟล์สำคัญ!
<?
ถ้า (isset ($ _SESSION ['ผู้ใช้'])) {
$ sqlm = $ dbh-> เตรียม ("SELECT ชื่อจาก chatters WHERE ชื่อ =?");
$ sqlm-> รัน (array ($ _SESSION ['ผู้ใช้']));
หาก ($ sqlm> rowCount (!) = 0) {
$ sql = $ dbh-> เตรียม ("UPDATE SET chatters เห็น = NOW () WHERE ชื่อ =?");
SQL $> รัน (array ($ _SESSION ['ผู้ใช้']));
} อื่น {
$ sql = $ dbh-> เตรียม ("INSERT INTO chatters (ชื่อ, ที่เห็น) VALUES (NOW ())");
SQL $> รัน (array ($ _SESSION ['ผู้ใช้']));
}
}
/ * ตรวจสอบเขตเวลาบนเซิร์ฟเวอร์ฐานข้อมูลและเซิร์ฟเวอร์ PHP เดียวกัน * /
$ sql = $ dbh-> เตรียม ("SELECT * FROM chatters");
SQL $> รัน ();
ในขณะที่ ($ r = SQL $-> เรียก ()) {
$ CURTIME = strtotime (วันที่ ("Ymd H: i: s" strtotime ('-25 วินาที, เวลา ())));
ถ้า (strtotime ($ r ['เห็น']) <$ CURTIME) {
$ kql = $ dbh-> เตรียม ("ลบจาก chatters WHERE ชื่อ =?");
$ kql-> รัน (array ($ r ['ชื่อ']));
}
}
>logout.php
หากผู้ใช้สามารถเข้าสู่ระบบ. ควรจะมีตัวเลือกออกจากระบบ นี่คือไฟล์ที่จะทำลายเซสชั่นและการเปลี่ยนเส้นทางไปยังหน้าหลักหรือในขณะที่คุณเรียกว่า "ออกจากระบบ":
<?
session_start ();
รวมถึง ("config.php");
$ sql = $ dbh-> เตรียม ("ลบจาก chatters WHERE ชื่อ =?");
SQL $> รัน (array ($ _SESSION ['ผู้ใช้']));
session_destroy ();
ส่วนหัว ("สถานที่ตั้ง: index.php");
>ด้านลูกค้า
ถึงเวลาที่จะย้ายไปยังด้านลูกค้าที่เราจะออกแบบ chatbox ของเรากับ CSSและเพิ่ม jQueryรหัสเพื่อให้ง่าย
chat.css
chatbox ผู้ใช้ออนไลน์และการจัดแต่งทรงผมอื่น ๆ ที่อยู่ในที่นี่:
. สนทนา. ผู้ใช้. สนทนา. chatbox {
แสดง: อินไลน์บล็อก;
vertical-align: ด้านบน
ความสูง: 350px;
padding: 0px 15px;
ตำแหน่ง: ญาติ;
}
การแชทของผู้ใช้ {..
พื้นหลัง: # CCC;
สี: สีขาว
กว้าง: 98px;
ล้น-y: auto;
}
การแชท. chatbox {.
พื้นหลัง: # fff;
สี: สีดำ
ขอบซ้าย: 4px;
กว้าง: 330px;
}
chatbox. msgs {. สนทนา.
ชายแดน-top: 1px ของแข็งสีดำ
ขอบล่าง: 1px ของแข็งสีดำ
ล้น-y: auto;
ความสูง: 260px;
}
. การสนทนา. chatbox # msg_form {
padding-top: 1.5px;
}
.. ข้อผิดพลาดการแชท {color: สีแดง;}
. สนทนาความสำเร็จ {color: สีเขียว;}.
. สนทนา msgs msg, แชทผู้ใช้ผู้ใช้ {ขอบล่าง: 1px ของแข็งสีดำ; padding: 4px 0px;}.....
องค์ประกอบที่เราเข้ามาเป็นห่อใน . สนทนาภาชนะดังนั้นchat.css จะไม่เลอะรูปแบบอื่น ๆ ของเว็บไซต์ของคุณ
chat.js
jQueryรหัสเนื้อหาของไฟล์นี้ โปรดทราบว่าคุณควรเพิ่มสคริปต์ [src] ที่เชื่อมโยงกับ jQueryแหล่งห้องสมุด (code.jquery.com / jQuery-latest.js)
ทำงาน scTop () {
. $ (". msgs") เคลื่อนไหว ({scrollTop. $ (". msgs") ความสูง ()});
}
load_new_stuff function () {
localStorage ['lpid'] = $ (".. msgs msg: สุดท้าย"). attr ("ชื่อ");
$ (". msgs") โหลด ("msgs.php", function () {.
ถ้า (localStorage ['lpid'] = $ ("msgs msg.. สุดท้าย"!) attr ("ชื่อ").) {
scTop ();
}
});
$ (". ผู้ใช้") โหลด ("users.php").
}
$ (เอกสาร). พร้อม (function () {
scTop ();
$ ("# msg_form"). ใน ("ส่ง" ฟังก์ชั่น () {
t = $ (this);
.. วาล = $ (นี้) ค้นหา ("ใส่ [type = ข้อความ]") วาล ();
ถ้า (val! = "") {
t.after ("<span id='send_status'> ส่ง ..... </ span>");
$ โพสต์ ("send.php" {msg: วาล}, function () {.
load_new_stuff ();
. $ ("# send_status") ลบ ();
. t [0] ตั้งค่า ();
});
}
กลับเท็จ;
});
});
setInterval (function () {
load_new_stuff ();
}, 5000);
ผมคิดว่าเป็นไฟล์ทั้งหมด ฉันทำมันมากกับไฟล์เหล่านี้เพื่อให้การกวดวิชาที่ง่าย หวังว่าคุณจะชอบมัน เป็นแหล่งที่มาเปิดร่วมกันนี้ให้กับเพื่อนนักพัฒนาของคุณ ฉันแน่ใจว่าพวกเขาจะชอบที่จะเห็นนี้ หากคุณมีปัญหา / ข้อเสนอแนะโปรดพูดออกมาในความคิดเห็นที่ฉันชอบที่จะได้ยินจากคุณและผมจะตอบกลับถ้าไม่มีโครงการโรงเรียนใดโง่
0 ความคิดเห็น :
แสดงความคิดเห็น