Develop Reference

How to replace ajax with webrtc data channel

** JAVASCRIPT question **
I'm using regularly ajax via XMLHttpRequest. But in 1 case, I need 1 ajax call per seconds....
but long term wise and with growing number of simultaneous users, it could bloat easily...
I'm reading stuff about webRTC data channel and it seems interesting and promissing.
Here my working AJAX function as an example of how easy and there is a few lines of codes to communicate from the browser to the server and vice-versa
function xhrAJAX ( divID , param2 ) {
// random value for each call to avoid cache
var pcache = (Math.floor(Math.random() * 100000000) + 1);
// parameters
var params = "divID="+encodeURIComponent(divID)+"&param2="+encodeURIComponent(param2);
// setup XMLHttpRequest with pcache
var xhr = new XMLHttpRequest();
xhr.open("POST", "/file.php?pcache="+pcache, true);
// setup headers
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// prepare onready scripts
xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { $("#"+divID).html(e.currentTarget.responseText) ; } }
// send the ajax call
xhr.send(params);
}
How can I "transpose" or "convert" this ajax workflow into a webRTC data channel ? in order to avoid to setup a setInterval 1000...
Note: I mean how to replace the javascript portion of the code. PHP here is only to illustrate, I don't want to do a webRTC via PHP...
Is there a simple few lines of code way to push/receive data like this ajax function ?
the answer I'm looking for is more like a simple function to push and receive
(once the connection with STUN, ICE, TURN is established and working...)
If I need to include a javascript library like jquery or the equivalent for webRTC, I'm welcoming good and simple solution.
*** The main goal is this kind of scenario :
I have a webapp : users in desktop and users within webview in Android and IOS
right now I have this workflow => ajax every 3 seconds to "tell" the main database that the user is still active and using the browser (or the app)
But I'd like to replace with this kind : when the user uses the browser => do a webrtc data chata in background between the browser and the server
While reading on the web I think that webRTC is a better solution than websocket.
** I did a bit of search and found peerjs....
https://github.com/jmcker/Peer-to-Peer-Cue-System/blob/main/send.html
I'll do some testing, but in the meantime, if someone can trow ideas, it could be fun.
Cheers

Receiving a 404 error from any website I attempt to pull data from

I'm attempting to create a simple web app that pulls data from a website depending on user input, but no matter what URL I use, it produces a 404 error in the console.
Here's the code, there's nothing else relevant as I've changed my other code for testing to simply submit a basic URL that doesn't depend on user input, by calling the function as so:
httpGet(myUrl);
function httpGet(theUrl){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("definition").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
}

This is a security feature, these third party pages might not want clients from other peoples apps to access that service as API but visit those pages directly. A solution can be using your own server as some kind of proxy. Your html-app will request your server, and your server access the remote service/website.
I see there is also a github page. Instead of having JSON files, you could wrap that data into a function-call and store as .js file (see jsonp). if the repo belongs to someone else, you can clone it into your own github page. But check if the license allow that.

Get where requests coming from to my website

I'm having a simple PHP page that generates random json values and returns it to the user.
I want to know what website is using this page to get data using curl or javascript.
for example:
the PHP page:
$datas['random'] = ['firstValue'=>'Hello', 'secondValue'=>'world'];
header('Content-Type: application/json');
echo json_encode($datas);
now that code will return this value
{"random":{"firstValue":"Hello","secondValue":"world"}}
what I want to do is: if someone used this file in his website using curl or javascript I want to be able to know which website is using it and what website requested it.
if the website http://example.com used this code in the website
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText);
} else if (this.response == null && this.status === 0) {
var reason = new Error('OFFLINE');
reject(reason);
} else {
var reason = new Error('ERROR');
reject(reason);
}
}
};
xhttp.open("GET", "jsonpage.php", true);
xhttp.send();
I want to be able to know that the website http://example.php requested the file, without using extra value jsonpage.php?website=example.com
is there any way to do it using PHP.

You can check the IP address of the party making the call to jsonpage.php, but to the best of my knowledge, not the domain.
$_SERVER['REMOTE_ADDR'] contains the real IP address of the connecting party. That is the most reliable value you can find.
However, they can be behind a proxy server in which case the proxy may have set the $_SERVER['HTTP_X_FORWARDED_FOR'], but this value is easily spoofed. For example, it can be set by someone without a proxy, or the IP can be an internal IP from the LAN behind the proxy.
Finally, if your concern is that only some people should have access to jsonpage.php, I suggest you implement either a public/private API key or oAuth to ensure only the right people have access.
Further reading: How to get the client IP address in PHP

you can using $_SERVER['HTTP_REFERER'] which will gives you which website is getting your info's but it's not really reliable because it's easy to change from the source.

Viability of running XMLHttpRequest every second?

I have an application that gathers live JSON data every second from another server via XMLHttpRequest. After checking the Networks panel on Chrome, I have found that the size of each packet is about 697 bytes. I am unsure whether this is a high or a low number, and whether there are any potential problems running my application like so.
Example:
var exhaitch = new XMLHttpRequest();
var exlink = "wheremydatais.com";
exhaitch.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
console.log(JSON.parse(this.responseText));}
}
exhaitch.open("GET", exlink, true);
exhaitch.send();
This javascript code is put inside an interval that is set to run every 1.5 seconds. The console log contains the updated data I want to use in my application.
I understand that ideally this would have been done using Node.js and Socket.io. However, much of this application has already been built over LAMP stack. So I am wondering what my options are if this method is unsustainable over the long term.
One thing I have looked into recently is socket.io without Node. Though I am still unclear how to go about that.

I think this is more preferable and will scale better:
function getMyData(){
var exhaitch = new XMLHttpRequest();
var exlink = "wheremydatais.com";
exhaitch.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
console.log(JSON.parse(this.responseText));
getMyData();
}
}
exhaitch.open("GET", exlink, true);
exhaitch.send();
}

Server doesn't respond to an xmlHTTP request using the get method

I'm doing a project with arduino in which I send different requests to the server (the arduino board) with the method XMLHttprequest and Get from a webpage. Except one of the request the others are used only for sending orders to the server, so I don't expect for an XML response. The other one is a request sent in intervals of 5 seconds for getting different values from the server.
The problem arrives with this last one. Actually the webpage sends the request (because I see it on the browser console and the arduino serial monitor) every 5 seconds, but it doesn't get anything, just the headers of the answer confirming the response but nothing about the XML file. Surprisingly, when I write a normal request using the get method in the browser I get instantly the XML file with the values, and It happens all the time I do that.
I'm going to write the javascript code I'm using on the webpage
setInterval(function tiempo()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// extract XML data from XML file (containing switch states and analog value)
document.getElementById("input1").innerHTML = this.responseXML.getElementsByTagName('dato')[0].childNodes[0].nodeValue;
document.getElementById("input2").innerHTML = this.responseXML.getElementsByTagName('dato')[1].childNodes[0].nodeValue;
document.getElementById("input3").innerHTML = this.responseXML.getElementsByTagName('dato')[2].childNodes[0].nodeValue;
document.getElementById("input4").innerHTML = this.responseXML.getElementsByTagName('dato')[3].childNodes[0].nodeValue;
document.getElementById("input5").innerHTML = this.responseXML.getElementsByTagName('dato')[4].childNodes[0].nodeValue;
document.getElementById("input6").innerHTML = this.responseXML.getElementsByTagName('dato')[5].childNodes[0].nodeValue;
document.getElementById("input7").innerHTML = this.responseXML.getElementsByTagName('dato')[6].childNodes[0].nodeValue;
}
}
}
}
request.open("GET", "URL" + Math.random(), true);
request.send(null);
}
, 5000);
On the other hand, if I only write in the browser URL, I get the XML without any problem.
One las thing I have to say is that right now I'm using a webpage stored in my computer but before I was using a webpage stored in the arduino (on an SD card) and loaded also through the internet from arduino. The same code in that case worked perfectly. The reason because I changed It is because arduino ethernet is not too fast and It took so much time. With the webpage stored in my computer It goes faster because It only needs to send the orders.
Thanks!!

Finally, I figured out the problem. It is the browser. For any reason only Internet Explorer works correctly with the webpage. Neither firefox nor other web browsers got the xml file. I don't know the reason but I would like to find it.
If someone knows something about I would be glad of trying to resolve the problem.
Thanks!!