神佑的部落格

神佑娛樂休閒館

MySql, PHP

PHP+MySql+AJAX圖形驗證 實作簡易聊天室

繼之前寫過的PHP+AJAX實作簡易圖形驗證碼,這次我加上簡易的聊天室

Demo:PHP+MySql+AJAX圖形驗證 實作簡易聊天室

PHP分成四個檔案

  • chat.php (主要程式)
  • config.php (MySql連線設定檔)
  • ajax.php (圖形驗證用)
  • imgcode.php (生成驗證圖)

首先,建立資料表 : messqge

注意編碼(utf8_unicode_ci)

  • id 為索引(唯一值)
  • messqge 為聊天訊息內容
  • datetime 為記錄時間
  • ip 為記錄ip位址

主程式 chat.php 介紹:

1.設定時區&開啟SESSION驗證

一般PHP內的時間會是系統時間,為了設定為正確的時間,需要設定時區,可以用以下程式碼快速完成設定
開啟session用於圖形驗證
參考 : php 時區調整教學
參考 : PHP Session 使用範例說明

<?php
date_default_timezone_set('Asia/Shanghai');//設定時區
if(!isset($_SESSION)){session_start();}//開啟 SESSION
?>

2.載入MySql連線方式

參考 : PHP7&MySql基本連線簡單介紹

<?php
require_once('config.php');/*載入設定檔*/
/*db_connect 資料庫連接 */
function db_connect() {
	global $connect, $db_hostname, $db_database, $db_username, $db_password;	//用 global 載入 config.php 的資料
	/*連線資料庫伺服器*/
	$connect = mysqli_connect($db_hostname, $db_username, $db_password, $db_database);
	if (empty($connect)){
		print mysqli_error($connect);	//輸出錯誤
		die ('無法連結資料庫');
		exit;
	}
	mysqli_query($connect, "SET NAMES 'utf8'");	//設定連線的文字集與校對為 UTF8 編碼
}
db_connect();	//建立連線
?>

3.取得時間&取得IP的function

我們有在資料表格新增時間&ip欄位,可以透過PHP內建含是取得,為了方便讀取我也方法簡化寫成function,因為我網站是使用CloudFlare的DNS服務,需要用比較不易樣的方式取IP,不過也有一般PHP取IP的函式
CloudFlare取IP參考 : CloudFlare and logging visitor IP addresses via in PHP
PHP取IP參考 : [PHP] $_SERVER的參數和用法說明 (PHP抓取目前網址)
PHP的date()參考 : date – Manual – PHP

<?php
/*GetIP 取得使用者IP*/
function GetIP (){
	if(isset($_SERVER['HTTP_CF_CONNECTING_IP'])){ //CloudFlare
		$userip = '('.$_SERVER["HTTP_CF_IPCOUNTRY"].')'.$_SERVER['HTTP_CF_CONNECTING_IP'];
	}elseif(isset($_SERVER['REMOTE_ADDR'])){
		$userip = $_SERVER['REMOTE_ADDR'];
	}else{
		$userip = "error";
	}
	return $userip;
}
/*GetTime 取得目前時間*/
function GetTime (){
	$GetTime = date('Y-m-d H:i:s');
	return $GetTime;
}
?>

4.SendMessage送出聊天訊息

先用global取得Mysql連線,取得訊息、時間&IP存入資料庫,$msg在做轉碼的動作,不然有些code會無法辨識導致錯誤

<?php
/*SendMessage 送出聊天訊息*/
function SendMessage ($msg){
	global $connect; //MySql連線
	$nowtime = GetTime(); //取得目前時間
	$userip = GetIP(); //取得使用者IP
	$msg = mysqli_real_escape_string($connect, $msg); //轉碼成可存入sql
	$insertSQL = "INSERT INTO message (message, datetime, ip) VALUES ('$msg', '$nowtime','$userip')";
	$Result = mysqli_query($connect, $insertSQL) or die(mysqli_error($connect));
}
?>

5.監聽POST動作

使用isset來判斷是否有送出值,如果有就執行SendMessage函式,並將訊息內容帶進去

<?php
//======送出POST動作======
if (isset($_POST['chat'])) {
	$msg = $_POST['chat'];
	SendMessage($msg);
}
?>

6.取得聊天內容(讀取資料表)

參考 : PHP7&MySql基本連線簡單介紹

<?php
//======讀取聊天內容======
$message_query = "SELECT * FROM message ORDER BY CAST(`id` AS UNSIGNED) DESC"; 
$message = mysqli_query($connect, $message_query) or die(mysqli_error($connect));
$row_message = mysqli_fetch_assoc($message);
$total_message = mysqli_num_rows($message);
?>

7.HTML內容

使用<pre>標籤&htmlentities()函式進行轉碼,訊息內容可能包含Sql語法或是PHP程式碼亦或是HTML代碼,所以這裡用這兩個方式進行轉碼

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Expires" content="0" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Language" content="zh-tw" />
	<title>PHP+MySql+AJAX圖形驗證 實作簡易聊天室</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
	<form action="" id="reg_form" method="POST">
		<p>聊天內容:<span class="chat_hint"></span><br>
		<textarea id="reg_chat" class="reg_chat" name="chat"  style="width:75%;height:100px;" required></textarea></p>
		<p>驗證碼:( 點擊圖片可以更換驗證碼)<span class="vcode_hint"></span><br>
		<img id="imgcode" src="imgcode.php" onclick="refresh_code()" /><br>
		 <input type="text" name="vcode" value="" placeholder="輸入上方圖形驗證碼" class="form-control form-control-user reg_vcode" id="reg_vcode" required>
		 <button type="button" class="red_button form-btn">送出</button></p>
	</form>
	<hr>
	<h3>聊天室:</h3>
	<?php
	if($total_message!=0){
		
		do{
			echo '<h4>#'.$row_message['id'].' '.$row_message['datetime'].' From '.$row_message['ip'].'</h4>';
			echo '<div style="width:100%;overflow:auto"><pre >'.htmlentities($row_message['message']).'</pre></div>';
			echo '<hr>';
		}while($row_message = mysqli_fetch_assoc($message));
		
	}
	?>
</body>
</html>

8.AJAX圖形驗證JS程式

參考 : PHP+AJAX實作簡易圖形驗證碼

<script type="text/javascript">
//javascript
function refresh_code(){ 
    document.getElementById("imgcode").src="imgcode.php"; 
} 
var vcode_Boolean = false;
var chat_Boolean = false;
//偵測輸入
$('.reg_vcode').blur(function(){
  if ((/^[a-zA-Z0-9_-]{4,4}$/).test($(".reg_vcode").val())){//判定輸入值
    var acode=document.getElementById("reg_vcode").value;
    $.ajax({
	  type:"POST", 
	  url:"ajax.php", 
	  data:"data="+acode+"&action=chkvcode", 
	  cache:false,
	  success:function(data){ 
	  //回傳資料
	    if(data == 'OK'){
		  $('.vcode_hint').html(" ✔ ").css("color","green");
		  $('.reg_vcode').css("border","1px solid green");
		  vcode_Boolean = true;
		}else{
		  $('.vcode_hint').html(" × 驗證錯誤").css("color","red");
		  $('.reg_vcode').css("border","1px solid red");
		  vcode_Boolean = false;
		}
	  }
      }); 
  }else {
    $('.vcode_hint').html(" × 驗證錯誤").css("color","red");
	$('.reg_vcode').css("border","1px solid red");
    vcode_Boolean = false;
  }
});
$('.reg_chat').blur(function(){
	if($(".reg_chat").val() != ''){
	  $('.chat_hint').html(" ✔ ").css("color","green");
	  $('.reg_chat').css("border","1px solid green");
	  chat_Boolean = true;
	}else{
	  $('.chat_hint').html(" × 不能空白").css("color","red");
	  $('.reg_chat').css("border","1px solid red");
	  chat_Boolean = false;
	}
});
// click
$('.red_button').click(function(){
  if(vcode_Boolean && chat_Boolean == true){
    document.getElementById("reg_form").submit();
  }else {
    alert("請確認資料輸入正確");
  }
});
</script>

檔案下載

  • ajax.php (圖形驗證用)
  • chat.php (主要程式)
  • config.php (MySql連線設定檔)
  • imgcode.php (生成驗證圖)
  • message.sql (MySql資料表檔案)

留言板

Powered by syu65406.