Узнайте, как подключить стек MERN к WebRTC и SocketIO. Мы пройдем все этапы создания приложения с функцией группового звонка. Мы создадим реализацию WebRTC, чтобы показать, как вы можете разрабатывать приложения WebRTC благодаря simple-peer. Мы будем использовать SocketIO в качестве сервера оповещения для нашего приложения и для связи в реальном времени. После этого курса вы сможете создать собственное приложение, которое будет использовать WebRTC.
Неважно, будет ли это игра в режиме реального времени или видеочат. Вы узнаете, как установить соединение между узлами (пользователями).
Мы объединим стек MERN, что означает: MongoDB, Express, React, Node с WebRTC и SocketIO для возможности связи в реальном времени.
В этом курсе мы создадим проект с нуля и пройдем все этапы вместе. Функционал, который мы создадим, будет:
Вход/Регистрация (Аутентификация с токеном JWT)
Друзья / Система приглашения друзей
Функциональность чата в реальном времени (SocketIO и MongoDB)
Создание комнаты видеогруппы
Требования к курсу:
Базовые знания о React
Основы Node
Было бы здорово иметь некоторые знания о веб-сокетах (SocketIO). Это не обязательно, но было бы определенно легче понять часть функций чата и видеочата.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Creating project structure and initializing a Project
Урок 6.
00:06:18
Installing necessary packages with NPM
Урок 7.
00:06:25
Creating Express Server
Урок 8.
00:02:05
Nodemon - adding script to automatically restart server after changes
Урок 9.
00:02:49
Creating MongoDB Database in Cloud
Урок 10.
00:06:42
Preparing for connection with database
Урок 11.
00:04:13
Connecting with database from our server and testing connection
Урок 12.
00:08:24
Creating folder structure and authentication routes
Урок 13.
00:01:29
Testing routes with Postman
Урок 14.
00:05:49
Moving handlers to controllers folder
Урок 15.
00:05:33
Adding request validation with Joi
Урок 16.
00:04:20
Testing Route validations with Postman
Урок 17.
00:02:26
More about Joi
Урок 18.
00:02:54
Creating User Model
Урок 19.
00:10:30
Creating Register functionality
Урок 20.
00:03:02
Testing Registration Route
Урок 21.
00:06:20
Creating Login functionality
Урок 22.
00:04:03
Testing login functionality
Урок 23.
00:05:44
Creating JWT Token
Урок 24.
00:02:37
Testing if token is being returned by server
Урок 25.
00:08:38
Creating middleware to check if token is valid and not expired
Урок 26.
00:07:25
Trying to access protected route
Урок 27.
00:03:20
Module introduction
Урок 28.
00:03:53
Initializing React Application with Redux
Урок 29.
00:04:53
Installing necessary dependencies
Урок 30.
00:03:28
Starting React App and removing unnecessary files
Урок 31.
00:09:24
Configuring Redux Store
Урок 32.
00:07:29
Adding Routing to App
Урок 33.
00:11:34
Creating Authentication Box Component with MaterialUI
Урок 34.
00:06:10
More about MaterialUi and Creating Login Page Header
Урок 35.
00:12:50
Creating custom input component
Урок 36.
00:08:48
Creating Custom Button
Урок 37.
00:08:05
Creating Redirect Component
Урок 38.
00:03:42
Creating Tooltip Message On Mouse Over
Урок 39.
00:11:44
Creating Custom Validator
Урок 40.
00:18:50
Creating Register Page
Урок 41.
00:04:19
Preparing for connection with our server (API)
Урок 42.
00:10:29
Preparing Authentication Actions
Урок 43.
00:06:09
Dispatch Actions from React Components
Урок 44.
00:09:49
Testing Login Actions and Registration Actions and explaining redux flow
Урок 45.
00:06:03
Creating Custom Alert
Урок 46.
00:08:16
Preparing Store for Alert Messages
Урок 47.
00:08:02
Displaying Server Messages
Урок 48.
00:09:13
Adding JWT token to Requests
Урок 49.
00:01:25
Quick Fix for Axios Headers
Урок 50.
00:02:15
Module introduction - Dashboard UI
Урок 51.
00:11:24
Creating Dashboard Structure
Урок 52.
00:06:48
Creating Main Page Button
Урок 53.
00:04:34
Add Friend Button
Урок 54.
00:07:23
Sidebar
Урок 55.
00:16:27
Material UI - Add Friend Dialog
Урок 56.
00:02:27
Dialog Buttons
Урок 57.
00:12:46
Preparing Friends List
Урок 58.
00:04:14
Online Indicator
Урок 59.
00:11:07
Creating Dummy Invitations List
Урок 60.
00:06:54
Invitations List - Decision Buttons
Урок 61.
00:06:32
Dropdown Menu with logout functionality
Урок 62.
00:07:10
Checking if token exists on Dashboard Page
Урок 63.
00:01:23
Module Introduction
Урок 64.
00:06:17
Connecting SocketIO to our Server
Урок 65.
00:06:54
Connecting to SocketIO Server From Client Side
Урок 66.
00:03:04
Adding JWT Token to Event Emitted To Server
Урок 67.
00:06:58
Validating JWT Tokens at Server Side
Урок 68.
00:09:11
Server Store - Saving Information About Connected Users
Урок 69.
00:01:51
Testing Server Store
Урок 70.
00:07:19
Creating Disconnect Handler
Урок 71.
00:06:31
Redux - Preparing Actions And Reducers for Friends Logic
Урок 72.
00:06:58
Preparing Action To Send Friend Invitation
Урок 73.
00:05:06
Connecting Send Friend Invitation Action To Dialog
Урок 74.
00:13:20
Creating Server Routes - Friends Invitations
Урок 75.
00:03:16
Creating Friend Invitation Model
Урок 76.
00:05:50
Custom Friend Invitation Validation
Урок 77.
00:01:14
Testing Friends Invitations Custom Validations
Урок 78.
00:08:41
More Custom Validation Related With Friend Invitations
Урок 79.
00:04:08
Saving Friend Invitation In Database
Урок 80.
00:03:35
Testing Friend Invitations
Урок 81.
00:04:34
Preparing SocketIO Client Event Listeners for Realtime Friends Invitations
Урок 82.
00:08:14
Preparing at Server Pending Friend Invitations
Урок 83.
00:14:13
Emitting Events to Clients of Specific ID
Урок 84.
00:05:16
Testing Real Updates of Friends Invitations
Урок 85.
00:04:39
Fixing Bugs and Retesting
Урок 86.
00:04:12
Rendering Real Pending Invitations List
Урок 87.
00:03:00
Fixing Bug With Pending Invitations Rendering
Урок 88.
00:02:50
Initial Update Of Pending Invitations
Урок 89.
00:03:44
Testing Initial Invitations
Урок 90.
00:09:25
Preparing Client Side To Accept Or Reject Friend Invitation
Урок 91.
00:09:14
Preparing Decision Controllers
Урок 92.
00:05:56
Creating Logic Of Rejecting Invitation
Урок 93.
00:01:24
Testing Rejection Of Friend Invitation
Урок 94.
00:10:50
Accepting Friend Invitation Logic
Урок 95.
00:03:40
Testing Friend Invitation Acceptation
Урок 96.
00:06:00
Preapring Client Side For Friends Updates
Урок 97.
00:09:30
Creating Server Logic For Real Friends Updates
Урок 98.
00:03:48
Testing Friends Updates
Урок 99.
00:08:25
Connecting Online User Indicator
Урок 100.
00:08:19
Online Indicator at React Side
Урок 101.
00:03:49
Module Introduction
Урок 102.
00:07:31
Preparing Redux Store For Chat Functionality
Урок 103.
00:06:36
Choosing Active Conversation
Урок 104.
00:06:27
Creating Chat Label
Урок 105.
00:05:45
Creating Messenger UI
Урок 106.
00:04:49
Creating Messages Container
Урок 107.
00:09:40
Creating Message Header
Урок 108.
00:15:19
Rendering Single Messages
Урок 109.
00:10:10
Creating New Message Input
Урок 110.
00:00:44
Fixing Input Width
Урок 111.
00:06:04
Emitting Event With Direct Message
Урок 112.
00:17:19
Creating Handler For Direct Message Event
Урок 113.
00:04:21
Testing Direct Message Handler
Урок 114.
00:12:37
Preparing Realtime Chat Updates
Урок 115.
00:04:55
Adding Initial Chat Update
Урок 116.
00:11:50
Testing Real Chat Updates
Урок 117.
00:10:35
Updating Store Messages
Урок 118.
00:05:08
Fixing Bug With Messages Store State
Урок 119.
00:08:33
Rendering Real Messages
Урок 120.
00:06:01
Debugging Author Username
Урок 121.
00:03:10
Fixing Bug With Update Of First Message
Урок 122.
00:06:34
Creating Date Separator
Урок 123.
00:01:39
What is WebRTC ?
Урок 124.
00:01:17
How WebRTC is working ?
Урок 125.
00:01:11
What is STUN Server ?
Урок 126.
00:02:07
What is TURN Server ?
Урок 127.
00:01:37
What is SDP ?
Урок 128.
00:01:44
What are ICE Candidates ?
Урок 129.
00:03:12
How to establish connection between Peers ?
Урок 130.
00:06:42
Module Introduction
Урок 131.
00:06:56
Preparing Store State
Урок 132.
00:03:26
Creating Room Button
Урок 133.
00:10:16
Changing State if User is in Room
Урок 134.
00:07:54
Creating Main Room Component
Урок 135.
00:06:51
Adding Resize Functionality To Room
Урок 136.
00:05:40
Creating Structure of Room Dialog
Урок 137.
00:15:04
Creating Room Buttons
Урок 138.
00:17:15
Creating Room at Server Side
Урок 139.
00:06:38
Testing Room Create Events
Урок 140.
00:11:50
Broadcasting Active Rooms To All Online Users
Урок 141.
00:06:23
Saving Active Rooms in Store
Урок 142.
00:02:26
Fixing Bug With Setting Active Rooms
Урок 143.
00:13:51
Rendering Active Rooms
Урок 144.
00:12:49
Joining Active Room at Server Side
Урок 145.
00:06:17
Testing Joining Room Functionality
Урок 146.
00:03:30
Fixing Bugs and Retesting
Урок 147.
00:14:22
Creating Leave Room Functionality
Урок 148.
00:02:48
Testing Leave Room Functionality
Урок 149.
00:06:12
Handling Leaving Room at Disconnect Event
Урок 150.
00:04:14
Initial Update of Active Rooms
Урок 151.
00:15:05
Getting Local Stream Preview
Урок 152.
00:09:07
Creating Local Video Preview
Урок 153.
00:02:54
Getting Local Preview When Joining Room
Урок 154.
00:10:11
Adding Only Audio Functionality
Урок 155.
00:01:48
Fixing Bug With Audio Only
Урок 156.
00:03:50
Stopping All Tracks When Leaving a Room
Урок 157.
00:04:44
Mesh Architecture Theory
Урок 158.
00:03:13
Installing Simple Peer package
Урок 159.
00:06:46
Events Related With Connection
Урок 160.
00:06:33
Preparing for Incoming WebRTC Connection
Урок 161.
00:14:54
Preparing Peer Connection Object
Урок 162.
00:06:48
Emitting Event to Initialize Connection
Урок 163.
00:02:19
Testing Creating Peer Connection Objects
Урок 164.
00:09:30
Exchanging Signaling Data
Урок 165.
00:02:51
Testing Signaling Data Exchange
Урок 166.
00:03:29
Fixing Simple Bug And Testing RTC Connection
Урок 167.
00:08:31
Rendering Remote Streams
Урок 168.
00:20:11
Closing RTC Connection and Removing Remote Streams
Урок 169.
00:03:24
Fixing Bug When Last User Will Leave Room
Урок 170.
00:05:12
Connecting Logic To Video Button
Урок 171.
00:02:38
Connecting Logic To Mute Button
Урок 172.
00:11:39
Preparing Logic For Screen Sharing
Урок 173.
00:07:11
Switching Outgoing Video Tracks in Active Peer Connections
Урок 174.
00:03:55
Fixing Switching Off Screen Sharing
Урок 175.
00:02:14
Showing Preview of Screen Sharing
Урок 176.
00:02:40
Stopping All Tracks when User is Leaving Room
Урок 177.
00:08:33
Hidding Buttons Depends if Audio Only is Enabled
Урок 178.
00:07:36
Giving Room Owner Possibility to Re-join Room which he created
Автор - udemy
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Приложение с подпиской React Node Stripe MongoDB (MERN)
React Node Stripe MongoDB (MERN) Subscription App
Система подписки — это повторяющаяся система выставления счетов, которую вы будете взимать со своих клиентов каждый месяц за предоставление определенной услуги. Используя Stripe, вы сможете создать полностью совместимую безопасную платежную систему, чтобы получать данные кредитной карты пользователя, позволять им обновлять, приостанавливать или отменять свои планы и даже обновлять данные своей карты, и все это со страницы учетной записи в в
Это приложение для доставки пиццы Full Stack (MERN), разработанное с использованием React, Redux для асинхронных операций. Node JS для среды выполнения, Express JS для backend маршрутизации и Mongo DB для базы данных.
Сайт Электронной Коммерции MERN Stack - React, Redux, Node.js
MERN Stack Full Ecommerce Site - Using React, Redux, Node.js
Если вы хотите изучить полноценную веб-разработку с использованием стека MERN, то вы попали на нужную страницу. В этом курсе вы узнаете, как создать полнофункциональный веб-сайт электронной коммерции с использованием MERN Stack. В этом курсе мы будем использовать четыре мощные технологии: React (Frontend), Node.js (Backend), Express (Backend Framework), MongoDB (база данных).
MERN Stack E-Commerce Mobile App with React Native [2021]
Создание кроссплатформенных мобильных приложений стало менее трудоемким и более эффективным благодаря одной из самых популярных платформ React Native. Это не курс чтения документации. У вас есть реальный проект, на котором можно учиться, и вы увидите точное место каждой функции каждой технологии, используемой в этом курсе. Вы узнаете, как создать мобильное приложение для iOS и Android со стеком MERN с использованием React Native.