Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets – Tutorial



Learn to build a chat web app in this full tutorial from Beau Carnes. The app uses React, Redux, Redux-Saga, and web sockets.

Having some experience with React and Redux would be helpful, but it isn’t required.

? Github: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/chat

? CSS File: https://github.com/beaucarnes/fcc-project-tutorials/blob/master/chat/src/App.css

? React basics video: https://youtu.be/QqLkkBKVDyM

? Based on this article by Flavio Copes: https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a
? Check out his blog: https://flaviocopes.com/

? Beau Carnes on Twitter: https://twitter.com/carnesbeau


Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on technology: https://medium.freecodecamp.com

And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp

35 thoughts on “Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets – Tutorial”

  1. i have some problem

    Sidebar.PropTypes = {

    users: PropTypes.arrayOf(

    PropTypes.shape({

    id: PropTypes.number.isRequired,

    name: PropTypes.string.isRequired,

    }).isRequired

    ),

    };

    Reply
  2. getting error: WebSocket connection to 'wss://localhost:8989/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

    Reply
  3. this video is helpful (thanks for making it), but there were far too many items that were 'glossed over' for it to be a game-changer. also, I agree with the other commenters who say the lesson lacks cohesion…it would have been far more beneficial to provide some basic diagrams early on in the video that could illustrate the basic structure of this Redux app…in other words, where's the '20,000 foot view' to anchor our understanding? instead, we feel like you are working on a puzzle as fast as you can after someone scattered the pieces of it all over the room. I had some other minor points to quibble, but I don't feel right about it because you seem so gol-darn nice.

    Reply
  4. Helpful learning experience trying to follow this. It appears to compile OK for me, but I'm getting WebSocket connection to 'ws://localhost:8989/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED in the development tools console. I think at one point everything came together and sort of worked. I think he got Chance to put random users by refreshing the page on localhost:3000. That only worked once for me, then never able to do it again. Unfortunately, flavio is impossible to reach and this project no longer even exists on his website. Would it be useful to post questions on this at the FCC community forum?

    Reply
  5. Hey, can someone help me with my issue? Server-side's node app.js command is not working for me. It basically does nothing, just freezes without any errors. It means that my websocket server is not running :/

    Reply
  6. You so f**g fast.. it would be better if you would stop, save all work, show that all still works. So, divide to logical parts.

    Reply
  7. go in sockets/index.js, then in socket.onmessage(),then in switch() delete the whole case types.ADD_USER-
    the chat still works.

    Reply
  8. Merry Christmas,Sir.

    When we type in a text box (belonging to an input tag), the browser shows up what we have

    typed immediately( in the same box), without rerendering ( in React terms).
    Just a link ( or a hint) for more

    information on that process.

    Best regards

    Dimitar

    Reply
  9. can anyone explain to me why there is no onChange="do something while typing "
    how is the text updating in the view while you are typing? 49:16

    Reply
  10. IF you want to make informative tutorials.. try making components in order and testing them as you go instead of building the whole app backwards and never running or testing your code once until the end.. no one develops like this.. so in that instance this is a horrible tutorial

    Reply
  11. Since you're using pure ES6 syntax, I would highly suggest you to prefer […state, newMessage] instead of state.concat().

    Reply
  12. Can someone explain lines 17 and 18 at 30:26

    What is the ref for? What is that node? Why was node used there?Thanks 🙂

    Reply
  13. Nice. What're your sublime settings? What packages do you have installed other than sidebar-enhancements? Do you have a settings sync gist with your sublime setup?

    Reply
  14. Nice hands-on tutorial, but I guess you need to know about React, Redux, Web Sockets beforehand.
    In my case, I don't know Web Socket so it's hard to understand that part of tutorial.

    Reply
  15. Thanks for this tutorial! Very informative.

    Wanted to point out that there's a mistake when server connections are closed. That way the tutorial is coded, the server will remove the user at the 'index' position — however, the user closing the connection may be at a different index in the array (after other users open and close connections). You can test it out by opening/closing several windows in random order. You'll start to notice that the windows you're closing do not match the user who opened it.

    I fixed this by generating random IDs for each user, and then using this ID to determine which user needs to be removed from the array.
    Here's a gist: https://gist.github.com/diaz-de-berenguer/2aa52ce776ad42a55759ca7c8afe777e

    Reply
  16. Double click + Cmd(Ctrl) + D to select the next occurrence and edit both one time. I was looking for this command, thanks!

    Reply

Leave a Comment