I'm using React and PHP, and I need it to do something specific. I'm using Axios to send requests to my PHP pages which then change my database. I need to make an update to my MySQL database table that changes the is_logged value from true to false if the user closes the page or the browser. The code to do this is set in the window's beforeunload event. However, the database is never updated. Is what I'm trying to do even possible in React?
Here's my React component code:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Viewers from './Viewers';
const Live = ({ match }) => {
window.addEventListener("beforeunload", () => {
axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
.then(response => console.log(response))
})
// Set token from url
const token = match.params.token
//Get the fullname and update logged_in to true
const [fullname, setFullname] = useState("")
useEffect(() => {
axios.get('http://localhost/live-streaming-app/get_user.php?token=' + token)
.then(response => {
setFullname(response.data.fullname)
console.log("Data", response.data)
})
.catch(error => console.log(error))
return () => {
axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
.then(response => console.log(response))
.catch(error => console.log(error))
}
}, [token])
//Jsx for when user is unauthorised
const rejected = (
<div className="container text-center pt-5">
<h1>Rejected Connection</h1>
<p>You are unauthorised to view this page</p>
</div>
)
let my_render = ""
if (fullname && fullname != null) {
my_render = <Viewers fullname={fullname} />
} else {
my_render = rejected
}
return my_render
};
export default Live;
Here is the PHP page that is called:
<?php
require 'connect.php';
$token = $_GET['token'];
$sql = "UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='{$token}'";
if(mysqli_query($con, $sql)){
http_response_code(201);
}
else {
http_response_code(422);
}
exit;
Issues to deal with:
Is the request being sent at all?
Try running
in your browser console and see whether anything is logged in the console. Check the Network tab as well in your dev tools to see whether there was a request sent. If the request is sent at all, then the sending of the request works. If not, then you have some issues with the URL that you will need to fix.
The token
Sending this request
Says that empty string will have the value of
token
. On the other hand, your PHP code assumes that there is a parameter calledtoken
:To comply with the assumption of your PHP code, you will need to specify that
token
is the value of a parameter calledtoken
:The fix above should solve the issue you are asking about, but let's not stop here.
SQL Injection
What if I send this request (don't run it, unless you create a backup) from my browser console (or cURL):
?
Your PHP code then would execute this:
removing all
viewers
from your database. Use PDO to parameterize your queries and making your queries safe from such attacks.Summary
React is a Javascript framework, which means that whatever Javascript is capable of your client-side is also capable of. It is true that some features are not necessarily available in the React way, but that should not worry you about those being possible, assuming that Javascript is capable of that. I tend to think that client-side frameworks will become less than useful when many things are going on in the client-side and I think that the main reason of popularity of client-side frameworks is that most programmers do not realize of just how many things Javascript is capable of. I'm not saying that client-side frameworks should never be used. I'm only saying that I have seen programmers being blind fans of client-side frameworks and technologies, which ended up destroying the project they worked on. So, when you choose your client-side tech stack, it is worth to check the capabilities your client-side requires, the time needed to implement it without client-side frameworks and the time needed to implement it using each framework that you might consider using. Compare the two and think about deadlines and financial capabilities. If you can not find an obvious, very good reason to use a client-side framework, then I advise against the use of it. Because, at the end of the day, if during development it turns out that for some reason you need to use a client-side framework, you can easily shift to it from the position of not using a framework. However, if you are using a client-side framework and it turns out to be unfeasible for your project, then refactoring the whole project not to use that framework often means reimplementing most of your client-side. And this kind of problem more often then not reveals itself in urgencies.