HTML에서 브라우저 간(P2P) 연결을 구현하는 방법

HTML에서 브라우저 간(P2P) 연결 구현하기

HTML 자체만으로는 브라우저끼리 직접 통신할 수 없지만, PeerJS처럼 WebRTC를 기반으로 하는 라이브러리를 활용하면 피어 투 피어(Peer-to-Peer) 연결을 비교적 쉽게 구현할 수 있습니다. 아래 단계를 순서대로 따라 해 보세요.

1단계: PeerJS 라이브러리 포함

가장 먼저 HTML 문서에 PeerJS 라이브러리를 추가합니다.

<script src = "https://cdn.peerjs.com/0.3/peer.js"></script>

2단계: 피어(Peer) 객체 생성

피어를 생성하려면 PeerJS 클라우드에서 무료 API 키를 먼저 발급받아야 합니다. 발급받은 키와 고유한 피어 ID를 사용해 다음과 같이 피어 객체를 만듭니다.

var peer = new Peer('pick-an-id', {key: 'myapikey'});

여기서 'pick-an-id'는 내 피어를 식별하는 고유 ID이며, 다른 브라우저가 이 ID를 통해 나에게 연결을 시도할 수 있습니다.

3단계: 다른 피어와 연결

통신하려는 상대방의 피어 ID를 지정해 연결을 요청하고, 연결이 열리면 데이터를 전송합니다.

var conn = peer.connect('another-peers-id');
conn.on('open', function(){
    conn.send('Welcome!');
});

위 코드에서 'another-peers-id'는 상대 피어의 고유 ID입니다. 연결이 정상적으로 수립되면 open 이벤트가 발생하며, 이 시점부터 send() 메서드를 사용해 두 브라우저 사이에서 메시지와 데이터를 자유롭게 주고받을 수 있습니다.