Can NUXT3 observe the values of server variables in real time? - vue.js

I'm a developer who just started NUXT3.
Is the following scenario possible using NUXT3 and related modules?
An integer variable exists on the server.
The screen of the customer accessing the web page displays the current value of the variable.
Each customer can increase the value of that variable by 1 through the button.
At this point, the value should be automatically updated on the screen of all connected customers.
I know Vue.js and Websocket very well, so I've already implemented these programs using both.
But websocket is too cumbersome.
All customers must be managed in a clientList array.
Every time a variable changes, data must be sent to every time customers.
If the customer's phone's network is unstable and the connection is disconnected for a while, they should also handle the error during that time.
But nuxt 3 is a server-side rendering platform!
I feel like what I want is possible.
Or, even if it's not a web socket or socket.io, is there a good replacement for this real-time communication?

Once you have your SPA hydrated, there is no way to re-render on the server without nuking all of it with a hard refresh. So yeah, websockets are probably the best way but others solutions exist too: https://stackoverflow.com/a/74405860/8816585
Those tools are meant for that and work well so use them.

Related

How to refresh vue.js application automatically as soon as sql table data has changed?

I want to show different kind of notes in my vue.js application to inform the user for example about an upcoming maintenance. I thought at an info "banner" under the application header. The data like period of the maintenance I would store in a sql database. In this database I want to regular when the banner should be visible or even not. Maybe with a table column called active.
Now I am looking for a solution how to trigger the vue.js application to refresh if data in database was added/updated.
Can someone help me please?
Are there any other ideas (maybe more professional ideas) how to trigger a note "banner" in a vue.js application?
The application will be hosted in Azure.
Thanks in advance!
Anatoly answer is right, those are your two options. You either make a request to your backend service every couple of minutes(depends how fast this info is changing) or you implement a web socket that will let your frontend now when the info has changed. It depends on how big is the app and what use you're going to give it, personally, in a scenario like this i would go with a web socket.
Here you have a nice library i've used in the past: https://www.npmjs.com/package/vue-socket.io . You will also need to make some implementation in your backend service to handle the info gathering.

What is the point of using /api/v1/(whatever route here) in express?

Ive been making API's for about a year now and I was taught to use http://IPAddress:Port/api/v1 all the time when building an API with express.js. Is there a specific reason I would want to do that? Is this just denoting that the API is in development? Ive recently changed my API to not run on port 3000 so that I am able to just say http://IPAddress.com/ instead of http://IPAddress.com:3000/api/v1 and it works just fine the new way.
One main reason for versioning an API is because it may be that an API can be improved upon but doing so might lead to breaking changes (for example, it might not work for applications that are consuming the API because an endpoint has been modified).
So, the solution to this is to allow consumers of the current API (v1) to keep using it until they want to switch, and release an updated version (v2) for new consumers.
Here's some more info on it: https://restfulapi.net/versioning/

Securely set date that user can't manipulate react-native

Building a simple application which restricts usage based on the date. For example, you can only view a page 3 times per day.
However, if I use the device time, users can change their time and then view these pages again.
Is there another best practice method of doing so? Trying to avoid a call to the server. Using react-native. Thanks
Best practice is only use server time.
you can use following lib
https://github.com/artem-russkikh/react-native-clock-sync
This is kinda tricky without hitting the server.
into
Let's assume that the first time they open your app the user date is correct. (I really don't know any other way checking that in an offline way)
That moment we need to save the current timestamp to the localstorage (called AsyncStorafe in RN).
solution
The only way you can really be sure that the timestamp is correct is keep a task that counts every seconds/minute/hours, whatever is logical in your situation.
issue
Doing this in react native won't get you that far, but we are able to make a Java background service for example that we start as soon as the app closes. Here you should keep up with the time and save this when the app launches to a place where it's also accessible from react native (not sure if AsyncStorage is).
Info
Here you can find some information about bavkground tasks in RN: https://hackernoon.com/easy-os-background-tasks-in-react-native-bc4476c48b8a?source=linkShare-cdf0b7d5ccb4-1538965801
The most secure amd easy way of time cheat prevention is by hitting the server vut if that's not a possibility that this may be a interesting way to still check it. Good luck!

How to handle external database updates in react-native/redux?

I am creating a react-native mobile app for a service that has to interact with the service's API to get and update data.
This service also has a web interface through which users can sign in and use the service (aka getting and updating data.
Since I am only developing the mobile applications, I have no access to the code on the web side of things and my only way to make changes to that code is to go through someone else.
From the resources available online, I feel like I should be able to make a mobile app that interacts with and updates data through the API, however my thought process for how I am going to handle a user updating data through the web interface and reflecting that in the app has hit a standstill.
Does anyone know of a term that I can use to describe this in such a way that I will likely find more results online (or even better, a react-native npm package that achieves this functionality)?
So far I have tried searching the following, but have found few results:
redux caching
handling data updated on the server redux
redux how to handle data changing on the server
how to handle database updates redux
Sockets.io seems like it would work for realtime updates.
Essentially, it works by shifting the connection from a request-based HTTP deal (where the client asks the server for stuff) to a websocket in which the client and server can send each other things (like database changes :D) over a constantly open stream, even if after a delay.

Time limited Shareware

I'm thinking about making a time limited full version of my App, so users can try it for example 7 days.
Is there a recommended Obj-C library?
First of all do not store your data inside the app. Otherwise it would be simple to delete the App from the filesystem and download it again restarting the countdown. Store it in User preferences or Application Support instead. You could use a plist for this. You could also use a hidden file if you like. Just don't make it too complicated or too invasive. Your app can be cracked no matter what security measures you use in the end. Just be fair enough to the end user that could be a prospective customer.
Here is a very nice link on the topic of implementing a time-limited trial in Cocoa:
http://lipidity.com/apple/shareware-licensing-techniques/
Without possibility to protect your data from manipulation/deletion it is not possible to do.
How do yo check, if it is first start of your application, if all your data is wiped out.
Some alternative is "hardcoded" id token and connection to the rest of world (at least for first start, to grab any kind signed data key)
Maybe you could use a server where store UUID's and first time they launched the App. Then, Each time they open your application, it asks your server if they can use it or not. It's harder than store dates on device but if you do that, users will access your application simply changing the date of the device on Settings.