Socket.IO (with websockets) - the details. (socket io v2)
Socket.IO (with websockets) - the details. (socket io v2)

Socket io. For those who want to learn how to harness real-time communication on the web. With Cluster, redis, & React

Created by Robert Bunch
Language English

Socket.IO (with websockets) - the details. (socket io v2)

Socket.IO (with websockets) - the details. (socket io v2)
Socket.IO (with websockets) - the details. (socket io v2)

Socket io. For those who want to learn how to harness real-time communication on the web. With Cluster, redis, & React

Created by Robert Bunch
Language English
1. Introduction
  • 1. Course Overview 00:05:17
  • 2. All my code (github link) .html
2. Before Socketio
  • 1. Pre-socketio 00:06:25
  • 2. Housekeeping - How I do nodeexpress 00:05:17
  • 3. TCPUDP and networking 101 00:18:07
  • 4. Networking 201 - What is a socket and why should I care 00:15:36
  • 5. HTTP vs Websockets 00:04:28
  • 6. A short overview of native websockets (finally some code!!) 00:21:05
3. Socket.io 101
  • 1. Intro 00:01:03
  • 2. The basics & socket.io vs. ws 00:16:03
  • 3. Why socket.io This is why. 00:16:01
  • 4. Small Chat app - in socket.io! 00:07:49
  • 5. Docs - The server 00:12:31
  • 6. The big 3 - .emit .on .connect 00:09:33
  • 7. Docs - The Client 00:09:24
  • 8. Finishing the chat app 00:16:58
  • 9. Quick Checklist Review 00:06:18
4. Socket.io 201 - Lets make it Slack!
  • 1. Namespaces 00:23:28
  • 2. NamespaceGroup Cheatsheet .html
  • 3. Rooms 00:21:34
  • 4. Going Slack (project) - Overview & Steps 00:15:52
  • 5. Folder structure & DOM overview 00:08:18
  • 6. Setting up our data and classes 00:10:56
  • 7. Slack Steps 1-3 00:19:47
  • 8. Slack - Steps 4-6 00:12:48
  • 9. Refactoring and Reorganizing our code 00:06:02
  • 10. Slack - Joining a Room- Steps 7-9 00:23:27
  • 11. Slack - Sending the history - Steps 7-9 continued 00:18:29
  • 12. Slack - Linking up NS and Group & Final Touches 00:19:24
  • 13. Passing query data on connection 00:06:33
  • 14. Line by line review of the project 00:21:22
  • 15. Docs Checklist Update 00:06:32
5. Multiplayer Canvas Game - Agar.io clone
  • 1. Project repo .html
  • 2. Project Intro 00:12:47
  • 3. Project Strategy 00:10:30
  • 4. Socket.io App Organization 00:17:11
  • 5. Getting the DOM setup 00:15:45
  • 6. Time to draw! 00:30:19
  • 7. Add Sockets (and orbs) 00:14:35
  • 8. Wiring up the server for collisions 00:21:31
  • 9. Connecting the client and server 00:07:56
  • 10. Tick-Tock - 30FPS 00:22:06
  • 11. Collision Testing (the Math part) 00:10:59
  • 12. Collision Testing (The Socket Part) 00:13:54
  • 13. Collision Testing (The Socket Part 2) 00:10:55
  • 14. Updating the LeaderBoard 00:10:17
  • 15. Disconnecting and broadcasting a message 00:15:41
6. Advanced Project - Adding React cluster & redis - a performance monitor
  • 1. Project Demo 00:04:05
  • 2. Project Setup and dependencies 00:05:21
  • 3. Installing Redis on Windows 00:03:46
  • 4. Architecture 00:18:10
  • 5. Getting performance data 00:10:25
  • 6. Getting performance data - part 2 00:15:30
  • 7. How the cluster module works 00:12:45
  • 8. Using the cluster module - Master 00:08:15
  • 9. Using the cluster module - workers 00:10:12
  • 10. Connecting nodeClient to the socket server 00:06:10
  • 11. Start the ticking clock 00:12:12
  • 12. MongoMongoose Schema and a small fix 00:15:48
  • 13. Adding a record 00:07:47
  • 14. Create React App Overview 00:03:37
  • 15. Connecting React to the socket server for re-useable 00:07:37
  • 16. Basic React Component Architecture 00:04:49
  • 17. Setup React Components 00:05:48
  • 18. Setting our widget state 00:16:30
  • 19. CPU widget canvas 00:08:30
  • 20. Mem and Info widgets 00:11:46
  • 21. Adding isActive disconnect and final touches 00:23:06
7. Supplemental Videos
  • 1. HTTP 101 00:14:12