강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Web Development

Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで

様々な通信技法について学び、その違いを理解することで、最も適切な通信方法を選択し実装する能力を身につけることができます。

31名 が受講中です。

難易度 入門

受講期間 無制限

  • sir24is
HTTP
HTTP
SSE
SSE
websocket
websocket
WebRTC
WebRTC
P2P
P2P
JavaScript
JavaScript
React
React
Java
Java
Network
Network
Spring Boot
Spring Boot
HTTP
HTTP
SSE
SSE
websocket
websocket
WebRTC
WebRTC
P2P
P2P
JavaScript
JavaScript
React
React
Java
Java
Network
Network
Spring Boot
Spring Boot

受講後に得られること

  • ネットワーク通信の基本からHTTP、SSEを利用した通信技法を学びます

  • WebSocketの基礎を超えて活用方法まで学びます

  • Signaling Serverを作りながら、本当のP2P通信ができるようにしてみます

  • 様々なネットワーク通信技術を比較分析し、適切な技法を選択して適用する能力を養います


Webコミュニケーション、どこまで使ったことがありますか?
[HTTP]から

[WebSocket]、[WebRTC]まで

ネットワーク通信を正しく理解することは、Web開発者の必須スキルです。
本講座では、HTTP、SSE、WebSocket、WebRTCなど、様々な通信技法を深く扱い、各技術の特徴と活用法を学び、最適な通信方式を選択し実装する能力を養います。


[悩みのシナリオ1]
複雑なサーバー通信ロジックのせいで開発速度が遅くなり、いざ実装しようとすると、どの技術を使えばいいのか途方に暮れた経験はありませんか?

[悩みシナリオ2]
クライアントとサーバー間のリアルタイム双方向通信が必要なサービス(チャット、ゲームなど)を実装する際、WebSocketの基本的な使い方を超えた活用法が気になりましたか?

[悩みのシナリオ3]
サーバーを経由しないP2P通信、つまりWebRTC技術に興味を持ったものの、シグナリングサーバーの構築や複雑な接続プロセスのせいで、試すことすら難しかった経験はありませんか?

これらすべての困難を解決し、Web通信の専門家へと成長できるよう、最高の学習体験を提供します。
今すぐ始めて、あなたの開発力を一段階引き上げましょう!


HTTP、SSE、WebSocket、WebRTCまで
ウェブ通信の核心技術をしっかり身につけて

サーバーとクライアントを行き来しながらリアルタイムネットワーク通信のエキスパートへと成長しましょう。




この講義が終わったら、あなたは


ネットワーク通信を理解し、活用する能力を身につけます。

  • HTTP、SSE、WebSocket、WebRTCなど、様々なウェブ通信技法の原理を深く把握し、各技術の違いを明確に理解できるようになります。これを通じて、どのような状況でどの通信方式を使用すべきかを自ら判断し、実装する能力を身につけることができます。

様々なWeb通信技術を直接実装する経験を積みます。

  • 単なる理論学習にとどまらず、Signaling Serverを直接構築しながらWebRTCベースのP2P通信を実装してみます。また、WebSocketを活用した実習を通じて複雑な通信機能を直接作ってみる過程を経て、実際のサービス開発にすぐに適用できる実務能力を身につけます。

実務中心の通信技術活用能力を身につけます。

  • Web開発の入門者からWebSocketやWebRTCの活用に困難を感じている開発者まで、本講座を通じて実質的な通信機能の実装能力を向上させることができます。各通信方式の長所と短所を把握し、プロジェクトに最適化された技術を選択できる見識を身につけることができます。

サーバーとクライアントの開発能力を一緒に高めます。

  • Javaを利用したバックエンド開発とJavaScriptを活用したフロントエンド開発の両方を扱います。これを通じて、Web通信がサーバーとクライアントの両側でどのように行われるかを統合的に理解し、フルスタック開発者として必要な核心的な能力を強化することができます。






✔️

Web通信、どこまでご存知ですか?
コア技術をマスターする

Webにおける多様な通信技法
核心原理から実践活用まで

本講義は、Web開発の必須要素であるネットワーク通信に対する深い理解を助けます。HTTP、SSE、WebSocket、そしてWebRTC P2P通信まで、各技術の基本原理から実際の実装方法まで体系的に学習できます。様々な通信方式を比較分析しながら、プロジェクトに最適化された技術を選択し適用する能力を身につけることができます。

自分で作ってみる
実践通信実装

講義では単なる理論学習にとどまりません。JavaScriptとReactを活用したフロントエンド実装、JavaとSpring Bootを利用したバックエンド開発を通じて、実際のチャットサービス、WebRTCベースのP2P通信などを直接構築します。これにより学習した内容をすぐに適用し、実務能力を強化することができます。

開発者のための
コードと資料提供

講義で使用されるすべてのソースコードを提供します。バックエンド開発のためのJavaベースのプロジェクトとフロントエンド開発のためのJavaScriptコードを通じて学習内容をしっかり理解し、直接コードを実行しながらネットワーク通信開発能力を向上させることができます。講義ノートも一緒に提供され、学習効率を高めます。

講義ノートは次のURLからアクセスできます。

https://wikidocs.net/book/17989


📚

ネットワーク通信
核心攻略カリキュラム

Section01

セクション1

講義紹介と環境設定

本セクションでは、講義の全般的な紹介とともに、ネットワーク通信学習のための実習環境を設定する方法を扱います。バックエンドおよびフロントエンドプロジェクトの生成過程を含みます。


Section02

セクション2

ウェブとネットワークの基礎

Webコミュニケーションの基盤となるネットワークの基本概念とソケット(Socket)の動作原理を学習します。ソケット通信の核心原理を理解し、今後扱う様々な通信技法の基盤を築きます。


Section03

セクション3

HTTPの理解

HTTPプロトコルの登場背景から基本原理、サーバーおよびクライアント実装まで詳しく扱います。XMLHttpRequestと外部ライブラリを活用した通信方法およびCORS問題の解決方法を学習します。


Section04

セクション4

Server-Sent Events (SSE)の理解

サーバーからクライアントへの一方向リアルタイムデータ転送が可能なSSEの基礎を学習します。サーバーおよびクライアントプログラムを作成し、EventSource APIを活用してSSEを実装および応用する方法を学びます。


Section05

セクション5

WebSocketの基本

クライアントとサーバー間の双方向リアルタイム通信をサポートするWebSocketの基本原理を紹介します。WebSocketHandlerを利用したサーバープログラムの作成およびクライアントでのメッセージ送受信方法を学習します。


Scetion06

セクション6

WebSocketの活用（サーバー）

WebSocketを活用したリアルタイムアプリケーション実装のサーバーサイド開発を扱います。アプリケーションプロトコルおよびメッセージ形式を定義し、ChatRoomの同時性制御およびメッセージ処理ロジックを実装します。


Section07

セクション7

WebSocketの活用（クライアント）

WebSocketサーバーとの連携のためのクライアント側開発を進めます。UI作成を皮切りに、アプリケーションプロトコル送信、チャットルーム参加、サーバーイベント処理機能を実装します。


Section08

セクション8

WebRTCとSignaling Server

ブラウザ間の直接通信(P2P)を可能にするWebRTCの概念を学習します。MediaStreamの処理、権限リクエスト、そしてP2P接続のためのSignaling Serverの役割とメッセージ処理方式を理解します。


Section09

セクション9

WebRTCクライアントの実装

WebRTCを利用したP2P通信のクライアント側実装を学習します。ユーザーインターフェースを作成し、OfferおよびAnswerプロセスを通じてピア間の接続を確立する方法を実習します。


こんな方々の悩みを
解決できます!

📌

Web開発初心者

Web開発が初めてで、HTTPやWebSocketが正確に何なのか、
どのように動作するのか漠然と感じている方

📌

フロントエンド開発者

WebSocketやWebRTCのようなリアルタイム通信技術が必要だけど、
どこから始めればいいのか途方に暮れている方

📌

バックエンド開発者

Spring BootでREST APIはよく作られますが、
SSE、WebSocketなどを活用した他の通信方式が気になる方




受講前の参考事項


実習環境

  • 対応OS：Windows、macOSの両方で学習可能です。

  • 開発ツール：VS Codeまたはお好みのIDEを使用できます。

  • インストールプログラム：JavaSDKおよびNodeJSをインストールして使用します。

前提知識と注意事項

  • JavaとJavaScriptに対する理解が必要です。

  • Reactを利用したWeb開発の基礎知識が必要です。

    • もし初めての方であれば、公式ドキュメントの「クイックスタート」を1ページ程度学習するだけで講義の受講が可能です

  • ネットワーク通信の概念を初めて学ぶ方でも受講可能です。

学習資料

  • オンライン上で講義ノートをご覧いただけます。

  • 実習サンプルコードを通じて直接コードを作成してみて、完成したソースコードを提供します


こんな方に
おすすめです

学習対象は
誰でしょう？

  • ウェブ開発を始めてネットワーク通信機能を利用しようとする方

  • WebSocketの基本はもちろん、活用まで自由自在に扱えるようになりたい方

  • WebRTCのP2P通信について実際に通信を試しながら学びたい方

  • さまざまなネットワーク通信技法を把握し、比較選択できる能力を身につけたい方

前提知識、
必要でしょうか？

  • Javaの文法に関する知識が必要であり、SpringBootをご存知であれば良いです

  • JavaScriptの文法に関する知識が必要であり、Reactをご存知であれば良いです。（もし初めての方であれば、公式ドキュメントの「クイックスタート」を1ページ程度学習していただくだけで講義の受講が可能です。）

こんにちは
です。

새로운 것을 꿈꾸는 개발자 입니다.

カリキュラム

全体

69件 ∙ (7時間 54分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください！

￥9,537

sir24isの他の講座

知識共有者の他の講座を見てみましょう！

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

sir24is

Webでメディア（ビデオ、オーディオ）を扱う方法！！ もう難しくありません。 一つ一つ 따라しながら 배우는 MediaStream API と WebRTC

초급

초급

React, Java, Web API

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

sir24is

似ている講座

同じ分野の他の講座を見てみましょう！

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

sir24is

Webでメディア（ビデオ、オーディオ）を扱う方法！！ もう難しくありません。 一つ一つ 따라しながら 배우는 MediaStream API と WebRTC

초급

초급

React, Java, Web API

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

sir24is

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発강의 썸네일

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発

greencoding1234

聴いてみてください。講義力、引き込み力、講義の質が違います。

입문

입문

HTML/CSS, JavaScript, JSP

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発강의 썸네일

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発

greencoding1234

誰も教えてくれないWebRTCを使ったP2P通信강의 썸네일

誰も教えてくれないWebRTCを使ったP2P通信

July

WebRTCを活用して実装するウェブカメラとピア間通信について学習できます。

입문

입문

Go, webrtc, p2p

誰も教えてくれないWebRTCを使ったP2P通信강의 썸네일

誰も教えてくれないWebRTCを使ったP2P通信

July

Spring BootとReactで実装するセキュアなJWTログイン강의 썸네일

Spring BootとReactで実装するセキュアなJWTログイン

oncoding

この講義は、最新のWebサービス環境で必須となるJWTベースのトークン認証とセキュリティ強化技法を実務中心で学習するコースです。Spring Boot 3とSpring Security 6、Reactを活用して安全なログインシステムを実装し、XSS・CSRF対応、HTTPS適用、トークン再発行及び廃棄戦略、秘密鍵安全管理などセキュリティ実務全般を扱います。また、AWSを通じたビルド・デプロイ、Redisを利用したパフォーマンス最適化など実際のサービスレベルの環境構成を実習し、講義で提供される完成プロジェクトソースコードはすぐに実務に適用できます。

중급이상

중급이상

React, Java, AWS

Spring BootとReactで実装するセキュアなJWTログイン강의 썸네일

Spring BootとReactで実装するセキュアなJWTログイン

oncoding

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

입문

입문

React, React Native, react.js

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

カカオ、Google SNSログイン（springboot3, vue3）강의 썸네일

カカオ、Google SNSログイン（springboot3, vue3）

bradkim

SpringBootを活用して、カカオ、Googleログインを実装します。JWTトークンベースのログインが実装されます。Vue3を通じて簡単な画面を構成します。

초급

초급

OAuth, oauth2, JWT

カカオ、Google SNSログイン（springboot3, vue3）강의 썸네일

カカオ、Google SNSログイン（springboot3, vue3）

bradkim

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]강의 썸네일

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

実務で実際にWebサービスを開発した経験をもとに、入門者が実際に商用化も可能なレベルのWebとアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中で、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript + ES6をすべてしっかりと整理する講座です。

입문

입문

HTML/CSS, JavaScript, ES6

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]강의 썸네일

フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

funcoding

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで강의 썸네일

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで

Jay

私が好きなユーチューバーのグルメマップを作成しながら、フロントエンド、バックエンド、Kakao Map API の使用方法、公開までを一度に学べるフルスタックグルメマップの講義です。

초급

초급

HTML/CSS, JavaScript, REST API

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで강의 썸네일

非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで

Jay

初心者のための親切なJava一周り강의 썸네일

初心者のための親切なJava一周り

doogang

Javaを初めて学ぶ人でも、Javaを簡単に理解できます。 豊富な説明が含まれた理論と実習を通じてJavaを学びます。

입문

입문

Java, oop, backend

初心者のための親切なJava一周り강의 썸네일

初心者のための親切なJava一周り

doogang

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

초급

초급

Interactive Web, JavaScript, HTML/CSS

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

キム・ヨンハン氏の実践Java - 上級2編、I/O、ネットワーク、リフレクション강의 썸네일

キム・ヨンハン氏の実践Java - 上級2編、I/O、ネットワーク、リフレクション

yh

I/O、ネットワーク、リフレクション、アノテーションを基礎から実務レベルまで深く学習します。 Webアプリケーションサーバー（WAS）をJavaで直接作成します。

초급

초급

Java, Network, oop

キム・ヨンハン氏の実践Java - 上級2編、I/O、ネットワーク、リフレクション강의 썸네일

キム・ヨンハン氏の実践Java - 上級2編、I/O、ネットワーク、リフレクション

yh

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

중급이상

중급이상

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

ThreeJSとSpringAIで作る3D地球儀記事サービス강의 썸네일

ThreeJSとSpringAIで作る3D地球儀記事サービス

Neo

ThreeJSとSpringAIで作る3D地球儀アーティクルサービス | Neo + Essential 自分だけのチャットボットとThreeJSを通じて3D地球儀アーティクルサービスを作ってみましょう！

초급

초급

React, Kotlin, Spring Boot

ThreeJSとSpringAIで作る3D地球儀記事サービス강의 썸네일

ThreeJSとSpringAIで作る3D地球儀記事サービス

Neo

Do it! HTML+CSS+JavaScript Web 標準の定石강의 썸네일

Do it! HTML+CSS+JavaScript Web 標準の定石

easyspub

キーボードを持って実習してみると、Web開発の3大技術が終わる！

입문

입문

HTML/CSS, JavaScript, DOM

Do it! HTML+CSS+JavaScript Web 標準の定石강의 썸네일

Do it! HTML+CSS+JavaScript Web 標準の定石

easyspub

Javaスプリングブート活用Web開発実務用강의 썸네일

Javaスプリングブート活用Web開発実務用

songjava

実務者が使用する Java Web 開発 Spring Boot、Vue.JS 基礎設定から共通設計まで、簡単に動画を見て学びます

중급이상

중급이상

Spring Boot, mybatis, interceptors

Javaスプリングブート活用Web開発実務用강의 썸네일

Javaスプリングブート活用Web開発実務用

songjava

インフラ工房 - もっともらしいサービス作り강의 썸네일

インフラ工房 - もっともらしいサービス作り

brainbackdoor

このプロセスは、現業と同様に、インフラストラクチャを構成し、必要な知識を学習して適用する段階に進みます。

초급

초급

Network, Linux, Spring Boot

インフラ工房 - もっともらしいサービス作り강의 썸네일

インフラ工房 - もっともらしいサービス作り

brainbackdoor

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1강의 썸네일

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

usefulit

理論と実践を通じて、JavaScript を習得できる講義です。コーディングを初めて触れる方でも、段階的に説明するので簡単に理解できます。Part 1 では、JavaScript の概要、変数、データ型、演算子、制御文、jQuery の基礎を扱います。

입문

입문

JavaScript, jQuery

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1강의 썸네일

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

usefulit

Kubernetes Another Class-Sprint3 (#実務核心 #Docker #Nginx #Minio #Longhorn)

1pro

⚓Kubernetes(Docker Desktop, Nginx, Minio, Longhorn) 🙇‍♀️まだ迷っていますか？🙋‍♂️私だけを信じてついてきてください！あなたの実力を⭐アナザーレベルにしてみせます。

중급이상

중급이상

Network, Kubernetes, devops

Kubernetes Another Class-Sprint3 (#実務核心 #Docker #Nginx #Minio #Longhorn)

1pro

SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

초급

초급

React, Kotlin, Spring Boot

SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

SpringAI + Reactで作る自分だけの感情日記サービス

Neo