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
Who should take this course?2:09
Tools and Software required for this course1:40
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
Simple example of Socket.IO - Theory5:01
Demo - Simple example of Socket.IO13:39
Introduction to React JS boiler template - Part-I8:09
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
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
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
Modify Socket.IO server application6:57
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
Implicit connection to default namespace6:25
What's new in Socket.IO 3.x? - Part - II2:41
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
Simple stock function component with hooks14:07
Migration - Namespace Stock Example5:23
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

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
Writing Mongo DB queries8:11
Creating Socket.IO application using Express JS and Socket.IO - Part I15:09
Creating Socket.IO application using Express JS and Socket.IO - Part II11:16
Creating pizza order application using React2:50
Writing service logic9:15
Writing component logic - Part - I17:03
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
Migration - Pizza Order Example4:54
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
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
Creating end user Voting application using React JS13:41
Writing service logic8:11
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
Creating Socket.IO application using Express JS and Socket.IO - Part I11:06
Creating Socket.IO application using Express JS and Socket.IO - Part II8:02
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
Add global chart option object5:10
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
Final Test of the solution with KPI Chart4:16
Section - 3 Migration Steps9:07

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: