К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Build a Dynamic File Transfer App with WebRTC · LearnSpace
Назад в каталог
courseraПрограммирование

Build a Dynamic File Transfer App with WebRTC

Курс от Packt
Средний≈ 13.4 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course empowers you to build a modern, peer-to-peer file transfer application using WebRTC, combining practical coding with real-world networking concepts. You’ll explore file handling, chunking, memory management, and data compression techniques, gaining hands-on experience with cutting-edge browser APIs. The curriculum emphasizes robust and efficient file transfer workflows, preparing you to tackle real-time application challenges confidently. You’ll begin by setting up the project environment, including HTML, CSS, Node.js, WebSocket connections, and client-server state management. Step-by-step guidance covers signaling, session validation, and debugging techniques, ensuring a strong foundation for real-time communication. Next, the course dives into WebRTC setup from scratch, exploring peer connections, data channels, ICE candidates, and transfer protocols. You’ll learn to read, chunk, compress, and stream files efficiently using FileReader, Blobs, and the Streams API, implementing progress tracking and error handling for seamless user experience. Ideal for web developers, software engineers, and IT professionals, this intermediate-level course requires basic JavaScript, HTML, and Node.js knowledge. It targets those seeking practical skills in real-time web applications and efficient file transfer solutions. By the end of the course, you will be able to set up WebRTC connections, manage client-server communication, implement chunked and compressed file transfers, utilize Streams API for large files, monitor memory, handle errors, and build a fully functional, dynamic peer-to-peer file transfer application.

Навыки, которые вы освоите

File I/OMemory ManagementFile Transfer Protocol (FTP)DebuggingPerformance TuningData ValidationNode.JSEvent-Driven ProgrammingData Import/ExportScalabilityFrontend PerformanceJSONVerification And ValidationServer SideReal Time DataSession Initiation ProtocolsUser Interface (UI)Web ApplicationsFull-Stack Web DevelopmentApplication Programming Interface (API)

Программа курса

9 модулей · 105 учебных материалов

01Introduction to Files7 материалов

Introduction to Files

Intro to This SectionВидеоFull Course ResourceЧтениеWhat Are Files?ВидеоSteps Required to Send a File Over the WireВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Build a Dynamic File Transfer App with WebRTC
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 13.4 ч

9 модулей

Язык: Английский

Часть программы вашего университета
Preparing and Sending a File Using Pseudo Python CodeВидео
Receiving, Reading, and Creating a File Using Pseudo Python CodeВидео
A More Modern Way of Sending a File Over the Network Using WebRTCВидео
02Setting Up a WebSocket Connection and Getting Project Ready13 материалов

Setting Up a WebSocket Connection and Getting Project Ready

HTML and CSS OverviewВидеоCreating Our Entry JavaScript File and Setting Up ESModulesВидеоSetting Up State on the Client SideВидеоSetting Up a WebSocket Connection on the ClientВидеоSetting Up Our Custom LoggerВидеоSetting Up a Node Server, and Spinning Up an HTTP ServerВидеоSetting Up a WebSocket Server, and Extracting the UserIdВидеоStoring Connection State for Users, on Our ServerВидеоRegistering WebSocket Event Listeners on the ServerВидеоHandling DisconnectionsВидеоSummary and TestingВидеоSetting Up a WebSocket Server and Unique User IdentificationDIALOGUESetting Up a WebSocket Connection and Getting Project Ready - AssessmentЗадание
03Intro to the File API and Using AJAX to Check the Recipient ID14 материалов

Intro to the File API and Using AJAX to Check the Recipient ID

Project Review, Minor Fixes, and Starting FilesВидеоExtracting the Receiver's Session IDВидеоSending an AJAX Request Using the Fetch API to Check Receiver's Session IDВидеоHandling the AJAX Request on the ServerВидеоFinishing Off Our Client-Side AJAX LogicВидеоTesting Our AJAX Request and Minor Bug FixesВидеоIntroduction to the File APIВидеоCreating Null Byte Files in the Terminal for Testing PurposesВидеоThe File Specification, and Viewing Heap Memory in the Browser "Memory" TabВидеоEnsuring a User Does Not Load an Empty FileВидеоCompleting Our File Upload Checking LogicВидеоEnabling the "Send" Button and Getting Ready for WebRTCВидеоValidating Recipient IDs and File Metadata Before TransferDIALOGUEIntro to the File API and Using AJAX to Check the Recipient ID - AssessmentЗадание
04Setting Up a WebRTC Connection, From Scratch!13 материалов

Setting Up a WebRTC Connection, From Scratch!

Overview of How WebRTC WorksВидеоCreating a WebRTC OfferВидеоExplaining the createPeerConnection() and createDataChannel() FunctionsВидеоSending the WebRTC Offer to the Signaling ServerВидеоRelaying the Offer to the User Receiving the FileВидеоSetting Up Incoming Message Event Listeners for Our WebSocket ConnectionВидеоReceiving the Offer, and Generating the WebRTC AnswerВидеоSending and Receiving the WebRTC AnswerВидеоDealing with ICE CandidatesВидеоPushing ICE Candidates in Our Array Into the PC ObjectВидеоTesting Code and Ending FilesВидеоEstablishing and Debugging a WebRTC Connection for File TransferDIALOGUESetting Up a WebRTC Connection, From Scratch! - AssessmentЗадание
05File Transfer Over WebRTC Using FileReader API31 материалов

File Transfer Over WebRTC Using FileReader API

The Different Ways a Browser Can Read a File Into MemoryВидеоTriggering Our sendFile() CodeВидеоSetting Up the progress Element and Testing Our CodeВидеоIntroduction to the FileReader APIВидеоBrowser and WebRTC Errors If We Use the FileReader Without ChunkingВидеоViewing the Memory Heap Growing and Shrinking in Real TimeВидеоChunking and the Send QueueВидеоWriting Logic to Chunk Our FilesВидеоUpdating the Offset Value, Reading Further Chunks, & Updating Progress ElementВидеоTesting CodeВидеоViewing the BufferedAmount Property on the Data ChannelВидеоHow We Have to Use the BufferedAmount and BufferedAmountLowThreshold PropertiesВидеоSetting Our Send Queue Thresholds and the BufferedAmountLowThresholdВидеоPause Sending When the Send Queue Buffer (AKA: BufferedAmount) Gets Too FullВидеоResume Sending When the "BufferedAmountLow" Event Is FiredВидеоTesting Our Sender Code and Attaching Coding FilesВидеоHow to Receive a FileВидеоSending File Metadata to the ReceiverВидеоRegistering the "Message" Event Listener on the Receiver's Data ChannelВидеоExtracting File MetadataВидеоHandling Chunks and Displaying StatisticsВидеоCreating a Blob Object and Using the URL Interface to Create a Downloadable LinkВидеоTesting Our Code and Discussion About Metadata LogicВидеоWhy Create One Single Blob Object?ВидеоClosing a WebRTC and Data Channel GracefullyВидеоGracefully Closing the Data Channel and the WebRTC Peer Connection ObjectВидеоClearing Variable MemoryВидеоAllowing the User to "Stop" Sending a FileВидеоFixing an Undefined ErrorВидеоWorking with the JavaScript File API and WebRTC Data ChannelsDIALOGUEFile Transfer Over WebRTC Using FileReader API - AssessmentЗадание
06File Transfer Over WebRTC Using Blobs5 материалов

File Transfer Over WebRTC Using Blobs

Blobs vs. ArrayBuffers and Starting FilesВидеоSending Blobs DirectlyВидеоThe binaryType Property of the DataChannelВидеоSending Blobs vs ArrayBuffers over WebRTC Data ChannelsDIALOGUEFile Transfer Over WebRTC Using Blobs - AssessmentЗадание
07File Transfer Over WebRTC Using FileReader API, With Compression10 материалов

File Transfer Over WebRTC Using FileReader API, With Compression

Introduction to Compression and the Pako LibraryВидеоSending Compressed ArrayBuffersВидеоReceiving and Decompressing ArrayBuffersВидеоCompressing an Image Can Result in a Larger File Than the Original (Mind Blown)ВидеоEasy Solution – Reduce the Size of Each Chunk Sent Over the Data ChannelВидеоSolution Two, Part 1 – Only Compress Non-Image FilesВидеоSolution Two, Part 2 – Only Decompress Non-Image FilesВидеоFixing the Error and Celebrating Our SuccessВидеоImplementing File Compression and Decompression with JavaScript and WebRTCDIALOGUEFile Transfer Over WebRTC Using FileReader API, With Compression - AssessmentЗадание
08File Transfer Over WebRTC Using the Streams API8 материалов

File Transfer Over WebRTC Using the Streams API

Section IntroВидеоIntro to the Streams APIВидеоLet's Implement the File Streams APIВидеоTesting Our Code and the Problems with the Streams APIВидеоIntro to the BYOB Mode of the Streams APIВидеоImplementing BYOB and Testing Our Streams APIВидеоUsing the Streams API to Send Files over WebRTCDIALOGUEFile Transfer Over WebRTC Using the Streams API - AssessmentЗадание
09Outro4 материалов

Outro

OutroВидеоOutro - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание