How to implement message notification in React App?
I am now building an application using React and Redux as the frontend and Django as the backend. What i am trying to realize is whenever an end user upload a file, all the end users that are related to this file should receive a notification.
I am thinking of using websocket/socket.io but I am not sure if that works well with Django. Or any experience or suggestions of using any other technologies to implement the message notification function?
django reactjs sockets socket.io notifications
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
add a comment |
I am now building an application using React and Redux as the frontend and Django as the backend. What i am trying to realize is whenever an end user upload a file, all the end users that are related to this file should receive a notification.
I am thinking of using websocket/socket.io but I am not sure if that works well with Django. Or any experience or suggestions of using any other technologies to implement the message notification function?
django reactjs sockets socket.io notifications
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58
add a comment |
I am now building an application using React and Redux as the frontend and Django as the backend. What i am trying to realize is whenever an end user upload a file, all the end users that are related to this file should receive a notification.
I am thinking of using websocket/socket.io but I am not sure if that works well with Django. Or any experience or suggestions of using any other technologies to implement the message notification function?
django reactjs sockets socket.io notifications
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
I am now building an application using React and Redux as the frontend and Django as the backend. What i am trying to realize is whenever an end user upload a file, all the end users that are related to this file should receive a notification.
I am thinking of using websocket/socket.io but I am not sure if that works well with Django. Or any experience or suggestions of using any other technologies to implement the message notification function?
django reactjs sockets socket.io notifications
django reactjs sockets socket.io notifications
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
asked Nov 26 '18 at 15:53
fancylynnfancylynn
246
246
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58
add a comment |
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58
add a comment |
2 Answers
2
active
oldest
votes
A simple Google search revealed Django Channels
Channels is a project that takes Django and extends its abilities beyond HTTP - to handle WebSockets, chat protocols, IoT protocols, and more. It’s built on a Python specification called ASGI.
answered Nov 26 '18 at 15:59
FawziFawzi
267110
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
add a comment |
Using the field_field.files[0].file.slice() method in javascript you can send a file in chunks over a websocket. Using field_field.files[0].size you can get the total size and divide the total of what you've sent and the size of the file to build a progress bar. Make sure you wrap your file writes in the @sync_to_async decorator as doing it without that would block the event loop. That method is part of Channels and found in Asgiref.
Channels Redis can be used to notify any or all of the users that an event has occurred, such as a file being uploaded.
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484772%2fhow-to-implement-message-notification-in-react-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
A simple Google search revealed Django Channels
Channels is a project that takes Django and extends its abilities beyond HTTP - to handle WebSockets, chat protocols, IoT protocols, and more. It’s built on a Python specification called ASGI.
answered Nov 26 '18 at 15:59
FawziFawzi
267110
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
add a comment |
A simple Google search revealed Django Channels
Channels is a project that takes Django and extends its abilities beyond HTTP - to handle WebSockets, chat protocols, IoT protocols, and more. It’s built on a Python specification called ASGI.
answered Nov 26 '18 at 15:59
FawziFawzi
267110
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
add a comment |
A simple Google search revealed Django Channels
Channels is a project that takes Django and extends its abilities beyond HTTP - to handle WebSockets, chat protocols, IoT protocols, and more. It’s built on a Python specification called ASGI.
answered Nov 26 '18 at 15:59
FawziFawzi
267110
A simple Google search revealed Django Channels
Channels is a project that takes Django and extends its abilities beyond HTTP - to handle WebSockets, chat protocols, IoT protocols, and more. It’s built on a Python specification called ASGI.
answered Nov 26 '18 at 15:59
FawziFawzi
267110
answered Nov 26 '18 at 15:59
FawziFawzi
267110
answered Nov 26 '18 at 15:59
FawziFawzi
267110
answered Nov 26 '18 at 15:59
FawziFawzi
267110
267110
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
add a comment |
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
So this means i should use Django channel for the backend to handle the front-end websocket right?
– fancylynn
Nov 27 '18 at 19:36
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
exactly, tinker a little bit with it and it will be easier to understand.
– Fawzi
Nov 29 '18 at 6:15
add a comment |
Using the field_field.files[0].file.slice() method in javascript you can send a file in chunks over a websocket. Using field_field.files[0].size you can get the total size and divide the total of what you've sent and the size of the file to build a progress bar. Make sure you wrap your file writes in the @sync_to_async decorator as doing it without that would block the event loop. That method is part of Channels and found in Asgiref.
Channels Redis can be used to notify any or all of the users that an event has occurred, such as a file being uploaded.
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
add a comment |
Using the field_field.files[0].file.slice() method in javascript you can send a file in chunks over a websocket. Using field_field.files[0].size you can get the total size and divide the total of what you've sent and the size of the file to build a progress bar. Make sure you wrap your file writes in the @sync_to_async decorator as doing it without that would block the event loop. That method is part of Channels and found in Asgiref.
Channels Redis can be used to notify any or all of the users that an event has occurred, such as a file being uploaded.
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
add a comment |
Using the field_field.files[0].file.slice() method in javascript you can send a file in chunks over a websocket. Using field_field.files[0].size you can get the total size and divide the total of what you've sent and the size of the file to build a progress bar. Make sure you wrap your file writes in the @sync_to_async decorator as doing it without that would block the event loop. That method is part of Channels and found in Asgiref.
Channels Redis can be used to notify any or all of the users that an event has occurred, such as a file being uploaded.
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
Using the field_field.files[0].file.slice() method in javascript you can send a file in chunks over a websocket. Using field_field.files[0].size you can get the total size and divide the total of what you've sent and the size of the file to build a progress bar. Make sure you wrap your file writes in the @sync_to_async decorator as doing it without that would block the event loop. That method is part of Channels and found in Asgiref.
Channels Redis can be used to notify any or all of the users that an event has occurred, such as a file being uploaded.
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
answered Dec 14 '18 at 18:36
kagronickkagronick
8741516
8741516
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484772%2fhow-to-implement-message-notification-in-react-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think that this question should be on softwarerecs.stackexchange.com instead of here at stackoverflow
– grouchoboy
Nov 26 '18 at 15:58