I have a complex Blazor server app and I run into situations that user interact with the form and while the server is trying to manipulate the DOM via SignalR, the user manage to do other things in the form.
When I debug the app or using PC in the LAN, it works fine because it is very fast.
But when I browse from cell phone it is noticeable.
One of those situations is reading a barcode using barcode reader.
The flow is:
user scan barcode into textbox
the barcode is validated
if OK or Bad the user gets a message
the textbox cleared
What happen is that the user is able to scan other barcode before any render is being done to its DOM.
It seems to me that it has to be done with some JS locally.
Any solutions ideas would be appreciated
Tx
Yaron
Related
I could not find any answers related to the working mechanism of QR code scanning used on WhatsApp Web.
How does the authentication happen when the phone (any smartphone running WhatsApp) scans the QR code on the browser.
I don't want to know about the technology stack behind them. Like WhatsApp uses modified version of xmpp, uses erlang, uses web technologies like socket.io and ajax for the web version to implement such functionality.
The question might be broad. But I am eager to know about the implementation behind it.
It works like this :
1- You open the following URL on your browser : https://web.whatsapp.com/
2- The Browser loads the page with all sorts of JS and CSS stuff , but also opens a WebSocket ( wss://w4.web.whatsapp.com/ws ) - Check this image :
2.1- Every 20000 milliseconds you see traffic on the WebSocket for a refresh on the QR code you have on you screen. This is sent by the Server to the Browser, throught the WebSocket (WS we call it from now onwards)
2.2- On each QR Code refresh received on the WS , your browser does a GET request for the new QR Code in BASE64 encode .
2.3 - Notice that this specific WS that the server has open between the Server and the Browser is associated with the unique QR code !!! So, knowing the QR code, the server knows which WS is associated with it!
---- At this stage your browser is ready do the WhatsApp App work , but it does not know what is your ID (Whatsapp identifier which is your mobile number) , because it can't really get you phone number from thin air .
It also does not require you to type it, because the server wouldn't be sure that the number really belongs to you .
So, to let the Servers know that the WS session belongs to a specific phone, you need to use the phone for QR reading
3- You grab your phone, which is authenticated (otherwise you wouldn't have access to the section to scan QR codes) , and do the QR Code reading thing
4- When your mobile reads the QR code, it contacts the WhatsApp servers and tells them : My number is XXXX , My auth creds are YYYYY , and the WS associated with this QR code can now receive my DATA
5- The server now knows that it can direct Traffic to the specific WS socket that belongs to that QR Code, and does so !
6- On the Browser WS you can see the Server sending data regarding the user, regarding the conversations that you are having and which photo thumbnails to go and Grab.
7- The Browser gets this data from the WebSocket , and makes the corresponding GET requests to get the Thumbs, and other resources it needs, like an MP3 for notifications
7.1 - The WS listener on the Browser also makes Javascript calls, on the javascript files that were received at step 1 , to redraw the page DOM with the new interface .
8- The interface is now redraw to look like the WhatsApp app , and you continue to receive data on the WS , and sending when needed, and updates are made to the interface as data is arriving on the WS .
That is it.
Using Chrome, and Developer tools , you can see all this happening live. You can also see the WS communication (most of it, the binary frames you would need another tool ) and see what is happening all steps of the way.
Also:
Check a complete Tutorial on this : HERE
Source code for the Tutorial : Android Client
Source code for the Tutorial : Java Play Server
It uses something like below.
Whatsapp web application is opened by user via web browser.
Server creates a UNIQUE token (number) and embeds that number in QR-Code
Whatsapp phone application reads QR-Code and decodes token.
Whatsapp phone application sends information about its current user and this newly read token to whatsapp server.
Whatsapp server matches token (+ phone app user information) with web browser.
It automatically authenticates user and open new web page with his/her information on it.
there are two ways to implement QR login like whatsapp
Ajax polling
Websocket
I've made demos in php of
both
QR Login with Websocket
QR Login with Ajax polling
Note: Websocket apporach requires 2 port, one for main app and other for listening websocket connection.
Http server and websocket server can run on same port too with some proxy or some other way.
I found an example in nodejs too
QR login Websocket with nodejs
I'm currently working on an asp.net website.
I have a page (main.aspx) which displays records from a database table. Another page (editing.aspx) is responsible for editing records in the DB table.
let's assume we have a scenario where two users are using the website, user1 (on session1) is viewing the records in main.aspx, user2 (on session2) is editing the DB table from editing.aspx, what I want is: to refresh main.aspx for user1 when user2 saves his changes to the DB table.
I tried using an AJAX timer that pulls the DB for changes every 10 seconds, and refreshes an UpdatePanel (in which I'm displaying the records), and it works just fine, but I want to know if there'se a better way than pulling the DB server for changes.
thanks.
It is debatable if the other way is better but what you are looking for is persistent connection to the server that lets the server send e message to the page. There is a good library for .NET called SignalR that abstracts away the details. It is certainly more network efficient but depending on your use case the update panel may be good enough. Basically with SignalR you will send a message from the server-side code of your edit page which would be received by a JavaScript function on your main page. Then you either show the data or cause a refresh in some way.
How to work when internet connection down in a asp.net application ?
Means Users are working on application and suddenly internet connection down then user should still be able to add/edit/ delete operation on data, but when internet connection is up then
all changes should be done at server. Is that possible, Is there any example available to achieve this?
Thanks.
HTML5 has some offline capabilities. http://www.html5rocks.com/en/features/offline
But do you really have a business case for this? It will get complicated when you need to try and update stale data etc.
This requires use of JavaScript to store local data http://code.msdn.microsoft.com/Working-with-HTML5-local-b0cbe2ef and it needs to check whether the server can be reached before doing a proper postback, or more likely just use AJAX to communicate between the JavaScript application and the server.
There are several applications like this such as Google Mail, and such solutions are more JavaScript based than ASP.NET and you need to avoid relying on the web forms mechanisms and use .NET for building the initial page, dealing with AJAX requests and managing the application data and persistence. See How to write an offline version of an AJAX/ASP.NET web application
Suppose I have either an ASP.NET displaying my results, or a Silverlight client. And I'd like to show the current status of my server, or embedded device. (pretend the device reads temperature and humidity stats)
How should I send the status information from my device to the front end? Should I poll the device and save the results to SQL, Azure Table, or the like? (Azure is a technology that fits with this project for other reasons. That's why I mention it)
Or should I create a WCF service that polls the device directly and returns the current status.
What makes more sense?
In either ASP.NET or Silverlight you are going to have to poll from the client (web page or Silverlight app) to the backend to get the current status. In ASP.NET I'd look into doing this via an AJAX poll to a service using Javascipt (look at using Jquery or something similar to make this easier).
In silverlight you will need to have some sort of service configured to return the results and poll it using the Timer control running on a seperate thread.
You can also using a "push" binding within your silverlight app. Basically instead of you manually polling the server, the server will send you a push notification anytime it deems it necessary to let the client know of any change.
Is it possible to embed an external application inside the browser (IE, Chrome, Safari, Firefox) so it will look like a native web application but actually having access to the USB ports of the client machine? I have heard that I need to make an ActiveX control. I would like to use the .Net framework, but if that is not possible, maybe using Java or C++ will be fine.
I have to make an application that will allow to the users to connect an external device to an USB port, this device will take a backup of the information contained in a SIM card and send it to the user's account online agenda. So the user can restore it later using the same application. This should be a web application or at least look like one.
If the first is not possible. Is there any way to launch an external application from all the browsers, and then pass information to the browser window to allow it to refresh after the backup has been made?
Thanks for your help in advance.
First off this seems to be a big security issue and hence this is the reason why you might be finding it tricky.
What I would do is look at it from a different angle; what am I trying to achieve? How is the user going to use the data? Where is the user going to use the data?
From you question I have answered those questions with the following; I hope I've not miss interpretted anything.
I want to copy the data from an external sim card to a central location
I want the user to see this data from the central location; preferablly from a web application.
The user is going to see and use the data from the web app
Assuming all of these things are true; one design option is the following:
1 - Have a client based application which can read stuff from the usb device
2 - Have a secure webservice which the client based application can upload the data too
3 - Have a web application which can view this data and see refreshes
Let me go into bit more detail for each step.
1 - If you write a small client application it is installed or at least runs on the client computer. Due to this it can access the local client resources such as usb and interface with them. This will mean they can read the sim data throuogh this app, buut also potentially save it locally as well as upload the data. To access the web service they would enter their username/password so you could authenticate them for the upload.
2 - This web service would do the authentication from the client application, but also receive the data submitted from the client app. Acessing web services from .net now a days is really straight forward. Using this web service the client application could also do some checking to make sure the data has been updated and it could handle re-tries if the network dropped etc.
3 - The web front end of the system would interface to the same data source. This site would take the username / password to authenticate them on the site, but also let them see the uploaded data. As for the refreshes; if the user is logged in and looking at the data you could have a javascript timer polling an action/service to see when new records have been added etc. This could then display a message through jQuery or similar to notifiy the user. This could be similar to the notifications which StackOverflow gives when you visit for the first time or get a new badge etc.
Hope this helps :-)