Ionic 4 getting data from database without refreshing - javascript

I have a Ionic 4 Mobile App,PHP Web Application and I have a phpmysql database, when I inserted a data using my Web Application I want to be view on my Mobile App without refreshing, Im currently using HttpRequest.
I have heard of set Interval but I have heard it will be complicated in the long run.

What you are looking for is a web socket connection. A web socket is basically a steady connection that listen to event from one to the other. Ex, you add a new entry in your database, you then notify every socket connected so they can retrieve the new information.
There are many libraries available to do socket. I have not tried all of them but i tried socket.io and it works well. It is Javascript only though. For PHP, you can look into ratchet.

Related

Implementing ajax to make a functioning live chat

I'm trying to build a simple live chat for my website, I already have everything set up, meaning databases, login and log out system, forms, displaying the database values in chat form.
The only thing I'm missing is implementing the live refresh function so users don't have to manually refresh the site to see new messages.
I'm a little lost, could you give me some guidance?
I'm guessing I have to add a specific javascript call whenever a message is sent, or the "send" button is pressed to be more specific, then that would call back a function to refresh the chat for every participant. Not sure where to start or which code to use.
Essentially, you have 2 ways to implement this.
Using a polling technique with ajax request which will grant you a greater compatibility, but you will have to much more work to implement it. I don't really consider it for most cases nowadays, because it could be very inefficient.
Using a socket mechanism, you can use web sockets for a out of the box solution, most browsers have support for it nowadays For third party libraries you can use socket.io which can fall back to web socket yet it grants a little bit for features out of the box, like channels, which you would benefit from. Lastly, for a third party service, you can use firebase/firestore which they have a realtime database, so whenever a change happens, you get notified.
I would recommend using either the web socket approach (native) or using a wrapper/library like socket.io. If you go with Socket.io, there are a lot of tutorials out there that build chats with that library, so you can get a working sample really fast.

How to navigate users to other pages in the website without losing socket connection?

I want to build a simple web application using socket.io and express, the website will include 2 pages:
(Rooms page and room page).
The rooms page is where the user needs to insert his name and he can create his own room or join an existing room from the room list.
On the room page, I want to wait for 2 users and then display a trivia question.
How do I redirect users to the room page from the rooms page without losing socket connection? When I try to do it with HTML tag 'a' with "href" attribute it doesn't work.
I guess it because the page is reloading so how can I navigate to other pages and keep the socket connection on?
You have just described a key reason that Single Page Application frameworks are so popular - you can change the user's view without reloading or interrupting data connections to the server.
In your example, as soon as you request the other page from the server the socket.io connection will disconnect and then reconnect when the next page is ready. You can use console.log statements to confirm this behavior.
So no, it's not possible using Express unless you start considering workarounds like frames or iframes that separate pages, or maybe timestamps on the client that can "catch up" the newly loaded page. Neither are good options.
React, Angular, and Vue are the three most popular SPA frameworks, if your app is advanced enough to need a constant socket.io connection then chances are you will benefit from using one of them.

WebApplications, how to notify users when their device is sleeping

I've build a Javascript WebApp that is designed to work on tablets (using Web App Manifest file) and offline (aside from getting initial data from PHP backend). The app has custom notification system imitating Notifications API. Each notification is sent at given time (using setInterval). This leads to couple of problems:
there is no sound as the notifications are not effect of user interaction,
notifications can't be shown when the device is asleep.
First problem can be solved using Notifications API, but I'm not sure what could be done about the second. Keep in mind that the app should work offline - this eliminates the use of Push Notifications API.
Is using web application's container such as Cordova my only option?

How do I code facebook-like browser notifications using AppEngine Channel API?

I am writing a Python AppEngine app, and need to deliver notifications to browser clients when certain backend events happen. I am using the channel API. I have two issues: multiple page loads within the same tabs and multiple tabs.
Multiple Page Loads
I seem to be unable to reuse the same channel across multiple page loads. An attempt to reconnect to the channel on the new page results in an error with code 0 and no description. I am currently storing the channel token in the datastore and injecting the token into the page. How can I reuse the same channel for multiple page loads within the same tab? This answer suggests iframes are the way. Is recoding the site with iframe my best option here?
Tabs
My understanding is that I need to generate a client ID for each tab the user opens. How should I generate a client ID that will be different for each opened tab? I could just increment an ID on the server, is that the best way?
Thanks in advance,
Aaron
I have been investigating strange channel disconnections in DEV, and it looks like Channel API is much more stable in the live environment than in the development environment.
I created a (somewhat) minimal AppEngine application that creates a channel that persists across page loads. The app reuses a channel token from the datastore.
The code for the app is here: https://github.com/aaronlifshin/channeltest
The app itself is live at http://channeltestaaron.appspot.com/
How to use it?
When you go to http://channeltestaaron.appspot.com/ANYSTRING the app will create a channel and then reuse this channel for any other URLs you open of the form http://channeltestaaron.appspot.com/ANYTHING
Then you can go to http://channeltestaaron.appspot.com/broadcast to cause a message to be sent to all the other pages you've opened.
All pages have a 1-second delay to test the persistence of the channel. This 1-second delay would cause the channel to disappear in dev.
Hope this is helpful.
Aaron
Multiple page loads: according to the answer here you can reuse the token, however need to make sure to use it on one page at a time (it might also be a good idea to avoid page reloads and to have a single-page app that uses hash fragments).
Tabs: the most straightforward way to generate client ID is create a random string, e.g. like this.

Running a jquery mobile web app in a disconnected state?

I've been toying with writing a web app using jquery mobile which makes use of forms (cehckboxes, text fields, combo boxes). The tasks the app requires are fairly trivial but the information needs to be updated and sent to a server.
So my question is, say someone uses the app, gets a bunch of data from a server, then loses connection. Will the browser still remember the form fields input and could the user still navigate between pages? From my understanding jquery mobile places all its pages in the same 'webpage' so it's not like it will have to be constantly loading up new data from the server.
My idea is that I'll run some script in the background to check for a connection to a server and when it gets this connection it can go ahead and sync data with the server.
Is this possible or is it a pipe dream?
for jquery mobile it append all the data it had in same page so user can use only those links which are already clicked for the links that user have not touch yet will create problem

Categories

Resources