I've implemented long polling mechanism using XMLHttprequest. My problem is that after the browser is closed, the server side process continues to run and doesn't shutdown.
The web server is httpd apache and the process is a php script .
I do want the php script to close after the browser closes .
i discovered that php doesn't discover connection close unless it tries to output data back to the browser .
this is a problem, since it will compromise the objective of minimizing bandwidth usage .
the client side script, uses onreadystatechange to try and read partial data without requiring new XMLHttprequest for each communication .
some browsers will not allow to read partial data until the whole response is finished :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(NewReq);
var mode = 0;
function NewReq() {
var Req = new XMLHttpRequest();
var url = 'a.php';
if (mode) {
url += '?mode=' + mode;
}
Req.open('GET', url);
Req.onreadystatechange = function(event) {
var handler = ReadyState[this.readyState];
if (typeof handler == 'function') {
handler(this);
}
};
inc_mycookie();
Req.send();
}
var ReadyState = [
//'NotInit', 'ReqRec', 'ConEst'
null , null, null,
partial // 'Proccessing'
,
complete //'Finishied'
];
function partial(Req) { //'Proc'
if (mode == 1) {
return;
}
try {
var strings = Req.response.split(';');
strings.pop();
var data = JSON.parse(strings.pop());
$('#message').text(data);
mode = 2;
}
catch (e) {
$('#message').text(e.message);
mode = 1;
}
return;
}
function complete(Req) {
var last = $('#message').text();
$('#output').text(last);
NewReq();
}
function inc_mycookie() {
var matches = document.cookie.match(/(?:^|;)mine=([^;]+);?/);
if (matches) {
var inc = parseInt(matches[1]) + 1;
document.cookie = 'mine=' + inc;
}
}
</script>
</head>
<body>
<h3> output </h3>
<div id="output"></div>
<h3> partial </h3>
<div id="message"></div>
</body>
</html>
and here is the php script (apache has "php_value output_buffering Off") :
<?php
header('Content-type: application/json');
if (!isset($_COOKIE['mine'])) {
setcookie('mine', 23);
$_COOKIE['mine'] = 23;
}
$mode = isset($_GET['mode']) ? $_GET['mode'] : 1;
print json_encode('test_' . $_COOKIE['mine']) . ';';
if ($mode == 2 ) {
$iter = 8;
while($iter) {
sleep(2);
$iter--;
error_log('a.php:' . $iter);
// if i remove this line, then erro_log will continue to show even when browser is closed
print json_encode('test_' . $_COOKIE['mine'] . '_' . $iter) . ';';
}
}
?>
in the case where browser support partial response, the damage is not too bad .
but if browser require the whole response to finish, then the damage will be a complete compromise of long polling, meaning a repetitive request every 5 seconds .
one possible solution is to add interval :
<?php
$iter = 200;
while($iter) {
sleep(2);
$iter--;
error_log('a.php:' . $iter);
if (update_exist()) {
print json_encode('test_' . $_COOKIE['mine'] . '_' . $iter) . ';';
}
else if (($iter-200)%20 == 0) { // 180, 160, 140 ... 40, 20, 0
print json_encode('check connection : ' . $iter) . ';';
}
}
Even though this is almost 5 years old, consider
XMLHTTPRequest.abort()
The javascript in the question would need to be redesigned in the following ways:
Make Req a global variable, so that
Req.abort() could be called, in (for instance)
window.addEventListener('unload', function() { Req.abort(); })
so that closing the page could cause the client to terminate the connection to the server.
Related
I have a file named handler.php which reads data from a text file and pushes it to a client page.
Relevant client code:
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("handler.php");
source.onmessage = function(event) {
var textarea = document.getElementById("subtitles");
textarea.value += event.data;
textarea.scrollTop = textarea.scrollHeight;
};
} else {
document.getElementById("subtitles").value = "Server-sent events not supported.";
}
</script>
Handler.php code:
$id = 0;
$event = 'event1';
$oldValue = null;
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');
while(true){
try {
$data = file_get_contents('liveData.txt');
} catch(Exception $e) {
$data = $e->getMessage();
}
if ($oldValue !== $data) {
$oldValue = $data;
echo 'id: ' . $id++ . PHP_EOL;
echo 'event: ' . $event . PHP_EOL;
echo 'retry: 2000' . PHP_EOL;
echo 'data: ' . json_encode($data) . PHP_EOL;
echo PHP_EOL;
#ob_flush();
#flush();
sleep(1);
}
}
When using the loop, handler.php is never loaded so the client doesn't get sent any data. In the Chrome developer network tab, handler.php is shown as "Pending" and then "Cancelled". The file itself stays locked for around 30 seconds.
However, if I remove the while loop (as shown below), handler.php is loaded and the client does receive data (only once, even though the liveData.txt file is constantly updated).
Handler.php without loop:
$id = 0;
$event = 'event1';
$oldValue = null;
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');
try {
$data = file_get_contents('liveData.txt');
} catch(Exception $e) {
$data = $e->getMessage();
}
if ($oldValue !== $data) {
$oldValue = $data;
echo 'id: ' . $id++ . PHP_EOL;
echo 'event: ' . $event . PHP_EOL;
echo 'retry: 2000' . PHP_EOL;
echo 'data: ' . json_encode($data) . PHP_EOL;
echo PHP_EOL;
#ob_flush();
#flush();
}
I'm using SSE as I only need one-way communication (so websockets are probably overkill) and I really don't want to use polling. If I can't sort this out, I may have to.
The client side of the SSE connection looks OK as far as I can tell - though I moved the var textarea..... outside of the onmessage handler.
UPDATE: I should have looked closer but the event to monitor is event1 so we need to set an event listener for that event.
<script>
if( typeof( EventSource ) !== "undefined" ) {
var url = 'handler.php'
var source = new EventSource( url );
var textarea = document.getElementById("subtitles");
source.addEventListener('event1', function(e){
textarea.value += e.data;
textarea.scrollTop = textarea.scrollHeight;
console.info(e.data);
},false );
} else {
document.getElementById("subtitles").value = "Server-sent events not supported.";
}
</script>
As for the SSE server script I tend to employ a method like this
<?php
/* make sure the script does not timeout */
set_time_limit( 0 );
ini_set('auto_detect_line_endings', 1);
ini_set('max_execution_time', '0');
/* start fresh */
ob_end_clean();
/* ultility function for sending SSE messages */
function sse( $evtname='sse', $data=null, $retry=1000 ){
if( !is_null( $data ) ){
echo "event:".$evtname."\r\n";
echo "retry:".$retry."\r\n";
echo "data:" . json_encode( $data, JSON_FORCE_OBJECT | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS );
echo "\r\n\r\n";
}
}
$id = 0;
$event = 'event1';
$oldValue = null;
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');
while( true ){
try {
$data = #file_get_contents( 'liveData.txt' );
} catch( Exception $e ) {
$data = $e->getMessage();
}
if( $oldValue !== $data ) {
/* data has changed or first iteration */
$oldValue = $data;
/* send the sse message */
sse( $event, $data );
/* make sure all buffers are cleansed */
if( #ob_get_level() > 0 ) for( $i=0; $i < #ob_get_level(); $i++ ) #ob_flush();
#flush();
}
/*
sleep each iteration regardless of whether the data has changed or not....
*/
sleep(1);
}
if( #ob_get_level() > 0 ) {
for( $i=0; $i < #ob_get_level(); $i++ ) #ob_flush();
#ob_end_clean();
}
?>
When using the loop, handler.php is never loaded so the client doesn't
get sent any data. In the Chrome developer network tab, handler.php is
shown as "Pending" and then "Cancelled". The file itself stays locked
for around 30 seconds.
This is because the webserver (Apache) or the browser or even PHP itself cancel the request when there is no response within 30 seconds.
So I guess the flushing does not work, try to actively start and end the buffer without using # functions so you get a clue when there is an error.
// Start output buffer
ob_start();
// Write content
echo '';
// Flush output buffer
ob_end_flush();
I think you have a problem with the way the web works. The PHP code doesn't run in your browser - it just creates something that the web server hands off to the browser over the wire.
Once the page is loaded from the server that's it. You will need to implement something that polls for changes.
One way I've done this is to put the page in a loop that refreshes and therefore fetches the page again with the new data every second or so (but this could seriously overload your server if there's a lot of folks on that page).
The only other solution is to use push technology and a javascript framework that can take the push and repopulate the relevant parts of the page, or a javascript loop on a timer that pulls the data.
(Posted solution on behalf of the question author).
Success! While debugging for the nth time, I decided to go back to basics and start again. I scrapped the loop and reduced the PHP code to a bare minimum, but kept the client-side code RamRaider provided. And now it all works wonderfully! And by playing around with the retry value, I can specify exactly how often data is pushed.
PHP (server side):
<?php
$id = 0;
$event = 'event1';
$oldValue = null;
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');
try {
$data = file_get_contents('liveData.txt');
} catch(Exception $e) {
$data = $e->getMessage();
}
if ($oldValue !== $data) {
$oldValue = $data;
echo 'id: ' . $id++ . PHP_EOL;
echo 'event: ' . $event . PHP_EOL;
echo 'retry: 500' . PHP_EOL;
echo "data: {$data}\n\n";
echo PHP_EOL;
#ob_flush();
#flush();
}
?>
Javascript (client side):
<script>
if ( typeof(EventSource ) !== "undefined") {
var url = 'handler.php'
var source = new EventSource( url );
var textarea = document.getElementById("subtitles");
source.addEventListener('event1', function(e){
textarea.value += e.data;
textarea.scrollTop = textarea.scrollHeight;
console.info(e.data);
}, false );
} else {
document.getElementById("subtitles").value = "Server-sent events not supported.";
}
</script>
I'm working on a one-way messaging system using server-sent events. I have a file (server.html) which sends the contents of a textarea to a PHP file (handler.php).
function sendSubtitle(val) {
var xhr = new XMLHttpRequest();
var url = "handler.php";
var postdata = "s=" + val;
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(postdata);
//alert(val);
}
This works (alert(val) displays the text in the textarea).
My handler.php code looks like this:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$stringData = $_POST['s'];
echo "data: Data is {$stringData}\n\n";
flush();
And the relevant part of my SSE receiver file (client.html) is as follows:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("handler.php");
source.onmessage = function(event) {
var textarea = document.getElementById('subtitles');
textarea.value += event.data + "<br>";
textarea.scrollTop = textarea.scrollHeight;
};
} else {
document.getElementById("subtitles").value = "Server-sent events not supported.";
}
The problem is that client.html only displays "data: Data is", so the text from server.html is getting lost somewhere along the way. I imagine it's the PHP code that's falling over, but I can't work out what's wrong. If anyone can help, I'd appreciate it.
EDIT
I chose to use SSE as opposed to websockets as I only need one-way communication: server.html should push the contents of its textarea to client.html whenever it changes. All the examples of SSE that I've looked at (and I've looked at a lot!) send "automatic" time-based data. I haven't seen any that use real-time user input. So perhaps I should clarify my original question and ask, "How can I use SSE to update a DIV (or whatever) in web page B whenever the user types in a textarea in web page A?"
UPDATE
I've narrowed the issue down to the while loop in the PHP file and have therefore asked a new question: Server-side PHP event page not loading when using while loop
Assuming you want to send a value from server.html and a value at client.html will be automatically updated...
You will need to store the new value somewhere because multiple instances of a script do not share variables just like that. This new value can be stored in a file, database or as a session variable, etc.
Steps:
Send new value to phpScript1 with clientScript1.
Store new value with phpScript1.
Connect clientScript2 to phpScript2.
Send stored value to clientScript2 if it is changed.
Getting the new value 'on the fly' means phpScript2 must loop execution and send a message to clientScript2 whenever the value has been changed by clientScript1.
Of course there are more and different approaches to achieve the same results.
Below there's some code from a scratchpad I've used in previous project.
Most parts come from a class (which is in development) so I had to adopt quite a lot of code. Also I've tried to fit it into your existing code.
Hopefully I didn't introduce any errors.
Do note I did not take any validation of your value into account! Also the code isn't debugged or optimized, so it's not ready for production.
Client side (send new value, e.g. your code):
function sendSubtitle(val) {
var xhr = new XMLHttpRequest();
var url = "handler.php";
var postdata = "s=" + val;
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(postdata);
//alert(val);
}
Server side (store new value):
<?php
session_start();
$_SESSION['s'] = $_POST['s'];
Client side (get new value):
//Check for SSE support at client side.
if (!!window.EventSource) {
var es = new EventSource("SSE_server.php");
} else {
console.log("SSE is not supported by your client");
//You could fallback on XHR requests.
}
//Define eventhandler for opening connection.
es.addEventListener('open', function(e) {
console.log("Connection opened!");
}, false);
//Define evenhandler for failing SSE request.
es.addEventListener('error', function(event) {
/*
* readyState defines the connection status:
* 0 = CONNECTING: Connecting
* 1 = OPEN: Open
* 2 = CLOSED: Closed
*/
if (es.readyState == EventSource.CLOSED) {
// Connection was closed.
} else {
es.close(); //Close to prevent a reconnection.
console.log("EventSource failed.");
}
});
//Define evenhandler for any response recieved.
es.addEventListener('message', function(event) {
console.log('Response recieved: ' + event.data);
}, false);
// Or define a listener for named event: event1
es.addEventListener('event1', function(event) {
var response = JSON.parse(event.data);
var textarea = document.getElementById("subtitles");
textarea.value += response + "<br>";
textarea.scrollTop = textarea.scrollHeight;
});
Server side (send new value):
<?php
$id = 0;
$event = 'event1';
$oldValue = null;
session_start();
//Validate the clients request headers.
if (headers_sent($file, $line)) {
header("HTTP/1.1 400 Bad Request");
exit('Headers already sent in %s at line %d, cannot send data to client correctly.');
}
if (isset($_SERVER['HTTP_ACCEPT']) && $_SERVER['HTTP_ACCEPT'] != 'text/event-stream') {
header("HTTP/1.1 400 Bad Request");
exit('The client does not accept the correct response format.');
}
//Disable time limit
#set_time_limit(0);
//Initialize the output buffer
if(function_exists('apache_setenv')){
#apache_setenv('no-gzip', 1);
}
#ini_set('zlib.output_compression', 0);
#ini_set('implicit_flush', 1);
while (ob_get_level() != 0) {
ob_end_flush();
}
ob_implicit_flush(1);
ob_start();
//Send the proper headers
header('Content-Type: text/event-stream; charset=UTF-8');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no'); // Disables FastCGI Buffering on Nginx
//Record start time
$start = time();
//Keep the script running
while(true){
if((time() - $start) % 300 == 0){
//Send a random message every 300ms to keep the connection alive.
echo ': ' . sha1( mt_rand() ) . "\n\n";
}
//If a new value hasn't been sent yet, set it to default.
session_start();
if (!array_key_exists('s', $_SESSION)) {
$_SESSION['s'] = null;
}
//Check if value has been changed.
if ($oldValue !== $_SESSION['s']) {
//Value is changed
$oldValue = $_SESSION['s'];
echo 'id: ' . $id++ . PHP_EOL; //Id of message
echo 'event: ' . $event . PHP_EOL; //Event Name to trigger the client side eventhandler
echo 'retry: 5000' . PHP_EOL; //Define custom reconnection time. (Default to 3000ms when not specified)
echo 'data: ' . json_encode($_SESSION['s']) . PHP_EOL; //Data to send to client side eventhandler
//Note: When sending html, you might need to encode with flags: JSON_HEX_QUOT | JSON_HEX_TAG
echo PHP_EOL;
//Send Data in the output buffer buffer to client.
#ob_flush();
#flush();
}
//Close session to release the lock
session_write_close();
if ( connection_aborted() ) {
//Connection is aborted at client side.
break;
}
if((time() - $start) > 600) {
//break if the time exceeds the limit of 600ms.
//Client will retry to open the connection and start this script again.
//The limit should be larger than the time needed by the script for a single loop.
break;
}
//Sleep for reducing processor load.
usleep(500000);
}
You called handler.php first time in the server.html and again in client.html. Both are different processes. The variable state won't be retained in the web server. You need to store it somewhere if you want that value in another PHP process. May be you can use sessions or database.
While using sessions you can store the values in two files like:
<?php
//server.php
session_start();
$_SESSION['s'] = $_POST['s'];
And in client.php
<?php
//client.php
session_start();
echo "data: Data is ".$_SESSION['s']."\n\n";
I have created a chatbot using chatscript. It works perfectly in .cmd when I execute a chatscript.exe program.
Now I am trying to run the chatbot the browser using xampp.
I have done the following steps:
I have installed XAMPP on C drive.
In XAMPP > HTDOCS folder I have added the Chatscript folder in it.
I am using Better web interface provided by chatscript.
When I try to run the index.php file, the bot doesn't reply.
Please find below code used in the web interface.
Index.php
<!DOCTYPE HTML>
<html>
<head>
<title> CHATSCRIPT SERVER
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#responseHolder {
min-width: 600px;
min-height: 300px;
width: 80%;
height: 300px;
overflow: auto;
margin: 10px auto;
background-color: pink;
}
</style>
</head>
<body class="bgimg">
<div id="responseHolder"></div>
<form id="frmChat" action="#">
<p>
Enter your message below:
</p>
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="txtUser" name="user" size="20" value="" />
<input type="hidden" name="send" />
</td>
</tr>
<tr>
<td>Message:</td>
<td><input type="text" name="message" id="txtMessage" size="70" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="send" value="Send Value" /></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var botName = 'rose'; // change this to your bot name
// declare timer variables
var alarm = null;
var callback = null;
var loopback = null;
$(function(){
$('#frmChat').submit(function(e){
// this function overrides the form's submit() method, allowing us to use AJAX calls to communicate with the ChatScript server
e.preventDefault(); // Prevent the default submit() method
var name = $('#txtUser').val();
if (name == '') {
alert('Please provide your name.');
document.getElementById('txtUser').focus();
}
var chatLog = $('#responseHolder').html();
var youSaid = '<strong>' + name + ':</strong> ' + $('#txtMessage').val() + "<br>\n";
update(youSaid);
var data = $(this).serialize();
sendMessage(data);
$('#txtMessage').val('').focus();
});
// any user typing cancels loopback or callback for this round
$('#txtMessage').keypress(function(){
window.clearInterval(loopback);
window.clearTimeout(callback);
});
});
function sendMessage(data){ //Sends inputs to the ChatScript server, and returns the response- data - a JSON string of input information
$.ajax({
url: 'ui.php',
dataType: 'text',
data: data,
type: 'post',
success: function(response){
processResponse(parseCommands(response));
},
error: function(xhr, status, error){
alert('oops? Status = ' + status + ', error message = ' + error + "\nResponse = " + xhr.responseText);
}
});
}
function parseCommands(response){ // Response is data from CS server. This processes OOB commands sent from the CS server returning the remaining response w/o oob commands
var len = response.length;
var i = -1;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == '\t') continue; // starting whitespace
if (response.charAt(i) == '[') break; // we have an oob starter
return response; // there is no oob data
}
if ( i == len) return response; // no starter found
var user = $('#txtUser').val();
// walk string to find oob data and when ended return rest of string
var start = 0;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == ']') // separation
{
if (start != 0) // new oob chunk
{
var blob = response.slice(start,i);
start = 0;
var commandArr = blob.split('=');
if (commandArr.length == 1) continue; // failed to split left=right
var command = commandArr[0]; // left side is command
var interval = (commandArr.length > 1) ? commandArr[1].trim() : -1; // right side is millisecond count
if (interval == 0) /* abort timeout item */
{
switch (command){
case 'alarm':
window.clearTimeout(alarm);
alarm = null;
break;
case 'callback':
window.clearTimeout(callback);
callback = null;
break;
case 'loopback':
window.clearInterval(loopback);
loopback = null;
break;
}
}
else if (interval == -1) interval = -1; // do nothing
else
{
var timeoutmsg = {user: user, send: true, message: '[' + command + ' ]'}; // send naked command if timer goes off
switch (command) {
case 'alarm':
alarm = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'callback':
callback = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'loopback':
loopback = setInterval(function(){sendMessage(timeoutmsg );}, interval);
break;
}
}
} // end new oob chunk
if (response.charAt(i) == ']') return response.slice(i + 2); // return rest of string, skipping over space after ]
} // end if
else if (start == 0) start = i; // begin new text blob
} // end while
return response; // should never get here
}
function update(text){ // text is HTML code to append to the 'chat log' div. This appends the input text to the response div
var chatLog = $('#responseHolder').html();
$('#responseHolder').html(chatLog + text);
var rhd = $('#responseHolder');
var h = rhd.get(0).scrollHeight;
rhd.scrollTop(h);
}
function processResponse(response) { // given the final CS text, converts the parsed response from the CS server into HTML code for adding to the response holder div
var botSaid = '<strong>' + botName + ':</strong> ' + response + "<br>\n";
update(botSaid);
}
</script>
</body>
</html>
ui.php
<?php
// ============= user values ====
$host = "localhost"; // <<<<<<<<<<<<<<<<< YOUR CHATSCRIPT SERVER IP ADDRESS OR HOST-NAME GOES HERE
$port = 8080; // <<<<<<< your port number if different from 1024
$bot = "rose";
// <<<<<<< desired botname, or "" for default bot
//=========================
// Please do not change anything below this line.
$null = "\x00";
$postVars = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
extract($postVars);
if (isset($send))
{
if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$userip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}else{
$userip = $_SERVER['REMOTE_ADDR'];
}
$msg = $userip.$null.$bot.$null.$message.$null;
if(!$fp=fsockopen($host,$port,$errstr,$errno,300))
{
trigger_error('Error opening socket',E_USER_ERROR);
}
// write message to socket server
fputs($fp,$msg);
while (!feof($fp))
{
$ret .= fgets($fp, 512);
}
fclose($fp);
exit($ret);
}
Please find below screenshot of the issue:
Issue while accessing chatbot on localhost:8080
I am having difficulty in connecting my chatscript server and localhost. Please let me know what should I change in UI.php so that bot will send the reply.
Thanks in advance.
There is one error in the UI.php file. The $ret variable breaks because it is not declared. If you add $ret = ''; just above fputs the code should work:
// write message to socket server
$ret = '';
fputs($fp,$msg);
while (!feof($fp))
{
$ret .= fgets($fp, 512);
}
fclose($fp);
exit($ret);
}
Besides the $ret correction, upon running in XAMPP, as the web host is Apache, so client uses port 8080 or 8088, upon using CS over Web.
ChatScript as server, start the ChatScript system with using port 1024 ( or user-defined) is needed.
Furthermore, Harry Bot is also called in index.php file, change to Rose as in ui.php file.
I have CS responses after doing these.
Hi i have a requirement where i need to execute mysql queries once user will confirm Ok from confirmation box.In my case what ever data i am passing to insert_details.php is not working. one more thing i would like to bring to your notice that i need to send data to different script and navigate it to different page.kindly suggest where is the problem?
<script type="text/javascript">
var r=confirm("This email address already exits in our database. Do you want to continue?");
if (r==true)
{
var dataObj = {
fname : document.getElementById('fname').value,
phone : document.getElementById('phone').value,
pemail : document.getElementById('email').value
}
var xhr = new XMLHttpRequest();
xhr.open("POST","insert_details.php", true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify(dataObj));
xhr.onreadystatechange = function() {
if (xhr.readyState>3) {
window.location = 'http://localhost/myproject/test.php?eid=<?php echo $primary_email; ?>';
}
}
alert("test");
}
else
{
window.location = 'http://localhost/myproject/registration_request.php'
}
</script>
code in insert_details.php
$date = "Date:" . date("d/m/Y h:i:s") . "\n"; //to get today's date and time
$logfile = "testing";
$fpath ="myproject/";
$filepath = $fpath .$logfile . '-log-' . date('Y-m-d') . '.csv'; //path of error log file
$fh1 = fopen($filepath, 'a') or die("can't open file"); //opening the error log file
fwrite($fh1, "******************index*******************" . "\n");
fwrite($fh1, $date);
$test=json_decode(file_get_contents('php://input'));
fwrite($fh1, $test[0]);
You are not sending up a named pair. You are just sending up the value of the textbox.
what is looks like as a string.
xhr.send("myEmail#example.com");
Second you have a race condition between the Ajax call and the window.location.href.
You need to wait for the response to come back before doing the redirection.
Basic idea:
var dataObj = {
fname : document.getElementById('fname').value,
phone : document.getElementById('phone').value,
pemail : document.getElementById('email').value
}
xhr.onreadystatechange = function() {
if (xhr.readyState>=3) {
window.location = 'http://localhost/myproject/test.php?eid=<?php echo $primary_email; ?>';
}
}
xhr.send(JSON.stringify(dataObj));
Ive been asking this question over and over many times in a bad way, so ill try to make it clearer.
I have a page with HTML that has an Attack and Restart Link on the page, the restart link appears after you win.
These links are JavaScript:
<script type="text/javascript">
<!--
function attack() {
window.location = "attack.php?attack=1";
}
function restart() {
window.location = "battle.php?id=1&status=start";
}
-->
</script>
I want to make it so that once the person has clicked one of these link, (using javascript) it gets the X/Y coords of where the clicked the link and inserts it into the database with the following values:
id
ip
username
x
y
restart
For the id, ip, username and restart I could easily use MYSQL and PHP, but I dont know how to insert Javascript information into the database, which would be the X/Y coords.
Using the Insterstellar_coder's X/Y javascript snippet, you could use javascript to make an ajax call to a php script. The ajax call would contain all the parameters as arguments and the php script on the server could get these arguments and do the database insertion.
Edition (20111016211256-0400): added files to show a solution (as far as I understand correctly the issue):
I've worked only the attack part. the restart part is similar.
No AJAX part was needed since I did piggyback on your attack and restart php files.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" charset="utf-8">
// get continous mouse move events and keep the coordinates in tempX and tempY
// stolen from http://javascript.internet.com/page-details/mouse-coordinates.html
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
return true;
}
var ip = "10.0.0.1";
var username = "me";
var id = "1";
function Coordinates(x,y) {
this.x = x;
this.y = y;
}
function attack(e) {
window.location = "attack.php?attack=1&x="+tempX+"&y="+tempY+"&ip="+ip+"&username="+username+"&id="+id;
}
function restart() {
window.location = "battle.php?id=1&status=start";
}
</script>
</head>
<body id="index" onload="">
<input type="button" name="attack" value="attack" id="attack" onClick="attack();">
<input type="button" name="restart" value="restart" id="restart" onClick="restart();">
</body>
</html>
attack.php
<?php
$METHOD = '_' . $_SERVER['REQUEST_METHOD'];
foreach ($$METHOD as $key => $value) {
$$key = $value;
}
$log = array("attack" => $attack, "x" => $x, "y" => $y, "ip" => $ip, "username" => $username, "id" => $id);
//print_r($log);
try {
// assuming you use mongodb locally
$m = new Mongo();
$db = $m->mydb;
$logs = $db->logs;
$logs->insert($log, true);
} catch (Exception $e) {
echo $e;
}
?>
You can get the pageX and pageY coordinates from the event object. Here is some rough code.
$('yourlinkid').click(function(e){
var x = e.pageX; // x coordinate
var y = e.pageY; // y coordinate
});
There's an epic library for this called Touché. It gives you a lot of information about the user interaction with the page (e.g clicking, dragging). You can also specify callbacks for AJAX purposes if you want to send data to the database or maybe do something else.
Here's the demo