I am looking at Websockets within a Spring application. Without going into detail of what I have written, I would like to know if what I want to do is possible and if it is sensible. They can be different.
So using the Spring guide - Using WebSocket to build an interactive web application - as a base, I wnated to have a form that takes a message (breaking news) and for other pages within the application that have subscribed to the feed to receive that breaking news.
I used Vue js for the javascript (which is not used by the guide).
The result is that though the message is displayed immediately in the form page before the submit (due to using v-model in vue), the breaking news is not shown on the other pages, though they appear to have subscribed (looking at the console output).
But the key questions are - is this possible / sensible?
Regards
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.
I am creating a social dashboard which has a side chat bar. i am using Springboot to render pure HTML pages with JQuery and Ajax calls. I want to know is it possible to have the side chat menu remain fixed while performing view controller changes since it is not a SPA (Single page application) like Facebook.
Yes It is possible. You can use different techniques like long polling or websocket (preferable) to achieve this usecase. As far as presentation goes, Jquery will help you to achieve this.
I am working on a project which is built on Springs MVC and Google App Engine with Objectify.
The major functionality of this app is: If someone posts something new to the Datastore then it should be auto published to the browsers to which it is connected without refreshing the page content. Basically it is a news like site. The data sent to browser is REST APIs based JSON Data.
For implementing this functionality I thought of using the following ways:
AJAX : I thought of using AJAX call in every 2-3 minutes to get updated. But this solution doesn't seems to be feasible as there are many datastore read operation due to many AJAX calls from many browsers.
Web Socket : This concept is pretty new to me. I am not aware of this thing. Some pusher.com uses this technology for establishing such connections.
Now I need your suggestions, using which of the two above or I am also open to other solutions.
Google app engine does not support web sockets, however it supports something similiar called the channel api which works on older browsers as well. This may not be feasible depending on how many people you will have connected (channels cost 1c per 100). Channels also have some caveats: https://developers.google.com/appengine/docs/python/channel/overview#Caveats
As for using Ajax - if you cache the response in memcache and flush the key every 3 minutes then you won't be doing any data store reads unless a new instance is fired up or the key expires.
What is the difference between all three? They seem to do the exact same thing. Why and when would you choose to use one method over the other?
AJAX and websockets do similar tasks — they both establish a communication channel to a server. Web workers have nothing to do with either of them, they are just separate threads of JS execution.
AJAX is more mature than websockets — it has been around much longer and has a much wider browser support. AJAX is request-oriented — you make a request to the server, the server responds, and the connection is closed. Websockets on the other hand establish a persistent connection to the server, over which you exchange multiple messages in both directions.
Webworkers are useful if you want to perform a processor intensive task without blocking the browser interface.
They are not same. But one can use them together to build advanced application.
Ajax: As abbrevation States is asynchronous javascript and xml.. is used to load the content dynamically from the server upon called.
Websockets : Websockets is the feature defined in HTML5 . As wikipedia states "WebSocket is a protocol providing full-duplex communications channels over a single TCP connection." so this is mainly used for real time communication such as video call, live chat etc..
WebWorkers : this feature is also defined in HTML5. This is basically used to make bring multi threading feature in Javascript. Since javascript is a single threaded programming language , it breaks or pause whenever i.e heavy calculation tasks are done using it. to overcome this breakage , Webworkers are added to javascript.
You can perform Ajax and Websockets inside Webworkers . however you cannot manipulate DOM using webworkers due to security reasons.
They are not the same.
Ajax: It is a way of interacting with a web server asynchronously from a UI renderer
Web Sockets: An HTML5 feature using which you can interact with any Socket server extending the reach of the browser
Web Workers : Another HTML5 feature that helps you do multi-threaded programming from a web browser using Java Script
Ajax & Websockers are siblings.
Webworkers are completely different.
AJAX
The best example of AJAX is Google's search bar - suggestions appear as you type, but the current webpage is not redirected or refreshed! (10 years ago this was amazing, not so much anymore). This is AJAX in action.
AJAX uses what's called a "request" and "response" model: you ask a question, and you receive an answer from the 'server'.
AJAX allows webpages to talk to "servers" behind the scenes, allowing you to update a webpage without navigating away from your URL. Back in the old days of the web, if you wanted to show different content on a webpage, users would have to navigate to a different URL: not any more. This concept has been taken to the next level with single page apps and applications (like React, Vue, Elm etc.).
Websockets:
With websockets, your web-page talks to your server (as with Ajax), and your server responds - except you do so like you're talking on the phone. There is a "connection" between your users and your server. This "connection" is not there with AJAX: in that case, you have a simple request and a response coming back from the server.
In other words, if you wanted to stream stock market data, constantly updating it to your users: it would probably be better to use websockets, than AJAX.
Web-workers:
Use When you need intensive calculations - if you were to ask a web-page to calculate Pi to 100000 decimal places: that might take a while. The web-page might freeze, and you might lose $$. The intensive calculations can be done in the background, without freezing your webpage. People using your site can do other things - e.g. click around, while waiting for the result in the meantime.
WP7 newbie here..
In my application, I am using embedded web browser control to load an external web page.
I have a PIN based validation step in that application, which involves
1) User Leaving the current application, (which has a external web page loaded in the embedded web browser) to launch the SMS Inbox.
2) User reads the SMS he just received, which has the PIN. I am sending this SMS to the user.
3) The User then needs to resume back to the original application by hitting back button, to enter the PIN which he received in the SMS earlier.
Once user enters Step2, my application will go into background, and subsequently will get tombstoned. Once user enter Step3, I want to restore application state (with the embedded web browser control), without making a fresh HTTP request again to load the web page.
So, with the given scenario in my mind, I have following two questions -
1) Is there a better way to do all this, like not having to exit the original application, and still let user read the SMS. ( i.e any api to read sms ?)
2) Is there a way to serialize the browser state/save entire web page (with images, css, js) , such that entire web page can be rendered exactly the way it was, when user left the running application.
Important points:
1) I can only use SMS as a communication channel. I can not use something like raw push notification channel, which could let me show PIN to the user, without exiting the application.
2) I am targeting Windows phone 7.0 runtime, but if there is a better option available in Windows Mango update, please do tell me.
Any sort of help is greatly appreciated.
Update:
Added link to the embedded web browser component.
1) There is no API that would let you access the contents of the Messaging hub from inside your application. This is set up for privacy purposes.
2) By default, the web browser saves its state. So if you navigate away from your app, and then come back - the same web page will still be there unless you explicitly re-navigate on activation
1) The better way to do this would be to not embed the web page within an app. Just build a mobile website. If all the functionality is within the web page you gain nothing but problems by trying to put it inside an app.
The web browser control is not intended to be used to create an alternative browser (which is really what you're doing).
2) You can try using the SaveToString() method to store the state of the page when tombstoned but this doesn't allow for modifications to the page since it was loaded (including anything dynamically updated or any state in javascript). If you have multiple pages you'll also need to maintain the internal backstack and the state of each page separately.
Short answer: If you want to put your application logic in a webBrowser control then you can't support tombstoning. Fast-App-Switching (in Mango) partially addresses this but not completely.