초보자 WebRTC 섹션 5: 데이터 채널

내용:

섹션 1: WebRTC 소개 및 명령 서버 생성

제2부분: 미디어 Devices API를 이해하고 사용자의 미디어 장치에 접근

섹션 3: 피어 포인트 생성 및 미디어 전송/수신

4부분: 사용자의 디스플레이와 변경 곡을 공유하고 발송

섹션 5: 데이터 채널 기반

섹션 6: Android 기본 피어싱

섹션 7: iOS 네이티브 피어

섹션 8: 여기서 어디로 갑니까

안녕하세요!5부에 오신 걸 환영합니다!
이 부분에서 나는 데이터 채널의 기초 지식을 소개할 것이다.
데이터 채널이란 무엇입니까?
데이터 채널은 양방향 피어 데이터 전송에 사용할 수 있는 네트워크 채널을 나타낸다.
이 API는 WebSocket과 유사합니다. 설명과 같이 서로 메시지를 보낼 수 있지만 서버를 통해 메시지를 보낼 필요가 없습니다.데이터 채널은 파일 공유 같은 일에 매우 유용하다.
이 밖에 웹소켓도 TCP의 제한을 받고 데이터 채널은 TCP와 UDP를 사용할 수 있다.
TCP 를 사용해야 합니까? UDP 를 사용해야 합니까?
TCP가 있으면 데이터 전송은 신뢰할 수 있고 질서정연하지만, 패키지 분실과 같은 상황이 발생하면 '막힘' 을 초래할 수 있다.
UDP를 사용할 때 데이터 전송이 불안정하거나 질서가 없지만 패킷이 분실되면 패킷을 보냅니다.
만약 당신이 어떤 종류의 프로그램을 만들고 싶느냐에 따라 결정된다면, 채팅 프로그램이라면 TCP를 사용할 가능성이 높고, 게임 프로그램이라면 더 많은 '실시간' 데이터 전송을 원할 수도 있기 때문에 UDP를 사용하는 것을 권장합니다.
또한 브라우저에서 만들 수 있는 데이터 채널의 수량도 65534 정도로 제한됩니다. 비록 그렇게 많은 것이 필요하지 않다고 생각하지만.(만약 당신이 그렇게 많은 데이터 채널을 사용했다면 나에게 알려주세요)
데이터 채널을 만들려면 몇 가지 옵션을 전달해야 합니다.가장 일반적인 옵션은 다음과 같습니다.
ordered:true라면 패키지의 수신 순서는 발송 순서와 같습니다.
maxPacketLifetime: 신뢰할 수 없는 모드에서 메시지의 최대 밀리초 전송을 시도합니다.
maxRetransmits: 사용자 에이전트가 신뢰할 수 없는 모드에서 첫 번째 실패한 메시지를 다시 전송하려고 시도한 최대 횟수입니다.
RTPeerConnection의 "createDataChannel"방법을 통해 데이터 채널을 만듭니다. 데이터 채널을 RTPeerConnection에 추가하고 원격 상대방의 RTPeerConnection에서 "ondatachannel"이벤트를 터치합니다.
그럼, 지루한 일은 이미 지나갔으니, 우리 그것을 실현합시다!
앞의 예시에 채팅 정보를 보내고 받는 기능을 추가할 것입니다. 따라서 우선public 인덱스를 편집해야 합니다.html.를 열고 화면 공유 버튼 아래에 다음을 추가합니다.

<br />
<input type="text" id="chatMessage" placeholder="Enter message"/>
<button id="sendMessageButton" onclick="sendMessage();">Send</button>

이것이 바로 HTML입니다. 현재 재미있는 부분은 공공 메일을 여는 것입니다.js.
우선, 우리는 데이터 채널을 위해 변수를 만듭니다.

let dataChannel;

그런 다음 call 메서드에서 initializePeerConnection 다음에 다음을 추가합니다.

initializeDataChannel();

그런 다음 initializePeerConnection 방법 다음에 다음을 추가합니다.

const initializeDataChannel = () => {
  const config = { ordered: true };

  dataChannel = peerConnection.createDataChannel('dataChannel', config);
  initializeDataChannelListeners();
};

여기 데이터 채널을 초기화하는 옵션이 있습니다.간단한 메시지 전송을 만들고 있기 때문에 패키지가 주문되기를 바랍니다. 그렇지 않으면 대화가 이상해질 수 있습니다.
다음에 우리는 데이터 채널을 초기화합니다. '데이터 채널' 은 채널의 탭입니다. 여기서 우리는 설정 옵션을 전달합니다.
완료되면'ondatachannel'이벤트가 원격 대등단에서 터치되기 때문에 이를 실현합시다."initialize Peer Connection"방법에서 "ontrack"사건 뒤에 다음 탐지기를 추가합니다.

peerConnection.ondatachannel = ({ channel }) => {
  console.log('peerConnection::ondatachannel');
  dataChannel = channel;

  initializeDataChannelListeners();
};

여기서 전역 데이터 채널을 수신 채널로 설정한 다음 데이터 채널 탐지기를 초기화합니다.이제 initialize DataChannel 다음에 이 메서드를 만듭니다.

const initializeDataChannelListeners = () => {
  dataChannel.onopen = () => console.log('dataChannel opened');
  dataChannel.onclose = () => console.log('dataChannel closed');
  dataChannel.onerror = (error) => console.error('dataChannel error:', error);

  dataChannel.onmessage = ({ data }) => {
    console.log('dataChannel data', data);
  };
};

보시다시피 데이터 채널 이벤트는 WebSocket API와 매우 비슷합니다.
우리가 메시지를 받았을 때, 우리는 그것을 컨트롤러에 기록하기만 하면 된다.
다음은 사용자가 특별히 작성한 메시지를 보내는 방식이 필요합니다.파일 끝에 다음을 추가합니다.

const sendMessage = () => {
  const message = document.getElementById('chatMessage').value;

  if (!message) {
    alert('no message entered');

    return;
  }

  if (!dataChannel || dataChannel.readyState !== 'open') {
    alert('data channel is undefined or is not connected');

    return;
  }

  console.log('sending message', message);
  const data = {
    message,
    time: new Date()
  };

  dataChannel.send(JSON.stringify(data));
  document.getElementById('chatMessage').value = '';
};

여기에서, 우리는 텍스트가 입력한 값을 가져와서, 텍스트가 비어 있는지 확인하고, 비어 있으면 사용자에게 알릴 것입니다.이후에 우리는 데이터 채널이 설정되었는지, 상태가 '열기' 였는지, 예를 들어 웹소켓과 같이, 열리거나 연결되지 않으면 어떤 내용도 보낼 수 없는지 검사했다.
마지막으로, 우리는 시간 스탬프를 추가하여 원격 상대방에게 보냅니다. 원격 상대방은 데이터 채널의 'onmessage' 이벤트를 터치해야 합니다.
마지막으로, 우리는 세션이 끝날 때 데이터 채널을 닫고, "stop"방법에 다음peerConnection을 추가해야 한다.닫기():

dataChannel.close();

아니, 다 했으니 우리 한번 해 보자!우선 서버를 시작합니다.

npm start

앞의 예와 같이 "https://localhost:3000”에서 두 개의 창/탭을 열고 통화를 시작합니다.
호출이 시작되면 메시지를 입력하고 보내기를 클릭하면 다음과 같이 원격 피어의 콘솔에 메시지가 표시됩니다.

이것은 데이터 채널의 기초이니, 나는 이것이 너에게 유용하길 바란다.
이어 6부에서는 안드로이드 시스템부터 본기 측에 대해 논의할 예정이다.
거기서 봤으면 좋겠어!
Github 재구매:
https://github.com/ethand91/webrtc-tutorial
보너스-고려해야 할 사항:

콘솔에 인쇄가 잘 되어 채팅 로그를 시도할 수 있음

데이터 채널 연결이 설정되면 WebSocket이 필요하십니까?

파일 공유 시도

보상 재료:
RTCDataChannel - Web APIs | MDN
나처럼 일해?지지해 주셔서 감사합니다.