ดึงข้อมูล Real time ด้วย Axios PHP & JS

by boychawin

May 22, 2021 4,202

Axios คือ open source JavaScript libary ใช้เพื่อการรับส่งข้อมูลแบบ RESTful API และแปลงข้อมูลเป็น JSON ให้อัตโนมัติ

ข้อมูลที่ใช้ในการทดสอบจะดึงเป็นวันเวลามาแสดง ซึ่งปกติเราอาจจะคุ้นเคยกับการใช้งาน ajax ใน jQuery มากกว่า แต่วันนี้เราจะมาใช้ Axios เพือดึงข้อมูลมาแบบ Real time โดยที่ไม่ต้อง Refresh หน้าจอใหม่

คำสั่ง setInterval() เพื่อเป็นตัวกำหนดเวลาในการดึงข้อมูลใหม่ มาแสดงตามเวลาที่เรากำหนด ในตัวอย่างจะกำหนดไว้ที่ 1 วินาที

เครื่องมือ

- Axios open source JavaScript libary

ขั้นตอนการติดตั้ง

1. สร้าง 2 ไฟล์ 1. index.php 2. data.php ถ้าใช้ XAMPP เก็บไว้ในโฟลเดอร์ htdocs
2. Copy โค้ดอยู่ด้านล่างนี้
1. หน้า index.php Copy ถึง แท็กปิด html
2. หน้า data.php Copy ตั้งแต่ แท็กเปิด php
3. ทดสอบการใช้งาน นำไปปรับใช้งานกันนะครับ

GitHub

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ดึงข้อมูล Real time ด้วย Axios PHP & JS | boychawin.com</title>
    <link rel="icon" href="https://boychawin.com/B_images/logoboychawin.com.png" type="image/png" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">


    <div class="showData"></div>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

    <script type="text/javascript">
        let showData = document.querySelector('.showData');
        //ใช้ axios  ดึงข้อมูลจาก data.php
        setInterval(() => {
            axios.get("api/dataTime.php?boychawin=191").then(function(response) {
                showData.innerHTML = response.data;
            }).catch((err) => console.log(err));
        }, 1000); // 1000 =  1 วินาที
    </script>



</body>

</html>

<!-- สร้างไฟล์ ชื่อ data.php แล้วนำโค้ดด้านล่างนี้ไปใส่นะครับ  -->
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

if (isset($_GET['boychawin']) == 191) {
    echo date("Y-m-d H:i:s");
} else {
    echo "ไม่มีสิทธิ์";
}
?>

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ดึงข้อมูล Real time ด้วย Axios PHP & JS | boychawin.com</title>
    <link rel="icon" href="https://boychawin.com/B_images/logoboychawin.com.png" type="image/png" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">


    <div class="showData"></div>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

    <script type="text/javascript">
        let showData = document.querySelector('.showData');
        //ใช้ axios  ดึงข้อมูลจาก data.php
        setInterval(() => {
            axios.get("api/dataTime.php?boychawin=191").then(function(response) {
                showData.innerHTML = response.data;
            }).catch((err) => console.log(err));
        }, 1000); // 1000 =  1 วินาที
    </script>



</body>

</html>

<!-- สร้างไฟล์ ชื่อ data.php แล้วนำโค้ดด้านล่างนี้ไปใส่นะครับ  -->
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

if (isset($_GET['boychawin']) == 191) {
    echo date("Y-m-d H:i:s");
} else {
    echo "ไม่มีสิทธิ์";
}
?>