You are currently viewing Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets – Tutorial

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

source

This Post Has 43 Comments

  1. John Lewis

    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

  2. Banting Gamer

    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

  3. Dimitar Getsov

    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

  4. Wail AlKalbani

    You got the knowledge, but the way you teaching is horrible what a waste

  5. Dimitar Getsov

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

  6. Sean Hochman

    This is a great tutorial on how to debug an application

  7. Yauhen G.

    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.

  8. RequinRage

    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 :/

  9. Ray Silva

    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?

  10. Ray Silva

    Now, any direction on making this work with actual users instead of Chance?

  11. Joe Antonelli

    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.

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

  13. md sumon

    i have some problem

    Sidebar.PropTypes = {

    users: PropTypes.arrayOf(

    PropTypes.shape({

    id: PropTypes.number.isRequired,

    name: PropTypes.string.isRequired,

    }).isRequired

    ),

    };

  14. David Hahn

    thanks Beau, great tutorial and explanation. If I may can you create one for react native which connects to backend (preferably using Mongo DB)?

  15. Artem Portnoy

    In the last section of the tutorial that deals with web sockets, how come the client never sends an ADD_USER call to the server before it starts sending messages? Also, shouldn't the server send a users list to each new client at connection time? The app appears to be working for you in the end, which is really surprising considering what I've mentioned.

  16. Bill White

    I have clone this repo but am getting users is undef where is it loaded?

  17. Bora Sumer

    Typing all the prebuilt app on the screen is not what developers do. Especially importing the non existing components beforehand is super confusing for learners, who are also beginners.

  18. Camilo Villegas

    So… I finished the video, it helped me out a lot, but I gotta say that the only reason I understood what you were doing, is because of previous knowledge. This is not a tutorial at all, it's more of an "I read someone's code and I type blindfolded" for a lot of users.

  19. Rodrigo Santos

    someone more having this problem? "Warning: Failed prop type: The prop `dispatch` is marked as required in `AddMessage`, but its value is `undefined`.
    in AddMessage (at Chat.js:28)
    in ChatTab (at routes.js:32)
    in component (at routes.js:13)
    in Route (at routes.js:10)
    in PrivateRoute (at routes.js:31)
    in Switch (at routes.js:27)
    in Router (created by BrowserRouter)
    in BrowserRouter (at routes.js:26)
    in Routes (at src/index.js:20)
    in Provider (at src/index.js:19)
    in App (at src/index.js:24)"

  20. bobby Top

    why do i get cannot read property map of undefined..i copied everything but still

  21. Dimitar Getsov

    i am on windows 10 pro. when i close one of the sockets, the server crashes.Error: read ECONNRESET

    at TCP.onStreamRead (internal/stream_base_commons.js:205:27)

    Emitted 'error' event on WebSocket instance at:

    at WebSocket.finalize (C:UsersdimegDownloadsfcc-project-tutorials-masterfcc-project-tutorials-masterchatnode_moduleswslibwebsocket.js:190:41).

    any help?

  22. Vaughan Scott

    Both messages in components/MessagesList and users in components/Sidebar are undefined.
    I don't understand redux well enough to know where they is passed from.
    can Someone please help.

  23. Ivan

    Thanks, but what about to run this app from different devices? I tried to do this by connecting via my phone, which had been connected to the same network as laptop. But I didn`t get messages from different divices. Can anybody tell me the reason ?

  24. Pedro Henrique

    This isn't a tutorial, is something like "Watch me code like crazy, without testing anything and doing things in a crazy order" lol

  25. KING

    Are you going to deploy it

  26. Bhanu Tez

    now I understand why this has poor views..

  27. dimitar getsov

    After opening the chat (at localhost:3000) i got the next (in the Console):

    WebSocket connection to 'wss://localhost/' failed:

    setupSocket @ main.chunk.js:929

    ./src/index.js @ main.chunk.js:664

    _webpack_require_ @ bundle.js:785

    fn @ bundle.js:151

    1 @ main.chunk.js:996

    _webpack_require_ @ bundle.js:785

    checkDeferredModules @ bundle.js:46

    webpackJsonpCallback @ bundle.js:33

    (anonymous) @ main.chunk.js:1

    Any help will be highly appreciated.

Leave a Reply