I am building my server and client using node express.
I want my HTML file first(Which is done by express static automatically) then JSON file next so that JSON data is displayed on my html file well.
This is my file structure
- index.js
- public
|
- index.html
|
- front-end.js
index.js
const express = require('express');
const app = express();
const names = {...}
app.use(express.static('./public'));
app.get('/', (req, res) => {
return res.json({names});
})
front-end.js
axios.get('/')
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err);
})
index.html
<html>
...
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="front-end.js"></script>
</html>
But JSON data transferring part is not working. the only res I can get in axios is index.html file. It is done internally by express with static.
I looked through the document about express static options but found no clues yet.
Isn't there any other way that I can do while leaving express.static part? or Do I need to change the part?
A client (like a browser) makes an HTTP request. It then gets an HTTP response. A single HTTP response. You can't send multiple responses to a single request.
In this case, the browser makes a request for / and Express checks each route in turn until it finds a match. Since you have an index.html file in the directory you configured with static against / it serves that and never reaches app.get('/'.
That said, I have no idea what behaviour you expect from a single URL serving up both an HTML document and a JSON text. They are fundamentally very different things that get handled in very different ways.
Perhaps you want to make the data in the JSON text available to JavaScript running in the HTML document.
In that case:
give the endpoint handling the JSON a different path
use Ajax (e.g. with the axios library that you've loaded) to request that URL
use DOM manipulation to add the data to the document
Related
I have a large program written in C# using Visual Studio that is running as a standalone executable complete with an extensive GUI interface. We want to add a web interface to the program in order to get most, if not all of the functionality available.
The first step I took was to add a web server to the C# executable and I linked in some web pages (html and css) and I was able to present some data as a test case and this worked.
We decided that it would be better to treat the standalone executable like a database where we would prefer to send requests to the get data and post data to store data.
I'm using Node.js framework and Express as my webserver. I have a number of web pages designed and I'm using javascript and some embedded javascript to render data on some of the web pages.
The issue I'm having is how do I process a selected route on one of my webpages to force the the .js file that is processing the route to go out and access the executable program that is running on the same computer at this moment to both get and set data in the executable program and then present it back on the web page.
HTML code (test_data_02.ejs)
<input class="LSNButton1" type="button" style="color:black; background:green;" value="Test Button B" onclick="window.location.href = '/get_test_02b'" />
Javascript (Express) (main.js)
const { json } = require("express");
const express = require("express"),
app = express(),
fs = require("fs"),
homeController = require("./controllers/homeController"),
errorController = require("./controllers/errorController"),
data_entry_03 = require("./public/js/data_entry_03"),
layouts = require("express-ejs-layouts");
app.set("view engine", "ejs");
app.use(layouts);
app.use(express.static("public")); //tell the application to use the corresponding public folder to serve static files
app.use(express.urlencoded({ //assists in reading body contents, parse incoming requests in url format
extended: false
}));
app.use(express.json()); //assists in reading body contents, parse incoming requests in json format
app.set("port", process.env.PORT || 3000);
console.log("MAIN MAIN MAIN"); //this only happens once on start up - this file is only executed on startup, everything is configured on startup
//MIDDLEWARE CODE
app.use((req, res, next) => { //this is a generic middleware function that will be called before any route is processed
homeController.middleWareFunction(req, res); //process this function before moving on to next route that was selected
//console.log(req.query); //from the browser: http://localhost:3000?cart3&jack=5, this results in a request to /?cart=3&jack=5, how do i make a post for this
console.log(`request made to: ${req.url}`);
console.log("");
next();
})
//app.use("/general_data", homeController.readDataFile); //run this function for every request made to the path beginning with this route - it does not imply it is a middleware that will run on this route before the get
//GET ROUTE CODE
app.get("/", homeController.showHome); //a specific route has been identified and the callback function assoicated with the particular route is specified
app.get("/specific_data", homeController.showSpecificData);
app.get("/general_data", homeController.showGeneralData);
app.get("/get_test_02b", homeController.getTest02B);
More Javascript (homeController.js)
I was hoping somewhere in 'getTest02B' or in 'getTestData02B' I would be able to send or request data from the executable program somehow. Maybe using a URL. I would obviously need to add code to my executable to process the requests to either send or receive data. I would like to be able to process the data as JSON, XML, or text data in both directions. I just can't see the mechanism to perform this operation.
exports.getTest02B = (req, res) => {
console.log("in exports.getTest02B");
displayInformation(req.url, "URL");
displayInformation(req.method, "METHOD");
displayEmptyLine();
getTestData02B(function (err, data) {
if (err)
return res.send(err);
res.send(data);
});
};
One comment on this issue was that I needed to make a http request to the C#
program. I understand that Node.js allows several connections per server to
make HTTP requests.
I'm using the code below and it is not working.
const req = http.request('http://192.168.1.222/ListAlarms.html', (res) => {
console.log('STATUS:${res.statusCode}');
});
req.end;
When I run this code there appears to be no response from the C# program.
From the editing environment where I wrote the code above, if I select the URL and press CONTROL and CLICK I end up launching another browser with the data being displayed because the C# program is currently running. This implies to me that at least the URL in the http.request statement is good. Just to confirm the URL was working I ran the C# program in the debugger and I was able to break on receiving the URL. The URL is good but I just can't seem to access the C# program from the Node.js environment using the same URL. Obviously I'm doing something wrong.
I assume that once I'm able to generate a http.request from the Node.js environment I would be able to control the flow of data to and from the C# program.
Any input would be appreciated.
Im using (in the browser):
xmlHttp.open("POST", "/", true); // true for asynchronous
xmlHttp.send("data");
on the client side browser.
I'm using (node js):
app.post("/", function (req, res) {
console.log("Got a POST request");
console.log(req);
});
to get the post data. but it doesn't matter what I send it doesn't show up.
I don't wanna have to install some separate "body parser" package to see the data.... I don't wanna parse it. A post request is used to send data to the server... is the data just not there?
I don't wanna have to install some separate "body parser" package to see the data.... I don't wanna parse it.
Too bad.
Even if you want to process a plain text body then you need to use body parsing middleware to do it.
One of the responsibilities of the middleware is to take the stream of data from the client and store it in memory (assigning it to req.body) instead of discarding it.
Note that body parsing middleware is installed automatically as a dependency of Express.js itself.
There is no need for a separate body parser library. You can use express.json. It
is a built-in middleware function in Express. You can use it like:
app.use(express.json())
You can read more about it here.
I am wondering if there is any way at all that you can use a res object in node.js express to send data to the client but apart from is there a way to send the data from the res object DIRECTLY to the script tag on the client. The problem I have is that the only way I have been shown to send data to a client is by sending it directly to the HTML code of the client like this:
server side:
app.get("/", (req, res)=>
{
send_item = {new_client:true, user: null}
res.render("index", {send_item});
}
client side:
<%=send_item%>
I find this very inefficent and I wish there was a more simple way of just referencing the <%=send_item%> in javascript or even make the res.render send the data directly to the script area on the client-side in the <script> tags
Let me preface by saying that I have spent a considerable amount of time trying to figure out the solution to this problem but I have not discovered something that works. I am using node and want to share a variable between my app.js server file and a client side javascript file (demo.js).
I run node app.js to launch the server and demo.js runs in the client. I have tried using module.exports and export but when I try importing in the demo.js file or referring to the module.exports var I get errors. Maybe I'm approaching this is in the wrong way.
For example, I am trying to use the node wikipedia package to scrape data. I have the following in my app.js file:
var wikipedia = require('node-wikipedia');
wikipedia.page.data('Clifford_Brown', { content: true }, function(response) {
console.log(response);
export const response = response;
module.exports.data = response
});
In my demo.js file I have tried importing this response var and using the module.exports var but I have been unsuccessful.
Anyone have any solutions to this issue or different approaches I should take?
Browser javascript files run in the browser. node.js javascript files run on the server. You cannot directly export things from one to the other. They are on completely different computers in different locations.
It is very important for developers to understand the notion that server-side code runs on the server and client-side code runs on the browser. The two cannot directly call each other or reach the other's variables. Imagine your server is in a data center in Seattle and the browser is running on a computer in Venice.
See How to access session variables in the browser for your various choices described for a previous answer.
In a nutshell, you can have the server insert a javascript variable into the generated web page so that when the javascript runs in the web page on the browser, it can then access that variable in its own page. Or, you can create an Ajax call so the client can request data directly from the server. Or you can have the server put some data in a cookie which the Javascript in the browser can then access.
If the data is easily known by the server at the time the page is generated and you are using some sort of page template system, then it is very easy to just add a <script> tag to the generated page that defines one or more Javascript variables that contain the desired information. Then, the client-side Javascript can just refer to those variables to have access to the data.
To pass data in http there is a request message and response message and the data needs to be inside that message.
In the request you can either pass variables in the request URL
http://host_name/path?key=value
Or inside the request body or headers.
In the response you pass back variables in the response header or response body
First Example:
One way of processing a URL request from the browser explicitly while passing variables is to set up your server to render a html page with those variables embedded.
If you use a templating engine like jade, you can consume the sent variables directly into the template using res.render({ key: 'value' }) rather than using a promise based api call which would run when the user performs some action on the client.
For instance.
// SERVER setup rendering engine
app.get('/', function(req, res) {
res.render( 'index', { key: 'value' })
}
Which will render index.html to the client with the key-value pair passed to the template file used to serve up the index.html (for example jade or ejs).
Second Example:
Using axios you can set up an action to call a server api (you can also pass variables in the URL, headers or body). Using the promise pattern you can then use these variables after the server api has responded.
// CLIENT setup axios
axios.get(URL + '/getkeyvalue')
.then(function(response) {
const value = response.data.key
})
On you server using express you (this is where you would get the optional request variables mentioned above) send back response variables in the body like this.
// SERVER setup express
app.get('/getkeyvalue', function(req, res) {
res.send({ key: 'value' })
}
Note that these are simple examples.
They are too completely different systems. The best way to accomplish what you're trying to do is the create a variable in your html on the server side by stringifying your data
<script> var my_data = <%= JSON.stringify(data) %> </script>
Thats an example using ejs, a common templating language in expressjs
I have a node.js http application and i'm servicing GET requests ok. I can't however respond properly with requests for say foo.js?_param=1234. How do i deal correctly with files of this type where parameters are being passed?
EDIT:
I'm using express to service files as follows:
app.get('/*', function(req, res) {
res.sendfile(__application+req.url, {root: __root});
});
__root is the root path of the application.
Use request.url, it will look like /foo.js?_param=123.
Then use require('url').parse(url,true) to split this into meaningful parts (true is to also expand individual query string parameters).
See http://nodejs.org/api/http.html#http_request_url for details.
Try using the express module.
They have a whole API for dealing with GET and POST requests.
You can use req.query to handle the get requests.