WebRTC로 서버 안태우고 라이브채팅 구현하기

WebRTC - RTCPeerConnection.createDataChannel <== 공식문서 100% 참고

 

RTCPeerConnection.createDataChannel() - Web API | MDN

 

 

 

해당 포스터는 WebRTC API를 사용한 화상 채팅 구현의 후속 편입니다.

그러므로 해당 내용을 이해한다는 전제하에 포스팅을 하겠습니다.

WebRTC API를 사용한 화상 채팅 구현

 

 

소스코드 제공

https://github.com/kimjuno97/Live-Chat-Logic-with-socket.io

GitHub - kimjuno97/Live-Chat-Logic-with-socket.io

 

 

 

 

 사용 전 서로 연결하는 과정 간단 설명 

 

 

 1. RTCPeerConnection 초기화

const myPeerConnection = new RTCPeerConnection();

   

2.  createoffer, createAnswer, 그리고 setLocalDescription

• 인터페이스의 createOffer() 메서드는 원격 피어에 대한 새 WebRTC 연결을 시작하기 위해 SDP 제안 생성을 시작합니다.
• 인터페이스 의 createAnswer() 메서드는 WebRTC 연결의 제안/응답 협상 중에 원격 피어로부터 받은 제안에 대한 SDP 응답을 생성합니다.
• 이렇게 생성한 offer,answer를 각자 client의 myPeerConnection에 setLocalDescription 과정을 거칩니다.

    연결의 과정이라고 알고만 있어도 됩니다.  (소스코드 :  front/main.js 29~42)

// 서버에서 사람이 들어오면 Peer A에 알립니다.
// 이로 인해 Peer A가 합류를 요청(offer) 합니다.
socket.on('comeHere', async () => {
	const offer = await myPeerConnection.createOffer();
	myPeerConnection.setLocalDescription(offer);
	socket.emit('offer', offer, 1);
});
// Peer B가 합류를 받고 ok함(answer)
socket.on('offer', async offer => {
	myPeerConnection.setRemoteDescription(offer);
	const answer = await myPeerConnection.createAnswer();
	myPeerConnection.setLocalDescription(answer);
	socket.emit('answer', answer, 1);
});

 

 

 

 

다음으로 서버를 안태우고 라이브 채팅을 할 수 있는 DataChannel 부분으로 넘어가겠습니다.

서버를 거치지 않으니 전달 받은 데이터들은 소멸성을 띈다는것을 유의하시고 사용하시면 됩니다.

 

 

1. Offer side,  Answerer side 나눠서 구현

 

• Offer side (소스코드 : front/main.js 122~129 주석)

const channel = myPeerConnection.createDataChannel('chat');
channel.onopen = () => {
	channel.send('Hi you');
};
channel.onmessage = e => {
	console.log('Offer side', e.data);
};

Offer side에서 채널을 만들고 onopen을 통해 send로 메시지를 보낸다.

그리고 onmessage로 메세지를 받을 준비를 한다.

• Answerer side (소스코드 : front/main.js 131~141 주석)

myPeerConnection.ondatachannel = e => {
	const channel = e.channel;
	channel.onopen = e => {
		channel.send('Hi back');
	};
	channel.onmessage = e => {
		console.log('Answerer side', e.data);
		show.innerText = e.data;  // 받은 data 저장
	};
};

Answerer side에서 datachannel을 만들었다는 이벤트를 받고, 그 채널에 대한 메시지를 주고받는 준비를 한다.

 

 

2. Both sides로 로직 합치기 ( 소스코드 : front/main.js 132~141)

const channel = myPeerConnection.createDataChannel('chat', {
	negotiated: true,
	id: 0,
});
channel.onopen = () => {
	channel.send('Hi!');
};
channel.onmessage = e => {
	console.log(e.data);
	show.innerText = e.data;
};

1번이랑 차이점은 e.channel로 chennel을 확인해주는 로직이 없어서,

임의로 0번이라고 초기 세팅 한 것이다.

• 공식문서 옵션 설명 
  negotiated Optional (기본 값: false.)
  기본 값일 경우 (false), 데이터채널은 밴드의 대역 내에서 협상됩니다. 이 때, 한쪽은createDataChannel를 호출하고, 다른 쪽에서는 RTCDataChannelEvent 이벤트를 ondatachannel EventHandler를 사용해서 감청합니다. 반대로 true 일 경우, 밴드의 대역 범위를 벗어나도 재협상이 가능해집니다. 이때에는 양쪽에서 합의된 id를 가진 createDataChannel을 호출하게 됩니다.
  id Optional
  채널에 대한 16bit 숫자형 ID입니다. 허용되는 값은 0에서 65534 사이입니다. 이 값을 지정하지 않으면, 유저 에이전트가 알아서 ID를 지정해 줍니다.

A simple RTCDataChannel sample   < ==== 따라 하면서 배우는 가이드도 있습니다.

 

A simple RTCDataChannel sample - Web APIs | MDN

 

 

3. channel.send로 데이터 보내는 로직 구현 (소스코드 : front/main.js 156~163)

const input = document.querySelector('.input');
const btn = document.querySelector('.channel');
const show = document.querySelector('.show');

btn.addEventListener('click', () => {
	channel.send(input.value);
	input.value = '';
});

이제는 channel.send를 통해 데이터를 서버를 거치지 않고 주고 받을 수 있습니다.

 

 

마무리하며..

간단하게 DataChannel을 체험할 수 있게 끔 빠르게 구현한 코드입니다.

해당 소스코드는 절대 Best Practice가 아니라는 것을 알고 참고 용으로 즐겼으면 합니다.