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
i have some problem
Sidebar.PropTypes = {
users: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}).isRequired
),
};
getting error: WebSocket connection to 'wss://localhost:8989/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
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.
Now, any direction on making this work with actual users instead of Chance?
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?
special guest at 37:10
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 :/
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.
This is a great tutorial on how to debug an application
awesome tutorial:D
go in sockets/index.js, then in socket.onmessage(),then in switch() delete the whole case types.ADD_USER-
the chat still works.
Why socket.io? Why no middleware? Skipped…
You got the knowledge, but the way you teaching is horrible what a waste
Really useful, thanks!
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
Nice
how to add firebase to this chat?
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
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
thanks its a great tutorial..
How can we add authentication ?
React with MOBX tutorial please
didnt work 😐
You need to slow down.. this isnt a tutorial its a "watch me code this chat app"
Since you're using pure ES6 syntax, I would highly suggest you to prefer […state, newMessage] instead of state.concat().
worthless
I don't think not using semicolons is a good habit to be taught.
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 🙂
what is the equivalent of 'sudo chmod 0777 ./server/app.js' in windows?
There's a little girl whispering at 37:08 *creepy*! haha
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?
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.
When I try to run Yarn start I get Command not found, am I using a wrong version of Node or am I missing something?
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
Double click + Cmd(Ctrl) + D to select the next occurrence and edit both one time. I was looking for this command, thanks!