Easy Django REST Framework Websocket Usage - angularjs

I have a an application that uses Angular for the frontend and communicates with an API running Django RF.
Now, let me try and outline what I'm trying to achieve in hopes of finding an easy solution.
When a user runs a report, a worker version of the API generates the report to prevent the main API from bogging down. The report runs for a couple seconds/minutes. The user refreshes the page and voila, their report is there.
What I'm trying to achieve is the elimination of the whole "user refreshes the page" portion of this process.
My goal is to do this via websockets.
I literally want something as simple as:
WEB: "Hey API, I want this report. I'll wait."
API: "Yo dog, you're reports done."
WEB: "Cool, let me refresh my report list. Thanks bud."
Now, we start to venture into an area I'm unfamiliar with. Websockets can do this, right? I just need to create a connection and wait for the all-clear to be sent by the worker.
Now, here's where it gets hairy.
I've spent the better part of the day going through libraries and just can't find what I need. The closest I've come is this, but it clashes with restframework. I get hit with tons of 404 errors and I think it has to do with the way rf manages urls.
I literally need a simple event listener. There's got to be a better way, right? To clarify, I don't want to do something brute-force like silently ping the API for report status. That gets a tad hinky. I want the API to tell me when it's ready.

In a basic way, can use something like django-websocket-redis and use Django signals to pass the messages around. ws4redis handles alot of the tricky bit. However, websockets are weird and honestly I doubt you need them. You could just poll some route that has the job state. If you need to get it done fast, I would go that route.

Related

SPA DTM analytics pagename issue

I am using Angular SPA with DTM.Using custom event based rules, I am able to get all my data including pageName, v41,v42 as correct. Now inside adobe editor, i am storing pagename to s.pageName and some hard-coded value to s.server. I have verified that all my data is correctly populating using OMNIBUG tool as server,pageName, v41 and v42.
Problem is coming in Omniture reporting, as server and page data are not coming through. Page-name data only showing SPA homepage in all page visits and server also coming as default from s.code and not the one i am passing from s.server. eVar/prop are all coming fine.Even if I do prop40=s.pageName/prop41=s.server, then in omniutre reporting i am seeing correct data populating in prop40/prop41 but not under Page and server. And again I cant use prop40/prop41 for pagename/server as its not a correct way to follow and PAGE-VISITS are ZERO in that case.
Any help how to get data in page/server in omniture for SPA or anything wrong in my implementation? Thanks in advance!!
If you really do see the correct values in Omnibug (or more specifically, network request to Adobe collection server), then the issue is not in the code.
Check against another AA hit debugger. Possible Omnibug is somehow bugging out. There are a ton of alternatives out there. Adobe Experience Cloud Debugger. Observepoint. Charles Proxy. Fiddler. Or just use the browser dev tool network tab (what I usually do as a backup).
Make sure you are looking in the correct report suite. Perhaps your data is being sent to a dev report suite, and you are looking at prod report suite, or visa versa?
Check to see if you have any Processing Rules that are overriding your values.
Contact your Adobe Rep to check if there are any VISTA Rules present for the report suite, that are overriding your values.
If you have verified none of the above is the case, then sorry, but it sounds like the issue must really be in your code, but there is a problem with your QA method (e.g. maybe you are looking at the wrong AA request, or something).
Update:
Based on your comment:
Earlier, i was making s.tl() call, but replacing it with s.t() call
resolved my problem for data was not populating
pageName/server/page-views in Omniture and now it is. But the current
problem is we need PageName on all SPA clicks (can be achieved by
s.t() call ) , but the page-Views are not needed on all clicks. So,
its like link-tracking needed only but with PageName data. I am
struggling not to populate page-views on a s.t() call or vice-versa
how to get PageName populated on s.tl() call. Again, omnibug shows all
requests just fine but the issue comes in reports in omniture
When Adobe processes a hit, it wipes pageName for s.tl calls, as that's how it determines whether to count the request as a page view or not. If you want to see page name even for s.tl calls, the common practice is to dupe the pageName value to a prop or eVar and send in with the s.tl call, and look at that report. In fact, most clients I work with don't even use the native pages report, and instead use the (usually eVar) report.

How to use GET in ReactJS web chat app with Rest API back-end?

I am creating a chat app using ReactJS for a class project web app. For the back-end I am using Rest API. So ideally when I post something on the chat, I would use POST and when I receive a message from the other end, I would use GET. In terms of POST, I figure I can associate that with an event, such as pushing the submit button for the chat app. However, I am racking my mind for how I would call GET for receiving a message. Would it be as simple as using a React life cycle function, such as ComponentDidMount to call GET for receiving a message? Or would I need to use a timer with one of those functions? Or is there a radically different method altogether? From what I see of the life cycle functions, they only update based on changes in state and props.
Quite a lot of questions you have there. I will provide one possible solution.
Choose or implement chat UI, I recommend using https://github.com/PeterKottas/react-bell-chat as it's very easy to setup.
Implement backend, I recommend dot net core as it's fairly easy to wire this up in that framework.
Forget GET-ing messages on a timer. Imagine you have 1000 users getting every 5 seconds. That's a home-brew DDOS attack. Instead use bidirectional communication.
SignalR is the library that can help you implement that, you google the official repo, there's plenty of examples.
Connect to signalR on front end using the javascript (or typescript) client they provide.
And you're pretty much done.
Here they use angular but you should get the gist of it https://codingblast.com/asp-net-core-signalr-chat-angular/

How to run a SPA with javascript disabled - server side rendering?

We have a website that's running AngularJS 1.*
but one of our main clients are military personnel and they frequently attempt to use the site via Department of Defense computers. These, of course, have javascript disabled.
I've heard of doing server side rendering, but the majority of the examples and research just mention using it for the initial load. We would need the entire site to run off that principle. Essentially acting like an old MVC site. Is this even possible? And I don't mean with just angularJS. Angular 2(5, whatever version we're on now), or react. I just really don't want to back track to .net MVC
Edit: I realize this is, for all intents, a silly question. I was just hoping there was some awesome new tech that had solved the issues that would be present in even attempting this (as stated below, data-binding. I realize this concept completely defeats the purpose of SPAs)
Thanks anyways. I may just delete this question. Didn't have too many expectations to begin with.
This is very possible! Don't let the rest of the people here fool you.
We have a few websites that work just fine with or without JavaScript enabled. My company website https://bitgenics.io is a React app. If you disable your JavaScript the only thing that won't work is the client-side video player.
Now I have no experience with Angular 1 (and I have heard SSR is hard there), but support should be better in the later versions of it.
Getting the GETs to work is the first challenge. But the next one is that you have to have a fallback for your HTTP POSTs. SPAs often use straight REST calls to do any state changes, but you can't do that because it requires JS on the client.
So your forms have to a fallback of a regular FORM post. So you might need some server-side logic to receive these POSTs and respond with a Server-Side Rendered page again.

Single Server request per page vs SPA Application

I had the idea to make a SPA application using angularJS and then just sending AJAX updates to the server when I need.
My initial idea would be make the client application fly, but if I have to do an AJAX round trip to the server, I think the time would be approximately the same as to request a single web page.
Requesting a page just has more bytes of data, is not like I'm requesting 20 resources like in this article: https://community.compuwareapm.com/community/display/PUB/Best+Practices+on+Network+Requests+and+Roundtrips
I would be requesting a page or resource per request.
So in the end even if I create my client side application as a SPA using angularJS, these requests (would have to be synchronous and show a please wait message while they don't return, as I don't want to user to take more actions before I make sure his request passes validation and is processed correctly) would take some time and make user wait, just about the same time as requesting a full page.
I think SPA pages would be very useful if I have like a wizard on my app with multiple pages/steps and at the end, submit the results of wizard, to the server, which I don't.
Also found this article:
https://help.optimizely.com/hc/en-us/articles/203326524-AngularJS-Backbone-js-and-other-Single-Page-Applications
One of the biggest advantages of Single Page Apps is that they reduce
data transfer. As a result, pages after the initial loading usually
can be displayed faster and seem more interactive.
But I don't believe this last quote is really true.
Am I right, or is there a way that I'm not seeing to build an application that would look like it's executing locally?
I know how guys will start saying "depends on what you want", but lets focus on this scenario where there's no wizards.
What ever you said is right. But most of the frameworks(Angular,BackBone) you take they are going to cache the templates of html on the browser so the rendering would be pretty fast compared to the normal applications. Traditional apps will have to fetch the html from the server for each request which is a time consuming one.
Hope this helps you!!!
If you are wanting to go through that syncronous server side validation step for each page request, then there is probably no big advantage to using AngularJS.
If you are requesting a page and then manipulating that page's contents once it's loaded you might want to consider AngularJS. A good example would be requesting a page that displays a list of items. Now let's say we want to search that list or order it in different ways. Rather than using AJAX to call the server to filter the list and then re-render it, it could be much faster to user AngularJS to filter and re-render the list without making any further requests to the server.

What is the best way to implement dual (server side) rendering with MarionetteJs?

I can I implement following workflow with MarionetteJs:
User opens site by URL
Server generates HTML + JSON data
MarionetteJs reads JSON data and "attaches" to generated HTML. So it doesn't rerender templates.
User do something -> MarionetteJs updates DOM, sends server requests, etc
So the main problem for me is 3 - attach point. What is the best way to implement dual rendering with MarionetteJs?
This is something that hasn't been baked in to Marionette, yet. I've seen a number of other people solve this for Backbone in general, and it might be easy enough to take their solutions in to account.
Hopefully someone will have an answer for you, though. I'd love to see an add-on or plugin, or pull request to the project for this.

Resources