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.
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.
@@armanrozika not necessarily. There are potential performance benefits, and it can help to make your code more readable. If someone can immediately recognize if a variable isn't going to change, that can help prevent bugs in the future.
where does the text update in the view? do you mean the box where he types the message? If thats the case, I think he did add onChange or something to it. without which he wont be able to pass the typed message back to other components.
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.
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?
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
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.
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:\Users\dimeg\Downloads\fcc-project-tutorials-master\fcc-project-tutorials-master\chat ode_modules\ws\lib\websocket.js:190:41). any 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 ?
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 :/
i have some problem Sidebar.PropTypes = { users: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, }).isRequired ), };
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)"
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.
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?
Sorry, that problem with Chance is a Chrome thing. I was able to get it to work easily when I went over to Firefox. The same with the server. Sometimes Chrome drives me crazy.
Or... just drag a folder from your Explorer (windows), Finder (mac) or whatever file manager you use (Linux) into Sublime Text sidebar. You can then save that as a named project under the Project menu so that you get the project specific sidebar for each project you're working on.
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.
Lost me on the first line of code. What programme has "arrow chat" as a prompt? Looks like something out of the '80s! Can I do this on a modern MacBook Pro?
So I solved all of the errors after doing node app.js for the server terminal, which I had opened as admin, but the random generated names dont show up, and messages from different localhost3000s dont show up, just whatever has been written in that window is shown
It was a great tutorial. Nice to see a complete demo in 1.5 hours. Spellings mistakes set off my OCD a little, but great tutorial. It's really nice to watch you code and give light explanations. Most tutorials move too slow for someone who is experienced with similar tech, but new to a topic.
you should really use webstorm or visualstudiocode - something with autocomplete. The typing errors and watching you type out variables and constants was a little frustrating
This is a great tutorial on how to debug an application
Great tutorial Beau, greatly appreciated!
Since you're using pure ES6 syntax, I would highly suggest you to prefer [...state, newMessage] instead of state.concat().
that and state.concat() does not add anything bc of the rules of immutability we can not mutate so with concat we create a new version of ect.....
@@Pineapplelesspineapplepizza the same thing happens with spread operator.
That's a good beginner app. You taught it very well! :))
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 :)
Neil Jon
Oh boy
www.robinwieruch.de/react-ref-attribute-dom-node/
Helped me a lot. Thanks for this video. Keep it up.
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.
Can you make a tutorial for deploying this chat application?
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.
Really useful, thanks!
Now, any direction on making this work with actual users instead of Chance?
thanks for putting up this video
go in sockets/index.js, then in socket.onmessage(),then in switch() delete the whole case types.ADD_USER-
the chat still works.
There's a little girl whispering at 37:08 *creepy*! haha
Nahuel José seriously creepy as hell, for all we know this could be on another video of "top 10 SCARIEST things caught of RUclips".lol
You can hear it again on 43:01, dude be coding, teaching and babysitting at the same time
you are right. LOL
at first i thought it was a cat
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:13 code is wrong.
nextUserId is a const. One cannot perform the nextUserId++ operation.
In actions/index.js instead of doing 'const nextUserId = 0' change it to 'let nextUserId = 0'
@@joewazhere I think it is better to always use 'let' instead of 'const'
@@armanrozika not necessarily. There are potential performance benefits, and it can help to make your code more readable. If someone can immediately recognize if a variable isn't going to change, that can help prevent bugs in the future.
This isn't a tutorial, is something like "Watch me code like crazy, without testing anything and doing things in a crazy order" lol
Every time he imports something before creating it, take a drink.
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
or am i thinking of a react-native only thing?
where does the text update in the view? do you mean the box where he types the message? If thats the case, I think he did add onChange or something to it. without which he wont be able to pass the typed message back to other components.
@@blasttrash yea i mean the the text input doesnt have a value="this.state.message" which updates the box with the values that you type.
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.
special guest at 37:10
for the next videos please enable IDE eslint!
37:09 What was that? I mean ... the sound
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?
Are you going to deploy it
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
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.
Great video. Question: why Saga and not Observable?
thanks its a great 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?
have you installed yarn before?
yarnpkg.com/en/
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:\Users\dimeg\Downloads\fcc-project-tutorials-master\fcc-project-tutorials-master\chat
ode_modules\ws\lib\websocket.js:190:41).
any 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 ?
Beau!! Beau!! Beau!!
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 :/
How can we add authentication ?
I have clone this repo but am getting users is undef where is it loaded?
getting error: WebSocket connection to 'wss://localhost:8989/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
why do i get cannot read property map of undefined..i copied everything but still
i have some problem
Sidebar.PropTypes = {
users: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}).isRequired
),
};
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)"
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.
Somehow it's working now but I still don't get the messages that are added.
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?
Sorry, that problem with Chance is a Chrome thing. I was able to get it to work easily when I went over to Firefox. The same with the server. Sometimes Chrome drives me crazy.
@@SilvaOnTube Have You found some solution with Chrome?I am ready to pay!!
@@dimitargetsov5040 Sorry, nope.
43:33 LMAO.
Way too fast slow down, you also need to explain what you're doing...
If this is Sublime Text, how you can set a folder/files list in left of screen in Sublime's settings?
It's an extension called SideBarEnhancements for Sublime Text.
project -> add folder to project (then ctrl+k and ctrl+b in quick succession to open/close it).
Or... just drag a folder from your Explorer (windows), Finder (mac) or whatever file manager you use (Linux) into Sublime Text sidebar. You can then save that as a named project under the Project menu so that you get the project specific sidebar for each project you're working on.
perfect!!!! thanks.
You need to slow down.. this isnt a tutorial its a "watch me code this chat app"
This is not a beginner course, learn the basics of React and Redux and go back to this video.
awesome tutorial:D
I don't think not using semicolons is a good habit to be taught.
It's a pretty bad practice tbh.
@@pubgmobilehighlights9885 it was done away with from the start of 2018 pls keep up with ES documentation.
foken snobas
why's that? is there a particular reason semicolons are essential?
Hey bro, what text editor you use and what theme?
Thanks
Nice job.
I guess SublimeText and Monokai theme
Sublime with its default theme
@@hamzahajji5814 hahaha
@@maxkinli What's funny, Chandler?
great job
how to add firebase to this chat?
Why socket.io? Why no middleware? Skipped...
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.
Lost me on the first line of code. What programme has "arrow chat" as a prompt? Looks like something out of the '80s! Can I do this on a modern MacBook Pro?
Sorry, should have been more clear. That is just a normal console with some updated styling.
Nice
now I understand why this has poor views..
Nice bro
didnt work :|
What specifically didn't work?
So I solved all of the errors after doing node app.js for the server terminal, which I had opened as admin, but the random generated names dont show up, and messages from different localhost3000s dont show up, just whatever has been written in that window is shown
The teacher's keyboard usage is very frustrating.
You can cash back all your money you paid for this lesson !
What specifically is frustrating? We're always looking for ways to improve!
Watch the video at 1.5x :) I almost never watch tutorial videos at 1x
It was a great tutorial. Nice to see a complete demo in 1.5 hours. Spellings mistakes set off my OCD a little, but great tutorial. It's really nice to watch you code and give light explanations. Most tutorials move too slow for someone who is experienced with similar tech, but new to a topic.
you should really use webstorm or visualstudiocode - something with autocomplete. The typing errors and watching you type out variables and constants was a little frustrating
the most buggy tutorial I have ever seen
Way cool.