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/
Related
I have a web-app with Django backend and react frontend where inside an organization or company, there are multiple users. Now, I am trying to implement real-time commenting system where if one user types any comment and posts it, another user will be able to see it without refreshing the page.
I have seen some examples of asynchronous tasks using celery with redis but couldn't find any with react implementation.
What would be a good approach towards achieving the real-time comment system in the react/django app?
Here is an example of simple tasks with celery, redis and WebSockets (Django Channels) and frontend in React (and docker for deployment). The task state and progress are updated over WebSockets https://github.com/pplonski/simple-tasks
The other option will be long-polling, the user will not need to refresh the page, but React will make requests every few seconds to get new data (simple and solid approach). I've seen this approach in many (many) applications. A few years ago I will be afraid of such implementation (too many requests). But now, I will select this approach because of its simplicity.
There's also CollabKit which provide a React commenting system. https://collabkit.dev
We are writing dash board app in React that requires us to fetch data from remote API's asynchronously. Until data s fetched, dashboard widgets need to show a hour glass or something similar. Using hooks, using Redux/Saga, using a local data access service are some of the approaches we considered. We are mostly biased towards using Redux/Saga for this but want to check if there are any standard/recommended patterns used by react community.
Recent days I've seen these two libraries circling around community posts, haven't tried them myself, but maybe will be useful to your project:
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query
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.
I'm about the create a small single page reactjs app that fetches data from 3rd API (let's say youtube videos, so those will be displayed). So I don't need any backend at all, but I'd like to make it offline first with service workers, so if there is no connection it will still display some cached data by default. For this I will use service workers, but don't really know if I have to add any other library or I can just use it right away.
Could somebody tell me what the best way is to implement this small offline-first react app?
If you're looking for a self-contained starting point, https://github.com/localnerve/react-pwa-reference looks promising.
If you're looking for a functional web app to draw some inspiration from, there's https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which fetches information from the iFixit API, and is conceptually similar to a web app that would fetch information from the YouTube API.
(Just note that YouTube embedded video playback won't work offline, even with service workers.)
New to Angular and want to understand more about it. I know Ajax can have real time effect by basically repeatedly sending Http requests to server on short time intervals. Can I achieve similar real-time effect using Angular? If true to previous question, how does Angular achieve the real-time effect? Is it the same as Ajax?
In order to be realtime you would need to have server code that pushes data to applications. Angular, which is client side javascript, will only have the ability to pull.
Hmm, I think you should Google some defination about, Ajax, Realtime, and might be Framework also.
But basiclly, AJAX not is realtime. In a deep, It's only effect which make better experience for user. In addition, it's related to Single Page Application.
Realtime is action interactive with many users. The best example you can see is Facebook, chat or notification. User 1 can send message and User 2 can see instantly, no need to reload. Diffirent for AJAX, User 2 can not see the message if he don't reload browser.
About part 2 of your question, after understanding AJAX, realtime. You can use some third party like Socket, Firebase ... which able to use realtime for your Angular app.