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
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
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
how to add firebase to this chat?
Nice
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
Really useful, thanks!
You got the knowledge, but the way you teaching is horrible what a waste
Why socket.io? Why no middleware? Skipped…
go in sockets/index.js, then in socket.onmessage(),then in switch() delete the whole case types.ADD_USER-
the chat still works.
awesome tutorial:D
This is a great tutorial on how to debug an application
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.
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 :/
special guest at 37:10
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?
Now, any direction on making this work with actual users instead of Chance?
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.
getting error: WebSocket connection to 'wss://localhost:8989/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
i have some problem
Sidebar.PropTypes = {
users: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}).isRequired
),
};
Great tutorial Beau, greatly appreciated!
Way too fast slow down, you also need to explain what you're doing…
thanks Beau, great tutorial and explanation. If I may can you create one for react native which connects to backend (preferably using Mongo DB)?
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.
That's a good beginner app. You taught it very well! :))
Helped me a lot. Thanks for this video. Keep it up.
I have clone this repo but am getting users is undef where is it loaded?
Beau!! Beau!! Beau!!
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.
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.
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)"
the most buggy tutorial I have ever seen
why do i get cannot read property map of undefined..i copied everything but still
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?
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.
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 ?
This isn't a tutorial, is something like "Watch me code like crazy, without testing anything and doing things in a crazy order" lol
Are you going to deploy it
37:09 What was that? I mean … the sound
43:33 LMAO. <3
now I understand why this has poor views..
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.
for the next videos please enable IDE eslint!
You're so careless when typing, a lot of typos