Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Add chat activity detection to your Socket.io Chat App. In this tutorial, you will learn how to detect chat activity from users and broadcast it with socket.io. This will allow users to know someone else is typing a message.
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
Subscribe https://bit.ly/3nGHmNn
Course Updates https://courses.davegray.codes/
Questions - Please post them to my Discord https://discord.gg/neKghyefqh
Buy Me A Coffee https://www.buymeacoffee.com/davegray
Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Source Code: https://github.com/gitdagray/build-chat-app
Playlist for this Building a Chat App Course: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6NOkbTDxKi7grs_oxJhLu07
Chat Activity Detection - Build a Chat App with Socket.io
(00:00) Intro
(00:34) Welcome
(00:55) Starter Code & Lesson Goal
(01:10) Place Activity Display in HTML
(01:54) Detect Activity in the Client App
(04:14) Determining Recipients in Socket.io
(06:51) Listening for Events with Socket.io
(08:59) Listening for & displaying activity in the client
(10:34) Running the app
(12:16) Improving the Activity Detection
Tutorial References:
Node.js Official Site: https://nodejs.org
MDN WebSockets: https://developer.mozilla.org/en-US/docs/Glossary/WebSockets
Socket.io Official Site: https://socket.io/
Express Official Site: https://expressjs.com/
Dependencies:
Socket.io: https://www.npmjs.com/package/socket.io
Socket.io Client library: https://cdnjs.com/libraries/socket.io
Express: https://www.npmjs.com/package/express
Was this tutorial providing an Express chat app server helpful? If so, please share. Let me know your thoughts in the comments.
#socketio #chat #app