I made a nodejs application that starts from index.js.
Then, index.js launches puppeteer and injects bot.js on a headless-api page by addscripttag function.
I made index.js sets a cookie for conveying initial values before injecting javascript, but I need more common way to exchange data.
I thought two ways; the first is using cookie, and the second is networking via socket connection.
Is there other way for send and receive data between index.js(node) and puppeteer(headless chrome)?
First, puppeteer IS nodejs side application, so they have a single environment and you don't need to "send" anything. Just pass data around as you'd do in any other JS code. I assume you want to transfer data between page and nodejs then.
To pass data from nodejs to page use page.evaluate. You can call any code in page context, ranging from simply setting some variables to directly calling whatever functions with necessary arguments.
To initiate transfer from page side to nodejs, first register a nodejs-side callback function with page.exposeFunction and then call it from page code and it will be executed in nodejs context. Just like in previous case, everything else depends on code of that function. It can be as simple as storing whatever argument you pass to it in some variable or directly perform with data pretty much whatever you want.
Related
I am writing my first web application with Javascript and WebGL. For now I am running the app on localhost from Apache. The app needs to work with data that is provided instantly. Until now I worked with AJAX calls that happen during runtime which doesn't work out for my purposes anymore. So instead of serving individual files from Server to Client when asked, I want the application to load all files from the Server to Client side at initialization time (I want this to happen automatically at the start so I don't have to add every new file as a url in the html index). I understand I should do this with Server Side scripting; probably with PHP since I have a Apache localhost? I have different folders which hold my necessary resources in a uniform dataformat (.txt, .png and .json). So what I want to do is, before the Javascript app starts, look through the folder and send one object per folder that holds filenames as keys bound to filedata. Is my intuition right that I need to do that with PHP? If yes, where do I start to tell my application what to do when (first start serving files with php, then start the javascript app)? How do I do this on localhost? Should I already think about extending my toolset (e.g. using nodeJS on ServerSide(locally for now))? If so what lightweight tools do you propose for this kind of work? I feel I am missing some design principles here.
EDIT:
Keep in mind that I don't want to specifically call a single file... I am already doing that. What I need is a script that automatically serves all the files of a certain folder on the server to the client side at init time of the app before the program logic of the actual application starts.
Your question is kind of broad so I'll try my best. Why does AJAX not work for real-time data but loading all the files once does? If you're working with real time data, why not look into a websocket or at the bare minimum, AJAX queries?
If you want to pass data from the server to the client, you will need to use a HTTP request no matter what. A GET request or POST request is necessary for the client to request data from the server and receive it as a response.
You could theoretically just pass the data from PHP straight to the view of the application (which is technically done through a GET request whenever a user requests data such as .php files from the server) but this isn't as flexible as if Javascript had access to the data. You can do some hacks and 'transfer' the data from the view to Javascript with some .value methods, but this isn't ideal and can be prone to some security holes. This also means data is only being passed once.
So what would need to happen is that the data would need to be processed upon initialization and then immediately transferred to the client by use of Javascript and HTTP requests.
So if you want Javascript to have access to the data and use it in variables or manipulate it further, then you'd need to use an HTTP request such as GET or POST which is called by Javascript. Otherwise, you need to immediately pass the data to the view upon initialization (through PHP), but this means you can't work with real-time data because the data is only being passed once when there is a page refresh.
Example of scandir():
<?php
//scandir() returns filenames, not data from files
$fileArray = scandir('datafolder/') //this is a relative path reference to the folder 'datafolder'
$finalArray = [];
foreach($fileArray as $filename){
tempArray = [];
$file = fopen('datafolder/' . $filename, 'r'); //im pretty sure scandir only retrieves the filenames and not the path, so you might need to append the filepath so your script knows where to look
$tempArray = fgetcsv($file, 1024); //temp array to hold contents of each iteration of foreach loop
array_push($finalArray, $tempArray); //this will store the data for later use
}
Or the data can be used however, depending on what it is. Say, if you need to combine the data from multiple .csv files, you can read each file and append it to a single array. If you want to read multiple distinct files and preserve the independence of each file, you can create multiple arrays and then pass back a single JSON encoded object that contains each file's data as a separate attribute of the object such as:
{
'dataOne': [0,1,2,3,4,5,6...],
'dataTwo': ['new', 'burger', 'milkshake'],
'dataThree': ['Mary', 'Joe', 'Pam', 'Eric']
}
Which can be created with a PHP associative array using one of the following methods:
//assuming $arrayOne is already assigned from reading a file and storing its contents within $arrayOne
$data['dataOne'] = $arrayOne;
// or
array_push($data['dataTwo'], $arrayTwo);
// or
array_push($data, [
'dataThree' => ['Mary', 'Joe', 'Pam', 'Eric']
]);
Then $data can simply be passed back which is a single array containing all the different sets of data, if each set needs to be distinct.
I'm trying to using server-side render for my React web application (redux + react-router).
Server returned rendered HTML properly with API call on the server side.
But when browser receives the HTML document, it recalls API second time.
So it makes API call twice: 1 on server and 1 on the client with same result data.
Why client recall the API and How to avoid that duplicate call?
Check if the html returned contains script which calls the server. If that's the case, you have to either:
Modify this call to receive this piece of data in an asynchronous way, so the page doesn't get reloaded
Modify the returned HTML page, so it doesn't execute any further calls
It's a bit hard to speculate without an example
I recently wrote a PHP wrapper class for a new API we are using and have been asked to setup a demo which makes use of it. Certain features can be called directly from PHP, however things such as performing actions on button clicks requires I make use of JS/AJAX.
As I already have an instance of the object in my main PHP file, can I pass this as a parameter to JS and then pass it through Ajax to my handler or is it necessary to establish two separate instances?
The closest thing to doing what you want that I can think of would be copying the PHP object to a JavaScript variable via json_encode and then passing that variable back to your PHP code during the AJAX event via the data parameter. PHP code doesn't persist in the way that you seem to be describing - once a page has been requested by a browser, your PHP code for that page is done, there are no variables persisted by the server after that point.
I am programming a php page for controlling a serial port using some in-screen-buttons. When I press a button, this sends some data through the serial port and it shows its response. All this is working OK.
Now, I need to listen continuously the serial port in order to receive data that I haven't ask for. I'm trying to do it with a timer in javascript, but every time I execute the PHP code through AJAX, serial port is restarted and its buffer is flushed. I need to pass the object that controls the serial port to the javascript code before finish the execution of the PHP code. And when pressing a button, I need to pass this object to the new PHP code.
How can I do this?
Thanks a lot
First create a global js variable in your code.
When you first make ajax call then store response in your js variable.
so everytime you need to pass that global js variable through ajax.
You can make window level js global variable using
window.myVariable="";
make sure to define this variable before sending any js request
Check out: http://php.net/manual/en/language.oop5.serialization.php
You should pass the serialized object or, to keep the Serial Object alive between sessions, store it in a text file. On the AJAX end, store it as a Global [WINDOW] variable. Such as
window.serialphpobject = data;
then on the next AJAX call use this data
{object: window.serialphpobject}
All for example obviously, without seeing your code I cannot fit it exactly.
I need to pass the object that controls the serial port to the javascript code before finish the execution of the PHP code. And when pressing a button, I need to pass this object to the new PHP code.
This solution would be vulnerable. You should keep the information in a PHP session.
http://php.net/manual/en/session.examples.basic.php
I've found that this is imposible to be done: when the PHP code finish its execution, the serial port is closed automatically, so I lost all the data received untill I open the port again.
Background:
I am using node.js and a module called scrap (with jQuery) to screen scrape a website and display some of its information on my own website
To do this, I am making a JSON of data available at a certain path in my website so that the client can retrieve the information when they load the client-side javascript
I am exporting a variable in the JSON called isLoaded that will be true if the server has finished loading all of the data for the json
Problem:
Since scrap and jquery make asynchronous calls and load them into the data variable that is sent with the JSON, all of the information might not be included in the JSON just yet
This is fine most of the time, but take for instance the example when I access the page that loads that data and the server is still populating the data that is exported with the JSON object
This essentially requires the client to refresh the page until all of the data is loaded.
Question:
Is there a way to continuously call $http.get(...path...) inside the client-side javascript until the variable 'isLoaded' returns true?
Note:
I have already tried a loop but for some reason the loop can't get new data once it's running. Also, I have tried to the best of my ability to find an answer on Google with no luck. If anyone could point me in the right direction, I would appreciate it.