How to Capture events in Vue 2 / electron with embedded web page - vuejs2

I have a web application written in Vue 2 , and for the most part we would use it through a browser.
I have one page where I need to communicate between the browser and the desktop devices ( electronic scales and barcode scanner ) - both ways. I have got the events side sorted in the electron app using nod-hid and node-serialport packages.
My question: How to I communicate between electron and vue web
application Note: The web application is hosted separately and referenced
using http://localserverWebApp:2000, not part of the electron app.
Examples:
Submit an event from the electron app to the web page , and the web
page know what to do with that event (e.g. one way , such as a
barcode scan sending to the web page )
Submit an event from the web page to the electron app , and wait to receive a responsee.g. ( sequence )
A property change or button click on the web page
Electron receives the event
Sends a command to the electronic scales and waits for the response
When the response is received Electron sends the response back to
the web page
I am fairly new to view , and very new to electron , but I can think of a few of ways that may be possible and just need some direction:
a) Using Vue on electron and the web app and using the "reactiveness" of the Vue framework.
b) Using ipc to communicate
c) Using websocket to communicate
Any help is greatly appreciated
EDIT: It seems that websockets might be too slow for this sort of thing..
[quote from the bottom of this page; https://www.scriptol.com/javascript/ipc-vs-websocket.php] While the data is displayed instantly with IPC, there is a noticeable
delay with WebSocket.
Some other options I have looked at are uwebsockets which doesn't seem to be properly implemented with electron and also https://electronjs.org/docs/api/remote , but I think the web application needs to have electron installed as well ( which is what I am tring to avoid )

Related

Vue based Telegram Web App opens page outside of Vue path in Browser

I have a Vue-based Telegram Web App (API 6.x), which opens in Telegram App, clicking on the for Bot defined Button.
Now inside of the (one page, no router) Vue app I need to bring user to another, non-vue-based page.
Vue App > domain.com/game
Link to > domain.com/game/win
// inside vue component
<button #click="participate()">Participate Winning Game</button>
Participate Winning Game
As soon the User clicks on the link (or I do in participate() window.location.href/replace), Telegram asks the user to open /gam/win in Browser.
Is there a way to avoid this behavior and load /game/win inside the Telegram App?
Earlier I faced the same problem. Telegram Web App for Bot suggests opening any links in an external browser. I did not find documentation on the work of links in the application.
In my application on JS, I implemented a page redraw with new data received from the backend.
P.S. links to phones or other messengers like
Telephone
Skype
do not work at all.

How to get access to Vuex store of parent Vue app from iframed child app?

I'm coding a main web app (with VueJS & VueCLI, as SPA) with only some foundation features. I aim at providing a platform where other developers could independently build add-ons by coding & deploying their own web app (with any framework) at it's specific domain, then the main web app have a page to load the add-on URL in iframe tag.
It's sound like micro-frontends architecture. And here's what missing: if the main web app handles login process and keeps user account object in Vuex, then how coud I efficiently get access to Vuex of the main web app from the add-ons web app?
If iframe it not a suitable solution, so what's the best strategy for me?
I open to discussion & really appreciate any help!

RingCentral two way communication

I am building a React Native application for calling using RingCentral APIs.First of all I tried using the webphone RTC via web browser: https://github.com/ringcentral/ringcentral-web-phone. It works perfectly fine in web browsers. But the thing I need is to call via react-native application I am building.
I tried calling via RingCentral using 'ring out call' POST API and 'call control- make callout' post api(beta version).But the problem i am facing is when i integrate these apis to react-native applications : To have a two way communication I need to be online in the web phone .Then when i call from react native it goes to the web phone first.And then when I dial 'answer' it redirects to the number i want to call to.Then only I can have a two-way communication.
So, what do I do if I want to directly call via react-native application to the recipient directly?
P.s. If I am not online in the web phone from browser the call automatically goes to the voicemail.
So hard to understand your question from the title and the detailed description.
I guessed that you want to implement a functional phone using react native where you want to use the RingCentral WebRTC SDK to handle incoming and outgoing phone calls.
First of all, please mind the browser compatibility supported by the WebPhone SDK. Secondly, it is not trivial and I cannot support you on the react-native part. However, RingCentral provides an easy way to embed a RingCentral embeddable phone to any webpage and that app is an open source project. You can use the embeddable as such or clone the project and learn from the code or modify it to meet your requirements.
Click on the links above to find further information.

Can testcafe connect to a Smart TV development deployed app?

I'm evaluating whether testcafe can be driven inside an embedded app, for instance, a Tizen or WebOS Smart TV.
By creating a runner and browser connection one can make the app be fully controlled by navigating to the remoteConnection URL. [1]. But that's replacing the app itself. I'd rather pass on control via insert a script tag to the app's HTML page. Is this scenario possible (even only a subset of features would be exposed?)
[1] http://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/testcafe.html#createbrowserconnection

Triggering Pinned SItes Notifications from an SPA

I have a simple SPA that uses HTML 5 Notifications in Chrome and Firefox, works great. For IE , Pinned sites looks like the best supported options (without a plugin) that I can use. I've seen some literature here and on in the docs about using xml config and metadata for setting this up, just curious if there is a way to have a Pinned Sites notification (icon in task bar) show up when , say, an ajax call finishes that loads new content into the page. I guess a good metaphor would be a chat application that uses ajax to load messages, when a new message comes in, I want to put an icon in the task bar .
Found this library that does all the lifting for you regarding pinned sites :
https://github.com/bsatrom/pinify/blob/master/js/jquery.pinify.js
No metadata needed.