우리가 직접 더 찾아봤으면 하는 거

data Channel

data Channel MDN
data channel 강의

• data channel: peer-to-peer 유저가 언제든지 모든 종류의 데이터를 주고 받을 수 있는 채널임. data channel은 그저 텍스트 형식이라 매우 빠름.
  -> 우리는 비디오와 오디오 데이터를 주고 받았는데, datachannel을 만들면 유저들은 이미지, 텍스트,
  파일, 게임 업데이트 패킷 같은 것들도 서로 주고받게 됨. 이걸 이용해 peer-to-peer chat도 만들
  수 있음. 예를 들어 socketIO 없이도 만들 수 있다는 것임.

  data chaanel (ex: chat)사용법:

1. 무언가를 offer하는 socket이(주인 브라우저) data channel을 생성하는 주체가 되어야함.

2. offer를 생성하는 peer에 data channel을 생성하고 이벤트 리스너를 해준다.
   -> 이 때, 이 부분은 주인장 쪽 peer인데, 다른 쪽 peer에는 data channel을 만들 필요가 없음. 다른 peer는 data channel이 있을 때, 이벤트 리스너만 만들어주면됨.
   -> frontSocket.on("welcome", async ()) 쪽은 offer를 만드는 쪽이고,
   frontSocket.on("offer", async (offer)) 쪽은 offer를 받는 쪽임.

3. offer를 받는 쪽에 data chaanel을 이벤트 리슨하고, data channel을 정의해준뒤, 우리가 사용
   할 이벤트에 대한 이벤트 리스너 생성.(data channel)

   요약:

   offer를 만드는 주체(주인 브라우저)가 data channel을 생성하면. 그리고 그 offer를 받는 쪽은 새로
   운 data channel을 이벤트 리슨 한 다음에, 그 data channel을 가져와서 받는 쪽에서 정의해준다.(그
   냥 가져와서 쓰는 것임.) 그리고 offer를 생성하는 쪽과 받는 쪽 서로가 이벤트 리스너를 하면서 서로
   chat을 주고받을 수 있게됨.
   

   -> offer 생성 쪽과, 받는 쪽 둘다에서 이벤트 리스너를 추가하는 이유: 서로의 chat을 들을려고.

• app.js

//추가 및 수정코드
let myDataChannel;//-> 반드시 정의해줘야함(offer를 주는 쪽과 받는 쪽이 서로 번갈아서 바뀌기 때문)

//frontSocket.on("welcome", async () => {
	myDataChannel = myPeerConnection.createDataChannel("chat");//data cahnnel 생성
  	myDataChannel.addEventListener("message",(event) => console.log(event));
  	console.log("made data channel");
  	/*const offer = await myPeerConnection.createOffer();//3단계 : offer(초대코드) 만들기 -> 이미 들어와있던 사람에게만 작용하는 코드임.
    myPeerConnection.setLocalDescription(offer);//4단계: 주인장 쪽 콘센트 연결. offer로 연결 구성. -> 이미 들어와있던 사람에게만 작용하는 코드임.
    //console.log(offer);
    console.log("sent the offer");
    frontSocket.emit("offer",offer,roomName);//5단계: offer 보내기
});// -> 주인쪽 브라우저에서 돌아가는 코드*/


//frontSocket.on("offer", async (offer) => {//6단계: offer받기
    //myPeerConnection.addEventListener("datachannel",(data) => console.log(data));//-> data channel에 대한 data 보는 법.
	myPeerConnection.addEventListener("datachannel",(event) => {
        myDataChannel = event.channel;//data chaanel 저장, offer받는 쪽의 data chaanel 정의(?)
        myDataChannel.addEventListener("message", console.log);//이벤트 리스너 추가
    });
	

WebRTC의 단점

-> WebRTC를 쓰면 안 되는 곳이 있음. WebRTC가 안 좋을 수 있는 몇가지 조건이 있음.
1. peer를 너무 많이 가질 때. -> 속도가 느려질 수 있음.(그물망 구조라서 여러번 다운로드 해야댐.)
2. 그물망인 wbRTC여도 비디오나 오디오를 전송하는게 아닌 chat인 경우에는 사용해도 무방함. 근데 data chaanel을 사용해서.

SFU(selectiv fowarding unit)

-> 그물망 구조 때문에 렉걸리는 거 때매, 사용하는 다른 구조. 서버에 의존도가 높음.
이 구조를 사용하면 업로드를 1번만 해도됨. SFU서버는 모든 stream을 압축함.
누가 이 방의 호스트인지, 누가 발표하는지 이 서버는 알고 있어서 발표자 외의
스트림은 저화질로 압축하고, 발표자만 고화질로 압축한 뒤, 다운 받게함.

-> 대형 zoom clone coding을 할거면 대형 서버(많은 비디오와 오디오를 가질거라)
SFU와 data channel을 이용 ㄱ ㄱ

내가 시도해볼 것.

(web socket, socketIO, WebRTC, data channel 사용 ㄱ ㄱ)
-> 만약 내가 서버를 갖는 것도 괜찮다면, socketIO가 좋은 선택.
-> peer-to-peer를 하고 싶고, 그 메시지들을 보내는데 서버가 필요 없다면, data
channel이 한 방법이 될 것임.

1. Improve the CSS
2. Make a Chat using Data Channels
3. When a peer leaves the room, remove the stream.