RTC using Socket.IO 4.x and React JS 17.x with React Hooks

Name: RTC using Socket.IO 4.x and React JS 17.x with React Hooks
Rating: 3.7 (12 reviews)

Learn how to build RTC applications using Socket.IO 4.x, MongoDB and React JS 17.x using function components with hooks

Created byPravinkumar Dabade

Last updated 4/2021

English

What you'll learn

Basics of Socket IO library
Understand Socket IO Server and Client APIs
Understand the problems which you will face while building RTC applications and solutions for each problem
Database communication using Socket IO
How to broadcast messages when data is updated out of Socket IO applications
Learning Server and Client side Socket IO APIs by build number of applications using Express JS framework and React JS library
Use RxJS Observable in React JS
How to display KPI chart
Migration to Socket IO 4.x
Functional Components using React hooks

Course content

4 sections • 62 lectures • 8h 23m total length

Introduction4:46
Learn real-time communication with Socket.IO 4.x in React using hooks through hands-on projects, from live data updates to multi-application sharing, including livestock updates, tweets, and a pizza order app.
Who should take this course?2:09
Identify who should take this course: developers and students eager to learn socket.io for real-time communication, and understand client and server APIs, prerequisites, and common challenges.
Tools and Software required for this course1:40
Prepare prerequisites for rtc using socket.io and react: install an ide, a node.js lts, optional create react app via npm, and mongodb community server.
Introduction to Socket.IO11:00
Explore socket.io, a real-time bidirectional communication library for browser and server, not a WebSocket implementation, offering reliability, auto reconnect, disconnection detection, binary data, multiplexing, namespaces, and rooms.
Introduction to Socket.IO API10:38
Explore the socket.io api by building a server and client, handling connections, emitting and listening to events, and using namespaces and rooms to route messages.
Simple example of Socket.IO - Theory5:01
Build a simple socket.io real-time stock update app with an Express server. Generate fake Apple, Google, and Microsoft stocks and emit updates to clients on connect and every five seconds.
Demo - Simple example of Socket.IO13:39
Build a simple socket.io server with express, generate fake stock values for Apple, Google, and Microsoft, and emit updated stock events to connected clients every five seconds.
Introduction to React JS boiler template - Part-I8:09
Explore the React application template as a boilerplate for building socket-based client apps, install dependencies, run the dev server, and inspect the project structure and root component.
Introduction to React JS boiler template - Part-II6:54
Explore the Valpak configuration for development and production environments and how common configuration is merged into environment-specific settings. Note the dev server on port 3000 and production build output.
Introduction to RxJS Observable11:08
Explore rxjs observable, a push-based producer delivering multiple values to an observer. Compare it with promises and learn its four core parts.
Demo - Installing Socket.IO-Client and RxJS library4:03
Install the socket.io client and RxJS in a React JS 17.x app, then organize the project with components and a stocks service to fetch stock values from the socket.
Demo - Writing service logic9:00
Implement a stocks service in a React app using socket.io client and observables to fetch Apple, Google, and Microsoft stock values via socket events.
Demo - Writing component logic10:55
Create a Stocks class component using a code snippet, fetch Apple, Google, and Microsoft stock values in componentDidMount, update state, and render them in a table.
Do you see a problem?5:20
Identify why multiple clients see different stock values due to blocking and non blocking operations in Norges runtime, and show how the event loop handles requests.
Introduction to Namespace and Room4:44
Introduce a namespace and a stocks room to broadcast stock updates to all connected clients, enabling join and broadcast of messages within a dedicated namespace and room.
Modify Socket.IO server application6:57
Modify the socket.io server by creating a namespace and a stocks room, allowing clients to join the stocks group and receive broadcast stock values every two seconds.
Modify Socket.IO client application8:57
Modify the socket.io client to join the stocks room with the join stocks room event and display Apple, Google, and Microsoft values from the livestock's event.
What's new in Socket.IO 3.x? - Part - I9:26
Explore the changes from socket.io 3.x to 4.x, including cors configuration, origin and methods, and the removal of implicit default-namespace connections, to plan a minimal upgrade.
Implicit connection to default namespace6:25
Explore how implicit connections to the default namespace work in Socket.IO 2.x, with a default namespace middleware and next, even when clients target the live namespace.
What's new in Socket.IO 3.x? - Part - II2:41
Explore what's new in socket.io 3.x, including no implicit default namespace connections, synchronous join and leave methods. Redis adapter is no longer required and onAny replaces the use method.
What's new in Socket.IO 4.x?8:44
Explore breaking changes in socket.io 4.x, including allowEIO compatibility, immutable broadcast operators, the except method for room exclusion, and utilities like join, leave, and fetch sockets.
Migration - Simple Stock Example12:12
Migrate socket.io 4.x and react 17.x by enabling cors with origin and methods, upgrade the client to a create-react-app project, and demonstrate stock updates for Apple, Google, and Microsoft.
Introduction to React hooks12:29
Explore why react hooks arrived in react sixteen point eight and how use state and use effect power function components. Compare with class components and review data fetching and subscriptions.
Simple stock function component with hooks14:07
Learn to build a simple stock component as a functional React component with useState and useEffect, managing Apple, Google, and Microsoft stocks and rendering them from a stock service.
Migration - Namespace Stock Example5:23
Migrate a socket.io namespace example to socket.io 4.x in a react 17.x app, configuring CORS for localhost:3000 and updating the client to use IO named export.
Namespace stock function component with hooks7:28
Build a stocks functional component with React hooks, using useState and useEffect to fetch three stock values from a stocks service and display Apple, Google, and Microsoft.
No more implicit connection to default namespace5:12
Demonstrate how Socket.IO 4.x uses multiple namespaces by connecting to the live namespace explicitly, avoiding the default namespace, with middleware and client verification.

Application - we will develop2:57
Develop a real-time online pizza order app using socket.io with a MongoDB database, linking pizzas and orders, and delivering live order status updates to connected clients.
Introduction to Mongo DB2:56
Discover MongoDB, a document database with scalability and flexibility, offering enterprise, community, and cloud deployments with collections and documents mapping to code, plus real-time aggregation in a distributed system.
Writing Mongo DB queries8:11
Learn to write MongoDB queries using the terminal by creating a pizza order database, defining collections, inserting multiple documents, and retrieving data with find, pretty, and findOne.
Creating Socket.IO application using Express JS and Socket.IO - Part I15:09
Create a socket.io application with express js, wire up an http server, and use a busia namespace to fetch documents from mongodb and emit them to clients.
Creating Socket.IO application using Express JS and Socket.IO - Part II11:16
Continue building a Socket.IO app with Express, performing an aggregate group-by on the pizza orders collection, then create an orders room in the pizza namespace to broadcast new order updates.
Creating pizza order application using React2:50
Develop a pizza order application in React with Socket.IO client integration, enabling users to place orders and view real-time pizza order counts from other customers.
Writing service logic9:15
Develop and connect a socket.io client service that uses observables to stream a pizza list and order count, and emit new order events, exporting a singleton service instance.
Writing component logic - Part - I17:03
Create a React class component that loads pizza list via socket service, stores it in state, and renders a table with image, name, ingredients, Indian rupees price and order button.
Writing component logic - Part - II13:02
Advance component logic with an on click order submission that inserts a new order into the pizza orders collection, then render live per-name order counts using socket.io and React hooks.
What problem we may face?3:05
Explore the challenge of keeping the pizza order count in sync in real time across web and mobile apps, as orders placed externally may not update until a refresh.
Migration - Pizza Order Example4:54
learn how to migrate a pizza order application from socket.io 2.x to 4.x in react 17, including step-by-step code migration, client-server setup, and live count updates across two browser instances.
Pizza order function component with hooks10:58
Develop a pizza order functional component with hooks that uses a socket service to fetch pizza lists, track order counts, and place new orders, rendering in a table.

How to solve the problem?8:29
Learn how MongoDB change streams provide real-time updates between a socket-based in-house dashboard and a customer-facing app, via a replica set, watch, and rest api.
Writing MongoDB queries7:08
Set up a MongoDB replica set, initiate it, and create a technology database with two collections, then insert five documents and run a find query with pretty formatting.
Creating REST API using Node JS and Express JS framework7:47
Develop a node.js and Express REST API to fetch energy questions from MongoDB and store results in Angular Rules, using Mongoose, body-parser, CORS, and Morgan.
Writing data access logic in REST API9:06
Write data access logic for a rest api using an ECMAScript 6 class that connects to a Mongo dissembler via mortgages, with methods to fetch energy questions and insert data.
Consuming DAL in REST API and defining route9:36
Configure a two-route rest api with express to fetch energy questions via get and submit votes via post, using a data access layer and middleware integration.
Creating end user Voting application using React JS13:41
Create a single-page React JS voting app that fetches Angular questions from Engy questions collection via an Express REST API and submits votes to the database.
Writing service logic8:11
Write world service logic using axios to perform get and post requests against a rest API, handling responses and errors, exporting a default service instance for React-based applications.
Writing component logic18:04
Build a React class component that fetches questions from a rest API in componentDidMount, renders five radio-question rows, submits the answers to the API, and redirects to a thank-you page.
Configure route and Navigation link11:16
Configure routes and navigation links to lazy-load the angular voting component and the thank you component. Test the vote submission flow end-to-end.
Creating Socket.IO application using Express JS and Socket.IO - Part I11:06
Create a Socket.IO app with Express to stream real-time vote aggregates from a MongoDB replica set and display them with Highcharts, using change streams for live updates.
Creating Socket.IO application using Express JS and Socket.IO - Part II8:02
Build a real-time dashboard with Express and Socket.IO, performing a MongoDB aggregate query and emitting results to clients, with change streams notifying on data updates.
Creating in-house Dashboard application using React JS6:22
Create an in-house dashboard using React JS, extending a copied single-page app, installing dependencies, and building a dashboard with navigation and a dashboard menu, ready to connect with socket.io client.
Writing service logic8:22
Connect a dashboard service to the socket.IO server with an observable and the IO namespace. Emit a get angular volts event and stream the resulting data, handling errors as needed.
Introduction to Highcharts library7:36
Installing Highcharts library and Creating reusable component5:33
Install and integrate the high charts library with the application. Create a reusable dashboard chart component that displays the average rewards of different technologies using highcharts react with props options.
Add global chart option object5:10
Define and export a global chart options object for high chart in a shared module, configuring type, title, x axis categories, y axis title, and sample cities data for reuse.
Visualizing Technology votes using Highcharts chart - Part - I14:08
Build a React class component that renders a Highcharts chart using a chart options object to visualize angular votes, fetching data from a dashboard service and subscribing to an observable.
Visualizing Technology votes using Highcharts chart - Part - II7:35
Visualize technology votes with a Highcharts dashboard chart, wiring an observable error flow, handling subscriptions in componentDidMount and cleanup on unmount for a robust voting dashboard.
Configure route and Navigation link9:23
Configure the route and navigation link to lazy-load and render the Angular voting dashboard component, wiring it into a Socket.IO powered React app with port and configuration adjustments.
Final Test of the solution with KPI Chart4:16
Configure a KPI chart by using line plot zones to color-code values red, orange, and green. Switch between line and bar charts on the dashboard to visualize KPI data.
Section - 3 Migration Steps9:07
Migrate Socket.IO 2.x apps to 4.x and React 17.x with hooks by building voting and dashboard UIs, installing latest client libraries, and rendering vote analytics with Highcharts.

Course Conclusion2:15
Recap the course covers socket.io basics, server and client APIs, namespaces and rooms, stock and pizza order demos, and implementing change streams with MongoDB to broadcast updates to multiple clients.
Migration Conclusion0:59
Conclude the migration by reviewing completed applications such as fake stock updates and a pizza order app, presented in two sections, with migration documents guiding socket.io related steps.

Requirements

Good knowledge of React JS and should have experience of building REST APIs using Express framework
Basic understanding of Bootstrap framework [Optional]

Description

Have you ever thought of building real-time communication applications for your clients or in your organization? Are you tired of writing the same old long polling logic to get the updates from your databases? Do you want to share live updates of the data across two or more than two applications? Do you work with live stocks or tweets kind of applications?

As you know our clients or customers would like to get quick and live updates of the information like stocks, currencies, the sales data, tweets etc. Or they want to build live collaborative applications for the customers/in-house projects. This is where we can think of Real-time Communication and we can achieve that using one of the most popular library Socket.IO. Easy to learn and easy to implement.

This course is a complete hands-on course where we will take few real-time scenarios and develop several applications step-by-step. At the end of this course, you will have better understanding of Socket.IO library and you will be able use this library to build RTC applications. We will build several client application using React JS library along with RxJS Observable.

Important Note - This course now is updated from Socket.IO 2.x to 4.x along with React JS 17.x. Also, we are using React function components with hooks.

Who this course is for:

Students who want to learn Real-time communication using Socket IO library to enable various scenarios in their applications
Students who want to understand why, where and how to use Socket IO library using various examples
Learn what's new in Socket IO 3.x and 4.x
Students will learn migration from Socket IO 2.x to 4.x

RTC using Socket.IO 4.x and React JS 17.x with React Hooks

What you'll learn

Explore related topics

Course content

Introduction27 lectures • 3hr 29min

Let's order Pizza12 lectures • 1hr 42min

Developing Technology Voting Real-time Dashboard21 lectures • 3hr 10min

Course Conclusion2 lectures • 3min

Requirements

Description

Who this course is for: