In Scala's Liftweb there are some classes which allow for Javascript to be pushed to the browser via comet/ajax after the page has loaded. Some documentation here.
The usage could be for example when someone submits a form to the server, the form would submit via AJAX and then some Javascript can be sent from the server to the client to show some error message. Well this is just for example, there are better ways to do form validation.
Is there any way to push Javascript from the NodeJS server to the client to do updates? Any standard way to do this? Why I want to do this is that its nicer to have all client and server code located in one server file.
Also as a secondary question, can I access the page data from the server side? It would be nice to be able to query a page element from the server side or query some page data from the server side.
You can build this functionality into socket.io, either by predefining functions based on dynamic objects that are sent bi-directionally, or by building a system which will parse and run javascript from both sides. Depending on what you are trying to do it might take a while to get that working for you securely (not just throwing everything in eval());
http://socket.io/
Alternatively there is a library built on node.js that has this functionality built in. I have not personally used it so I can't attest to the reliability or security of the system, but it should be a good place to start.
http://www.nowjs.com/
https://github.com/Flotype/now
Hope this helps!
Related
I want to develop my own single page web application (SPA) to get to grips with the modern and highly fluid world of web development. At the same time, I would like to use the page rendering technology (SSR) with built in data into html. However, there is an authorization problem.
Suppose that the user has already logged into the account before, as I imagine re-opening the site:
First request: the client makes a request to the frontend server along with identification and authorization data (for example, user id and token; the only option is to save them in cookies), the frontend server makes a request to the api server, transferring these service data, then the api server gives the information about the user and the content of the current page (in the same json), the frontend server renders this into a finished page and delivers it to the client.
Subsequent requests: the client directly addresses the api server, transferring the same (or updated after the first request) authorization data, receives json and processes it independently.
Actually, I want to move on to the question. Do I understand this interaction correctly? Can you do it differently / better? Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests? Or a unified tool that includes the same coding for the frontend and backend to solve these problems? I will say right away that I would not like to write a backend in JS.
I can roughly imagine how you can get by with one request when using AngularJS (with a module for single page applications) and any backend MVC framework; although there will not be a full-fledged render, but search robots will not have to wait for my first fetch, since the data will be delivered initially, for example, through the data attribute. But in this case, I plan to choose Svelte (Sapper) and Ruby on Rails as the stack, although I think this is not important.
Thank you for your attention to the question!
Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests?
If that's what you want you can install a frontend framework in Rails using webpacker. After that you will have a folder in your rails project that will contain your Svelte components. Then you import Svelte components in erb templates and pass data as props.
I have tried that approach but personally I prefer a separate frontend and backend talking through API calls. Then in your frontend you need something like Sapper if you need SSR. With webpacker you don't(assuming you mostly use Rails for routing).
If you are worried about authorization it's not really hard to implement. And after login you can store user info on local storage for instance for subsequent requests. But of course if you install with webpacker it's all done within Rails hence it's easier.
From my experience, using webpacker it's easy and quick in the beginning but you are more likely to get headaches in the future. With separate backend and frontend takes a bit more work, especially in the beginning, but it's smoother in the long run.
This helped me set the authentication between rails api and vue frontend.
So, if you wish to separate them, just install Rails as API only and I suggest you to use Jbuilder to build your jsons and serve them to the frontend as you need them.
in my Laravel 5.7/mysql app I need to make external api to read some data from external
app with get request and to write some data to my db with post request.
Which tools/scripts are there for this and how to make these requests safe?
MODIFIED :
Thanks for feedbacks, but looks like I badly put my question
The external app(I do not know what is it written with) need to read data from my app
and write data to my Laravel 5 app.
And how have I to test these requests while on development locally ?
Looks like I have to use Guzzle as in provided link?
Which steps have I to take for safety on my side?
Thanks!
These three libraries are popular for your use-case:
Guzzle
Curl
zttp
If the database is local you can use Eloquent, If not, remote connection to that database may help. otherwise, if you only have API access you should consume eighter of above libraries or any alternative options to make an HTTP request your application might require.
Security-wise, as long as you are only making a request to a remote server, the Suggested way is to store any key or secret string related to authorizing your request (if applicable) in your .env to prevent it from committed to your version control systems. Needless to say to always handle any possible HTTP error your remote API might throw in order to prevent any unwanted error on your application side.
And as Abir Adak mentioned in the comment check this thread for further details.
Updated Answer: On the case of MODIFIED part, generally you have 3 popular options,
REST API
This blog post is a detailed walkthrough written for Laravel
This one from Stack Overflow can help you with designing you API
This last one can help you to develop a widely accepted API response and endpoints by following its specifications.
GraphQL
Can save some time for developing your API, but I suggest to make sure that the consumers of your API are happy to use this option.
GraphQ
Laravel Package for GraphQL
If using Laravel isn't a must, and you are using PostgreSQL, you might want to look at Hasura as well.
SOAP
Have little knowledge on this option for Laravel, just know folks coding using C# and .net are happier to expose their API with this protocol. read more about it on WikiPedia
Postman is a great tool for testing your API or any other API.
The webpage Template loads data via some json data we get from the endpoint.
I have a Rest Api and a Angular Front end . The Angular app populates the template from the data coming in from the rest api which we can see in the Network Tab of Chrome Developer Tools.
Is there any way we can modify the Rest data in Network tab and see the changes that occurs in the Webpage.
Is that even possible, It might sound a stupid question but i guess this might be a very special tool if there is not much interaction between the Back end and Front end teams.
I am not quite sure if i am able to explain it properly but this was the best i could edit please bear with me thanks
Just a Screen Shot of the type of data in Network tab.
Sample Data Network Tab
It is not possible from chrome's network tab. You have to use BurpSuite for example which is available in Kali linux as a default. With that you can intercept http requests and responses and modify it's payload.
You can get it from here: https://portswigger.net/burp/
No, you're not able to modify XHR data as you can other sources. What I do is just copy the file to my local drive and temporarily modify it's source. I test responses from API's using Postman and it's pretty awesome.
I have to say I'm a little bit afraid for you though. It's not a great idea to be consuming services from external api's from the client side. Are your API keys and passwords hanging out in that client side code somewhere?
My single page app is hosted on Google's cloudstore. I love that I don't have to worry about a server. The app is, naturally, javascript heavy.
Now I would like to add a feature where users can store some data, generate a link to be shared with others and retrieve stored data. Think of a pastebin where some snippet of text is saved and a unique link is generated to be shared with others.
In fact, if it helps, think of this as my attempt to create a pastebin without having to setup a server.
It looks like Google's cloud datastore nosql solution is what I want. Given a key, it will return a snippet of text. However, all the examples on the documentation page imply that I have to setup a back end service using python, node, etc.
Questions:
Can't I just read and write from a web page, perhaps using ajax style http call (since I need to get and put text snippets once data has already been loaded)? I believe I can take care of cross-origin issues by changing some configs in the cloudstore static website server.
Obviously I don't want to serve any encryption keys from the web page. I'm hoping that since my site is served from Google as well, I can configure the nosql service handle permissions intelligently for this scenario.
Is there any documentation which shows how to do this correctly?
Google Datastore is not supposed to be used from client side, it's a served side database. You cannot do that w/o having server side code to authenticate, authorize and validate db related requests.
But there're an alternative. Firebase is a ready to use backend for client side applications, including Javascript apps. It's a separate project, that belongs to Google but not (yet?) part of Google Cloud. Take a look - https://www.firebase.com/
Although the API Rest is still beta, it is possible now to connect from a web client or anything RESTful capabilities. https://cloud.google.com/datastore/reference/rest/
I have found very little on this topic. I'm trying to work out a way to synchronize pages cross-web without having to constantly reload pages to get new information, since the rate at which this would be necessary would cause the page to be outrageously slow.
The flow I'm thinking is this:
User A alters info displayed on Page A.
Page A sends info to server.
Page B checks server for new info every 10ms or 100ms.
Page B loads Page A's new info.
I can see AJAX as being sufficiently fast to retrieve info from the server, but have found no way to send data to a server without having to refresh every 10ms, which, even using an iframe to avoid reloading the whole page, seems far too slow to me. Correct me if I'm wrong.
So my question is, is there any way of which I am unaware to do what I am attempting? I have seen methods involving a Java server applet, but that's a bit above my head at the moment. If that's the only way, I'll learn it, but I'd love to avoid that if possible.
There are two possible interpretations of what you wrote, the first which seems to be what you've actually said is that you want to know how to send data with an Ajax request, the second is that you want to know how to push unsolicited data from the server to the client.
Ajax can easily add data to a request it makes - just add query-string parameters, or make a POST request and use XHR's send method
Use comet - i.e. keep open a long-lived connection and send data only when there is something to send.
One of the possible way to implement what you want is to use Comet technology. For example - facebook uses it to interact with their servers.
If you are retrieving info fast using AJAX, then you are also sending info fast with AJAX...
GET requests are still telling the server something. For example, lookup RESTful web-services.
You could use updater of Prototype.