본문 바로가기

websocket & webRTC8

5. RTCPeerConnection 간 ICE candidate 교환 과정 1. ICE candidate 교환 과정offer 와 answer 를 교환하는 과정에서 ICE candidate 생성되며 이후 시그널링 서버를 통해 교환 되어 실제 peer 간 연결이 완료됩니다. 이전 포스트와 이어집니다. RTCPeerConnection 간 연결 과정 (offer, answer)참고할만한 내용📕 기본적인 시그널링 서버 및 클라이언트 연결 관련 포스트: 시그널링 서버 연결 및 미디어 장치 연결RTCPeerConnection 및 ICE candidate 관련 포스트: RTCPeerConnection 이해와 관련된 주요 인터페이스2. ICE candidate 교환 과정두 사용자 A, B 가 offer/answer 주고 받는 과정에서 ICE candidate 교환 시점과 흐름 예시1️⃣ A .. 2025. 4. 30.
4. RTCPeerConnection 간 연결 과정 (offer, answer) 1. 시그널링 서버를 통한 PeerConnection📕 기본적인 시그널링 서버 및 클라이언트 연결은 시그널링 서버 연결 및 미디어 장치 연결 포스트 참고RTCPeerConnection 의 이해가 필요 시 RTCPeerConnection 이해와 관련된 주요 인터페이스 포스트 참고2. 시그널링 과정두 사용자 A, B 가 피어 연결을 시도하는 과정 예시offer : offer는 연결을 시작하려는 피어(발신자)가 생성하는 SDP(Session Description Protocol) 정보answer: answer는 offer를 받은 피어(수신자)가 생성하는 SDP 정보입니다.1️⃣ A와 B 방에 입장A: 방에 입장 → 시그널링 서버에 연결B: 뒤이어 입장 → 시그널링 서버에 연결됨 2️⃣ 서버가 A에게 B 입장.. 2025. 4. 28.
3. RTCPeerConnection 이해와 관련된 주요 인터페이스 1. RTCPeerConnectionRTCPeerConnection은 WebRTC(Web Real-Time Communication) 기술의 핵심 구성 요소로, 웹 브라우저 간 피어-투-피어(P2P) 연결을 설정하고 관리하는 JavaScript API입니다.1.1 주요 속성// 전체 연결 상태 ('new', 'connecting', 'connected', 'disconnected', 'failed', 'closed')pc.connectionState// ICE 연결 상태 ('new', 'checking', 'connected', 'completed', 'failed', 'disconnected', 'closed')pc.iceConnectionState// ICE 후보 수집 상태 ('new', 'gathe.. 2025. 4. 22.
2. 시그널링 서버 연결 및 미디어 장치 연결 1. MediaStream 관련 API※ 관련 내용 정리한 포스팅 : MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식2. 구현※ 예시로 작성한 코드로 일부 내용을 생략한 관계로 참고만 하시길 추천드립니다. ※2.1 소켓 서버 연결 코드// socket.tsimport { io } from "socket.io-client";export const videoChatSocket = io(URL, { path: "/video-server-chat" }); // "/chat" 서버에 연결2.2 클라이언트 코드 📔 생략한 내용 및 추가할만한 부분미디어 장치 mute 여부를 미디어 장치 변경 시 적용시그널링 서버 연결 및 이벤트 핸들러 등등 주요 로직 context api.. 2025. 4. 18.
1. 시그널링 서버 1. 시그널링 서버WebRTC에서 P2P 연결을 설정하기 위한 초기 정보 교환을 중계하는 서버입니다. WebRTC는 브라우저 간 직접 통신을 지원하지만, 이 연결을 설정하기 위해서 초기 메타데이터 교환을 위한 시그널링 서버가 필요합니다.주요 역활세션 정보(SDP) 교환: 오디오, 비디오, 네트워크 설정 등의 정보ICE 후보(candidate) 교환: 네트워크 연결 정보사용자 발견 및 세션 관리: 사용자 ID 할당, 방(room) 생성 및 관리상태 동기화: 연결 상태, 참여자 목록 등의 정보 공유2. Socket.IO웹소켓 기반의 실시간 양방향 통신 라이브러리로, 시그널링 서버를 구현하기에 최적화되어 있습니다.주요 기능신뢰성 있는 연결: 웹소켓 연결이 불가능할 경우 롱폴링, AJAX 등 대체 방식으로 자동.. 2025. 4. 17.
0. Web RTC 이해 WebRTC 이해WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 애플리케이션에서 별도의 플러그인이나 소프트웨어 설치 없이 실시간 통신을 가능하게 하는 오픈 소스 프로젝트로 대부분의 현대 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원됩니다.주요 특징P2P(Peer-to-Peer) 통신: 클라이언트 간 직접 통신을 지원하여 중앙 서버의 부하를 줄이고 지연 시간을 최소화합니다.다양한 미디어 처리: 오디오, 비디오 및 데이터 스트림을 실시간으로 처리할 수 있습니다.보안: 기본적으로 모든 연결이 암호화되어 안전한 통신을 보장합니다.적응형 스트리밍: 네트워크 상태에 따라 미디어 품질을 자동으로 조절합니다.핵심 구성 요소1. 주요 APIMediaS.. 2025. 4. 16.
Socket.IO 기본 사용법 Socket.IO 기본 사용법Socket.IO는 웹소켓을 기반으로 한 실시간 양방향 통신 라이브러리입니다. 클라이언트와 서버 간의 이벤트 기반 통신을 제공합니다.1. 설치서버 (Node.js):npm install socket.io클라이언트 (브라우저):npm install socket.io-client2. 서버 설정// Express와 함께 사용하는 기본적인 설정const express = require('express');const http = require('http');const { Server } = require('socket.io');const app = express();const httpServer = http.createServer(app);const io = new Server(htt.. 2025. 3. 28.
웹 소켓(WebSocket) 이해 설명웹 소켓(WebSocket)은 클라이언트와 서버 간의 양방향(Full-Duplex) 통신을 가능하게 하는 프로토콜입니다. HTTP 기반의 요청-응답 방식과 달리, 한 번 연결되면 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있는 지속적인 연결을 유지합니다. 웹 소켓의 특징1. 풀 듀플렉스(Full-Duplex) 통신클라이언트와 서버가 동시에 데이터를 주고받을 수 있음HTTP는 클라이언트가 요청하면 서버가 응답하는 단방향 구조지만, WebSocket은 서버가 클라이언트에게 실시간으로 데이터를 보낼 수 있음2. 연결 유지(Persistent Connection)HTTP는 요청마다 새로운 연결을 생성하지만, WebSocket은 연결을 유지하면서 데이터를 주고받음이를 통해 지연시간(Latency)을.. 2025. 3. 23.

티스토리툴바