How can I use server side events(sse) in vue? I'm receiving sse from backend and I need to implement that when I receive first event, I will show ringing panel on screen. Then I can accept that call and then show different panel and when I click on hang up I will show again screen like before events. It will be a call centrum.
I created method for receieving and handling event.
setupStream(){
let evtSource = new EventSource('/hzs/events.sse')
evtSource.addEventListener('call_status', event => {
let data = JSON.parse(event.data)
this.channels.push(data);
}, false)
}
Now, when I call I get something like this:
Where first curly brackets are incoming call, second are after I pick up phone and last are after I hang up.
How can I use this in app and show for example green ringing bar on screen based on events? So for every event I need different UI components.
Do I need to use vuex?
Thanks
Related
I have a form with a dropdown list of country options like so:
When the user selects an option, the form will load some data from an API so the user can make changes. However, some parts of the form have some deeply nested components where the user can edit additional data on a separate page. The problem is that when the user changes navigation and then clicks the back button on the browser, the drop down list is 'reset' and he has to select again the country that he was editing.
Can someone suggest a way to handle this issue so that if user clicks the back button on his browser (or the page has a "back to results link"), he will go back to the form and it will already be pre-selected with his option?
Should I be handling this via $route.query, localstorage, vuex? I would prefer not to use Vuex but I guess I can if needed.
Is $router query all i need here? I can capture the country's id and run the API call again on navigation back to the drop down selection page?
Example data from API:
{
id: 1,
name: 'Afghanistan'
}
When user selects a country from menu, I run an API get request like so:
async setSelectedCountryObj(value) {
if (value) {
const response = await APIService.tempISOCountryById(value.code)
....snip...
it's possible to handle with router, but that not a good way, you should go with vuex, that best way, just create store, and dispatch after select value, and always get value when come on that component, that essay not that much difficult, let me know if you need but i know you can.
I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
I am trying to get 3 different routing "styles" in my application. I need to identify these in each view-model's activate method:
User clicks a button or link in my app that causes my app to call this.router.navigate()
This one is easy because I always put a parameter into the URL, so in the target View-Model, I have that param in my activate method.
The users presses the back or forward buttons or loads the application for the first time.
I can also get this by using the this.router.isExplicitNavigation variable or checking if my state is uninitalized.
The user clicks on one of the views displayed in the nav-bar (setup in the app.ts configureRouter method).
Unfortunately I cannot find a way to distinguish this one from when the user presses the back and forward buttons on the browser.
So here is my question, is there a way to know when a view-model's activate method has been called because a user selected a nav-bar route?
If I understand your question correctly, you want distinguish between 1. and 3. In activate(), you receive all routing parameters (as the method's first argument), both:
from the route-template, such as /myRoute/:myparam
from the query string
So I'd suggest to put a query parameter for the menu bar, which parameter you can read in activate(). For example:
let's say your route /myRoute
from the button, simply navigate to /myRoute
from the navbar, navigate to /myRoute?from=navbar
You might know this, but you have multiple options to navigate from code:
router.navigate('compose your route manually')
router.navigateToRoute('route's name', parameters)
in template, using <a route-href="route: 'myRoute'; params.bind={...}" >
Your code:
//button
router.navigateToRoute('my-route');
//navbar
router.navigateToRoute('my-route', {from: 'navbar'});
//destination view-model
activate(params: Object): void {
if (params.from === 'navbar')
//routed from the navbar
else
//routed from a button
}
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.
I have a radar chart which renders when read from json file. i have used listeners for this purpose. Now, I need this to be upgraded to rest call. I have a rest call which is fired when I click a button. This rest call returns data to a store and data model. I want to render the radar chart using this data. So each time the button is clicked, a new set of data is returned. How can I achieve the rendering of the radar chart each time new data is received?
If any code is needed, please feel free to ask for it.
Thanks.
I am rendering a mock chart initially using listeners. On button click I use a different set of data model, store and listeners (within the button's handler function). This store fires the rest call and loads the new chart each time the button is clicked.