Show same content at same time in different browser - javascript

I am developing a numbers game where users will buy numbers and after 2 days winners will be drawn.
I am using PHP for the backend and jQuery for the frontend.
My problem is when drawing occurred user on different browser can't see same numbers, these draw numbers are being generated by PHP.
I was thinking maybe I can build these game by PHP and Javascript but it looks not easy. Can you guys please suggest some alternative? How can I improve this code to show the same number on the different browser?
I have the idea that it is not possible to generate a random number for each request. Maybe I can save the number in the database and then get this number in PHP such that the number will be unique for each request.
The actual issue is to create the same content for each user in different browsers. Any help would be really appreciated.
Javascript:
var myTimer = setInterval(checkDrawDate, 1000);
function checkDrawDate() {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
var x = new Date(dateTime);
var y = new Date("{{$drawDate}}"); //this is laravel variable which contain drawdate e.g. 2017-07-05
if(x >= y){
drawNumber();
}
}
function drawNumber(){
$.get("{{ route('ajaxcomparepowerball') }}",{'gameId': gameid}, function(res){
$('#mybets').html(res.html);
});
}
PHP:
public function ajaxDrawNumber(Request $req){
return rand(0,49);
}

A Cron Job will be needed to implement this functionality. As you are drawing a number on particular time (after $drawDate in your case). So the cron job will execute once in day, check whether $drawDate for each game is today or passed. If condition true, $drawDate <= now, call a function to generate random draw number rand(0,49) and save it to database corresponding to gameid of matched games(having $drawDate <= now).
By doing this, a lot Javascript work will be reduced. In JS, then need to hit an ajax request with gameid to fetch record having draw number for particular game from database. If record not found, it means random number not drawn yet.
I think you are using Laravel, so to schedule tasks in laravel visit here.

Here some possible solutions.
If you need the same data modified for users in real time I think the best option is WebRTC, quick start here. And here a simple example sending strings in real time between clients.
If you also need interaction server to client you could use server-sent events.
You could perform a bidirectional communication between browser and a server using WebSockets. You can send and receive event-driven responses. Using a database you could communicate two clients.
The easiest is using a database to store the information and perform ajax to send data to the server (and database) and server-sent events to send data to the clients.
Basic Server-sent event example:
Javacript:
var evtSource = new EventSource("myserver.php");
evtSource.onmessage = function(e) {
// listening for new messages here
alert(e.data)// e.data is mynumber
}
Php (myserver.php)
<?php
header('Cache-Control: no-cache');
header("Content-Type: text/event-stream\n\n");
while (1) {
//perform a query in your database with your driver
$result = mysql_query("SELECT mynumber FROM mytable WHERE user = 1");
$row = mysql_fetch_assoc($result);
echo $row['mynumber'];//<-- sending mynumber to client
ob_end_flush();
flush();
sleep(1);// <-- this is every second, but you could fire this with ajax or some other event.
}
This code send a number from server to a client that is listening. If a user made a change, one possibility is that client send an ajax to update some value in the database. So, at the same time, the ajax server could send this as an update to clients listening. In that way the whole process is completed.

I think all you need is this. Call a function in every, say 5 seconds or less and fetch data from server and update it in the page.
window.setInterval(function(){
updateNumber();
}, 5000);// set for every five seconds
function updateNumber(){
//ajax code to fetch live data and append the data in the numbers container
}
And dont forget to cross check the data before saving the numbers in the server.
Hope it helps.!!!

To save and maintain users state, key value store like Aerospike can be used. It is very easy to save and retrieve data in key value store. In above case we just have to generate a unique key using gameId, userId and date. And save user's data against the unique key.
To get started with Aerospike php client following is Aerospike php client
If data is present against the unique id for that particular user just return it, else create the new random number save it against the unique key and return it. Please be careful while creating unique key. Instead of using server side date-time please send date in ajax call request so there will not be any issue with time zone. It will be always user's timezone and there will not be any issue if server is in different timezone and user is in different timezone.
function drawNumber(){
$.get("{{ route('ajaxcomparepowerball') }}",{'gameId': gameid,'date':user-timezone-date}, function(res){
$('#mybets').html(res.html);
});
}
Here "user-timezone-date" should be fix date format like 'MM-dd-yy' which will indicate the same day. hours or seconds should not be included while generating unique key otherwise at the time of retrieving the user's state; generating particular unique will be changed every hour or every second and whole purpose of of doing this will be shattered.
I am new to StackOverFlow so I am not able to comment on the answers. In case of corn job as well we have to be careful with time-zones if server and users are in different time zones. Otherwise user's will see different random number before user's day is complete. Please improve answer by commenting on it and suggestions are always welcome.

Related

Is it possible to change the URL request on a WebSocket connection?

I am trying to change the URL request on an already connected socket but I can't figure out how or if it is even possible.
I am working with the WebSocket API and CoinCap.
What I am doing right now is closing the connection and creating a new one with the new parameters.
// Create a new WS connection
const webSocketURL = `wss://ws.coincap.io/prices?assets=${loadedKeys}`
// loadedKeys could be a string of one coin (e.g. bitcoin) or an array
// or an array (e.g. bitcoin,ethereum,monero,litecoin), has to be dynamic.
pricesWs = new WebSocket(webSocketURL);
pricesWs.onopen = function () {
console.log(`conected: ${pricesWs.readyState}`)
}
pricesWs.onmessage = function (msg) {
handleUpdateCB(msg.data);
}
// then when I need to receive different coin prices
// I close the connection and reopen a new one.
anotherFunction() {
pricesWs.close();
pricesWs = new WebSocket(aNewWebSocketURL);
}
I tried sending parameters as messages with send() function without success, I keep receiving the same data, let's say I first connect asking for bitcoin and the I want to receive bitcoin and ethereum I tried this
pricesWs = new WebSocket(`wss://ws.coincap.io/prices?assets=bitcoin);
//then tried
pricesWs.send(bitcoin,ethereum)
this doesn't work, I also tried sending as JSON but I kept getting the same data just for the first query(bitcoin)
UPDATE:
This is the the Git for the app, if you are interested seeing the whole thing together.
Git
UPDATE 2:
I created this pen to make it easier to understand, note that the pen is made on VueJS, but that isn't important. The important part is on line 60 JS panel
Is there any reason why you want to switch the URL?
According to the coin cap documentation, you can request information about multiple crypto currency at once. Is it not an option for you?
Generally you should avoid opening and closing connections to a socket as there is slight latency albeit very insignificant. Leaving the connection open is better since you will be notified if price is changed for any of the currencies you are interested it.
The answer to your original question "Is it possible to change URL for a web socket connection?" is no! You can't change URL however you can create as many connections as you need. In your case you are closing the connection and opening it immediately but in the comments I noticed that you mentioned that it is based on user interaction. You can open connection just for the currencies you care about when user requests it and keep the connection opened until user switches the currency again because at that point you'll probably switch to another currency.
I also agree with #Taylor Spark, you can also just hide the dom for the currencies user don't care and render the ones they are interested in.

Unsure on implementation of an AJAX idea

I was thinking about how to make an instant messaging application, and wanted to not have to send an AJAX request so often (one every .2s), and I came across the following idea:
Send an AJAX request from the user side, to the server.
Only respond once there is a change in the MySQL database
And then send the next AJAX request once the response has been recorded and parsed
I'm aware of how to do the first and third steps, but the second one is going over my head.
I'm assuming that for step 2, I'll need to store the request somewhere, while the PHP script is continuously looping and looking for some changes, and once there is a change, the saved request would be responded to.
EDIT
Didn't know about WebSockets, should've used those.
You could use recursion and query the database every 2 seconds, until you find new data to be served to the user. So basically you could do something like
public function isDataUpdated($lastId) {
$query = "SELECT * FROM `messages` WHERE `messages`.`message_id` > $lastId";
return (bool)(count($this->executeSQL($query)) > 0);
}
public function fetchNewMessages () {
if ($this->isDataUpdated($_GET['last_id'])) {
/* We have new data! Send it to the user */
} else {
sleep(2); // wait for 2 seconds
$this->fetchNewMessages(); // we use recursion to query the database every 2 seconds to find new data
}
}
Although, it is not the best of solutions, it would hopefully work. I would recommend taking a look at Sockets in PHP to better achieve what you want

Setting up a delay notification with php

I need to write a php function for sending a Telegram notification after 4 hours.
With the application i'm posting data into a SQL db, after I pressed the Submit button, i need that a php function starts and after 2 days sends to my Telegram channel a notification, with some of the data that i've posted into the db record.
For the posting part and Telegram part i'm ok, i've already linked the website to the channel and normal notifications from php work fine, but i need some advice on the "reminder" part.
I was thinking about some date() function and post the value in to the record, make another var with the date + 2days e make some for or while cycle but i don't think that this can works. Some advice?
I'm new to php, maybe i dont know some function that could help me?
Add to your table a column and name it notification_send and give it a default value of 0
Create a crontab that calls a php file for example:
*/60 * * * * php -f /etc/www/my_notification.php : calls the file every 60 mintues
In this file create a query that selects all the data with the notification_send = 0 then check if the current_date - date column of each row => 2 days :
If so : update the notification_send value to 1 and send your notification
As I commented, your approach is right. As you asked something more, though, I chose to write an answer.
As you asked, when you send a Telegram notification you have to send a reminder notification after 2 days (48h). If I'm right it's an e-mail.
First of all, as you said, you have to create a column to warn when the remember should be send.
Also, to know if the reminder has been sent or not you have to create another column. It could be a flag (true/false) or a datetime column (null = not sent, filled = sent).
Besides that, a cronjob or schedule have to call a PHP script. I'll show to you an example of a PHP script.
I'll call the table as reminder and the column sendIn and isSent.
//select only the reminder that has the sendIn lesser than now and that not has been sent
$statement = $pdo->query("SELECT * FROM reminder WHERE sendIn <= NOW() AND isSent is null");
//prepared statement to update the reminder sent
$updateStatement = $pdo->query("UPDATE reminder SET isSent = NOW() WHERE id = :id");
foreach($statement as $reminder)
{
/**
script to send the reminder
**/
//update the reminder
$updateStatement->execute(array(':id' , $reminder['id']));
}
To create a cronjob, you could take a look here:
https://askubuntu.com/questions/2368/how-do-i-set-up-a-cron-job
You don't need to delete the cron, just let it run periodically and send all your reminders.

How to customize a dynamic website in PHP and JS?

I am working on a website to analyse energy data that I get from several remote meters. I'm using JS, PHP and mySQL. I developed the website with one client's data (specific type and numbers of remote meters). This is the first website I did, I have a lot to learn.
There are the steps:
Login form // same for everyone
PHP check login // same for everyone
Index page // same for everyone
Javascript with AJAX function to post data (range of date) to a php file (calculation.php) to calculate stuff // JS file is the same for everyone
PHP file gets the data from mySQL and does many calculation about energy stuff, then echoes it
The JS file gets the data (via AJAX) and then displays graphs via google Chart library
The problem is that the PHP file that gets the AJAX POST (end of step 4 and step 5) won't do the same calculation for every client. So I don't know what to do, I'm a bit lost.
I thought at:
Putting a condition in the PHP file for every client, like "if
client_id=X" // this seems too bad with dozens of clients
Writing a different PHP file for every client. Writing the name of
this PHP file in the mysql table "clients". Doing an intermediate php
file called by AJAX that will check the client_id against the
database then "include" the specific PHP file into the temporary one.
Writing the PHP PDO request in a string type into the table
"clients" then query it from the PHP file "calculation.php". The PHP file will do the correct command.
These solutions don't seem good to me (maybe the third?). Do you have any idea? Thank you in advance.
EDIT Example of php code
first client:
$reponse1 = $bdd->prepare("SELECT DATE_FORMAT(Date, '%H:%i') AS timekey, AVG(Value) FROM meter1 WHERE Date>='$from' AND Date<='$to' GROUP BY timekey");
$reponse1->execute();
$myArrayLP24temp1['Hour']= $reponse1->fetchAll(PDO::FETCH_COLUMN, 0);
$reponse1->execute();
$myArrayLP24temp1['Value']= $reponse1->fetchAll(PDO::FETCH_COLUMN, 1);
$reponse2 = $bdd->prepare("SELECT DATE_FORMAT(Date, '%H:%i')AS timekey, AVG(Value) FROM meter2 WHERE Date>='$from' AND Date<='$to' GROUP BY timekey");
$reponse2->execute();
$myArrayLP24temp2['Value']= $reponse2->fetchAll(PDO::FETCH_COLUMN, 1);
for ($ii=0; $ii<24*4; ++$ii){
$meter1NoRound=$myArrayLP24temp1['Value'][$ii]*4;
$meter2NoRound=$myArrayLP24temp2['Value'][$ii]*4;
$meter1=round($meter1NoRound,1);
$meter2=round($meter2NoRound,1);
$myArrayLP24['rows'][]= array('c' => array( array('v'=>$myArrayLP24temp1['Hour'][$ii]), array('v'=>($meter1)), array('v'=>($meter2))));
second client:
$reponse1 = $bdd->prepare("SELECT DATE_FORMAT(Date, '%H:%i') AS timekey, AVG(Value) FROM meter1 WHERE Date>='$from' AND Date<='$to' GROUP BY timekey");
$reponse1->execute();
$myArrayLP24temp1['Hour']= $reponse1->fetchAll(PDO::FETCH_COLUMN, 0);
$reponse1->execute();
$myArrayLP24temp1['Value']= $reponse1->fetchAll(PDO::FETCH_COLUMN, 1);
for ($ii=0; $ii<24*4; ++$ii){
$meter1NoRound=$myArrayLP24temp1['Value'][$ii]*4;
$meter1=round($meter1NoRound,1);
$myArrayLP24['rows'][]= array('c' => array( array('v'=>$myArrayLP24temp1['Hour'][$ii]), array('v'=>($meter1))));
The examples above show two differents code. The first one is for a client with two meters, the second one for a client with one meter. It can be up to 10 meters, and sometimes there will be sub meters that I will have to add up sometimes not. So the code is different for every client (except for clients with the exact same configuration, but that won't happen very often).
Why not storing the variable values in data base ?
Then, when client comes you have all the require infos to make your calculation.
Think simple and standardize the more you can.
Never forget that a good developer is a lazy person ;-)
EDIT
When you're saying :
"The problem is that the PHP file that gets the AJAX POST (end of step 4 and step 5) won't do the same calculation for every client."
What do you mean ?
The calculation formula is different for each client ?
The values to use in the formula are different for each client ?
The way i understood your question is in the first case.
Whatever, for both cases, store what you need in DB and use it as it comes with the client.
May be i didn't understand well what you need. If it is, please, send a piece of code to illustrate your problem.

Creating dynamic order basket using php javascript

I am creating an ePos system, that adds any item user clicks to the basket and calculate the total in the end all done without total page refresh.
I tried using $_SESSION and storing as order ( [item] => [price] ) but failed, as i need to refresh.
what I need is:
to display added Items [id name Qnty price]
calculate total price of added items.
please advice me on the best method to do this.
thanks
this is what I attempter in javascript
function addItem(name, price, id)
{
var table=document.getElementById("basket");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=name;
cell2.innerHTML=1;
cell3.innerHTML=price;
}
but my issue was, i could not find a way to add decimals, parseFloat made alot of bugs for me
You should not need to refresh the page in order to save information into the PHP Session object. PHP Session information is stored on the server, so you can do an asynchronous HTTP request to the backend, and store information the PHP Session. I would suggest using the jQuery.ajax function (http://api.jquery.com/jQuery.ajax/) to do your async HTTP requests. If you are not familiar with jQuery, I highly suggest you get familiar with it. I also suggest you look into how AJAX works.
Also, if you are using the PHP session, if you are not using some kind of framework which does session management, you must make sure to call session_start() before using the $_SESSION variable.

Categories

Resources