Alright, so I'm trying to write a little app that creates a temporary webpage (kinda) and I can't figure out what it is that needs to happen for this to work exactly.
Let me explain what I'm trying to do and that should help. Basically, I want to have app.com and when a user goes there there's a button like "Make temp page" or something. Click that and then it makes a random URL extension and puts the visitor there, so something like app.com/admin/xxyy12. Now the user can give the URL app.com/xxyy12 to someone and they can navigate there and send data back and forth between each other, my thinking was via WebSockets. So I want the person that made the link to be an admin of sorts and when they leave that "admin" page I want it and app.com/xxyy12 to self destruct basically, no one can go there and that route doesn't exist anymore.
Is this possible and what technologies should I look into to accomplish this? I thought it would be cool to do this all in-browser with no server, which kills some security but I don't really care about that. I'm not really sure how to create these "temporary" pages either. I figured WebSockets would come in handy to send data between the person that created the link and the client visiting it, and I figured the main page app.com would need a socket to the user at app.com/admin/xxyy12 to determine when it disconnects. Also, I considered html parameters to basically make a "temporary" URL that would just read the param and then that would wire the client to the URL creator. There would also need to be a way of storing what active temporary pages exist.
I recognize that this question is rather vague but I suppose I'm just looking for ideas of how to accomplish this and what technologies would be recommended. Thanks for any and all help.
This should be easy to implement.
I would use:
Node.js on the server with
express.js and maybe socket.io if needed
In express:
create routes to serve pages
app.get('/', function(req, res){
//render homepage here
});
app.post('/', function(req,res){
// handle creating temp pages here and
// redirect client to that page
// save ID of the page to db
});
app.get('/:pageId', function(req,res){
// handle rendering the temp page by ID
});
app.post('/destroy', function(req,res){
// remove page from db
});
You could post from client on javascript unload message i think, so maybe no need for websockets but im not sure how reliable that is
I hope this helps
I figured out how to get what I wanted. I basically make a random string and add it to the end of the url with a '#' at the beginning. Then I can use location.hash.substring to pull off the random string. This string acts as "unique" identifier to connect peers together.
Related
I have the following problem: I want to change one variable on a page. The input comes from another page so:
I'm using Node.js, Express.js and Ejs for this task.
Server - storing the values
Index page - Control page with input fields and send button
Display page - Shows the variable
I'm sending the variable with fetch post to the server. On the server I change the variable with the request body value and when I reload the "Display page" manually I see the new value. The problem is: I need to change it without any manual refresh or other things, because that won't be possible.
There is the possibility with "location.reload()" to refresh it every X second. But that's not the way I want to use, I really just want to refresh it when the variable changes. Is there a function (from express.js for example) I can use for it?
edit: I should mention that this project would be just used in our network and its not open for other users. Like an in-house company dashboard kind of.
So a "quick and dirty" solution can work too, but I want to learn something and wanted to do it the right way though.
This is a very common scenario that has several solutions:
Polling - The display page runs ajax calls in a loop every N seconds asking the server for the lastest version of the variable. This is simple to implement, is very common, and perfectly acceptable. However, it is a little outdated, and there are more modern and efficient methods. I suggest you try this first, and move on to others only as needed.
WebSockets - WebSockets maintain a connection between the client and server. This allows the server to send messages to the client application if/when needed. These are a little more complex to setup than just plain ajax calls, but if you have a lot of messages getting sent back and forth they are much more efficient.
WebRTC - This is taking it to another level, and is certainly overkill for your use case. WebRTC allows direct messaging between clients. It is more complicated to configure than WebSockets and is primarily intended for streaming audio or video between clients. It can however send simple text messages as well. Technically, if you want to persist the message on the server, then this is not suitable at all, but it's worth a mention to give a complete picture of what's available.
The simplest solution that came to mind is to have the server return the updated post in the body, then use that to update the page.
You can also read about long/short polling and Websockets.
One possible solution would be to add page reload code after a successful post-operation with fetch.
fetch(url, {
method: 'post',
body: body
}).then(function(response) {
return response.json();
}).then((data) => {
// refresh page here
window.location.replace(url);
});
Proper solution (WebSockets):
Add WebSocket server as a part of your Node.JS app
Implement subscriptions for the WebSocket, implement function 'state changed'.
subscribe on a method 'state changed' from your client browser app.
call ws server from your express app to update the clients when your variable is changed
Outdated (Polling):
Add express endpoint route: 'variable-state' Call server from your
client every n ms and check whether variable state is changed.
Refresh the page if variable is changed.
For my site, the user uploads 2 files, the site redirects, and I generate a video file that the user can play. What should the URL for the site that's being redirected to look like, and what method would you recommend I use to generate a unique URL?
This has something to do with encoding and decoding I believe, but I'm not sure what as I haven't really delved into this.
Not sure i fully understand this question, but here goes an anwser.
It can look like however you want - could be www.foo.com/videos/?v=12345, or www.foo.com/videos/12345, etc..you decide/config.
As for how to create this, i suggest an npm package like
https://www.npmjs.com/package/short-unique-id
https://www.npmjs.com/package/unique-string
as long as it's url-safe.
If you're waiting til database insertion is done in the backend, just get the unique id (which i'm assuming you're doing) you generated in the back end, then redirect.
This seems to be a Noob question, but still i dont know how to go about with this.
Im using node js for my server side development and recently came across SEO friendly URLs.
How do i rewrite the URLS which are something like www.abc.com/meet_team.html to
www.abc.com/meet-the-team/
One answer would be to use controllers and to route to html pages. This works fine for static web pages.
My problem is with dynamic data. To quote an example, Lets say, yts.ag page has movies stored in the db and it gets retrieved and the url changes dynamically.
For example : www.yts.ag/movies/the-revenant - > This would pick up details about the movie revenant. If the change it to movies/the-dark-knight, it would do so accordingly. Here movies would be the controller, In my Node code, i would handle it something like this.
app.get('/:controller/:movieName', func(req, res){
// get controller and movie name from req object and query from DB and respond back.
})
Now the problem is, i would have stored the name of movie as "The Revenant" in the DB. I would be getting the movie name from the GET request as "the-revenant". How do i query this from the database?
Should i parse the param first? strip the hyphen and then pass it to the DB or any other solution?
Please help me on this. I dont know whether this is the right approach.
Thanks in advance.
It is as you describe. Now you have to retrieve the movie from the slug reference.
Look for mongo or mysql
I am interested in having a route that could respond to a request with a file eg express's res.sendFile() based on the URL's base parameter i.e. www.example.com/:parameter. The problem is that the URLs are completely user generated and completely dynamic. Similar to that of Github, www.github.com/username could render a user's profile or www.github.com/project could render a project—but they are both strings that don't have a pattern and the machine has no way of knowing that www.github.com/username refers to a user view unless it does some type of check.
app.all('/*', function(req, res) {
res.sendfile('index.html', { root: config.server.distFolder });
Github responds to server requests with different views based on the parameter, even though they have no predefined pattern.
i.e. it would be easy to know that www.github.com/user/username is a user route and the server can respond with a user view (the pattern to match would be www.github.com/user/:user But when the string is completely dynamic it becomes more difficult. (How does express know if it should respond with a user or a project view with a url like example.com/cococola)?
I believe you would somehow be able to check the URL parameter, understand that it refers to (in this case) either a project or a user's page, and then render that view. How do you do this without making a synchronous call and forcing the user to wait for the server to check what view-type the parameter string refers to before responding?
I'm using angular, are there other ways to respond to server requests with different pages based on URL's that have no predeterminable matching pattern? The reason being that, I would like to separate my site into many different apps. www.example.com/username might require a user's profile SPA, whereas www.example.com/projectname might require a user's project SPA—but, as these are user defined, there is no way to respond based on the parameter's matching pattern. Would like to keep the URL as minimal as possible :-)
Any help is appreciated. Thanks :-)
Just use a database / some kind of key value store where the key is the url parameter and the value is the view type. Then you just need to do a simple lookup.
I have the following things I want to accomplish. In the end I feel it is just a simple thing but I can't get my mind wrapped around it architecture-wise.
I have a simple NodeJS Express server that serves an AngularJS frontend via
this.app.use(
express.static(__dirname + '/' + settings.env)
);
Now I have some API Endpoints that are supposed to be at least of RESTful path-naming. I have AJAX Calls to them on some button clicks on the Front-End.
Let's say one Button is to load and view a list of "Loans"(Whatever this might be): GET /loans.
The Angular frontend reacts on and writes links like this: /#/loans
That was Question Part 1: Why is this? And more importantly: Is it common practice to keep it like that?
Now I am also sending out e-mails that have Buttons in them that the receiver can click.
Right now I cannot remind anymore why I wanted this, but it made sense when I decided to.
I want to be able to request GET /loans as path on that button click in the e-mail and have the Express routing decide whether to run logic and return a json or to "reroute" to angular to render the page.
That was Question Part 2: Is this something I should or should not want to accomplish? And if I still want to accomplish it what would be the best way?
I'll have another shot on the 2nd Part in Short:
I want to decide depending on the Accept-Header whether to return a json or to "reroute" to static files.