HackFS는 3주 동안 운영하는 가상 해커톤으로, 검열이 없는 분산 인터넷을 구축하고자 한다. HackFS에서 IPFS의 라이언 바우만(Ryan Baumann)은 IPFS를 활용한 브라우저 통합의 기본 사항을 안내한다. 여기를 클릭하면 전체 대화를 시청할 수 있다.

미래에는 인터넷이 분산 웹으로 운영될 것이지만, 분산 웹에 도달하는 데에는 인프라가 필요하다. IPFS(InterPlanetary File System)는 분산 웹 인프라의 핵심이다. IPFS는 이름 확인 시스템인 INFS(Interplanetary Name System)와 함께 콘텐츠 주소 지정(content addressing)이라고 불리는 브라우저에 콘텐츠를 보유하고 배포하는 새로운 방법을 제시한다.

이러한 패러다임 아래에서는 데이터는 고유 콘텐츠 ID에 기반하여 IPFS 네트워크 어디에서든지 검색할 수 있다. 현재 위치 기반 인프라는 데이터를 특정한 서버에서만 검색할 수 있고 모든 보안 위험에 취약하다. 하지만 IPFS를 활용한 이 검색 방식은 더 향상된 결과를 가져왔다.

이로써 보통 수준의 앱 개발자는 중앙 서버에서 앱과 필수 데이터를 호스팅하는 대신에, 그들이 만든 앱을 IPFS에 업로드하여 분산 스토리지 네트워크에서 직접 실행한다. 이 포스트에서는 매우 기본적인 채팅 인터페이스를 조합하여 IPFS를 통한 웹 브라우저 상호연결성을 개발하는 방법을 살펴볼 예정이다.

유튜브를 통해서도 살펴볼 수 있다: IPFS: Browser Connectivity Walkthrough

IPFS 문서는 간단한 채팅 인터페이스에 대한 브라우저 연결 가이드를 최신 상태로 받아볼 수 있도록 가장 좋은 방법을 설명한다.

시작하기

이 튜토리얼은 고급이 아니기 때문에 대부분의 개발자는 대부분의 튜토리얼을 읽어보면 어떻게 진행되는지 파악할 것이다. 다른 튜토리얼과의 유일한 차이점은 이 가이드는 백엔드로 IPFS를 사용하여 다른 클라이언트와 연결하고 탐색하며 대화를 하고자 한다는 것이다.

대부분의 웹 개발자에게는 이미 선택한 텍스트 편집기가 설치되어 있을 것이다. 여기를 클릭하면 이 튜토리얼의 핵심요소에 액세스할 수 있다. 또한 여기를 클릭하면 완전한 데모에 액세스할 수 있다.

이 가이드는 편집할 chat.js.file에 초점을 맞출 것이다. 사용자가 이 가이드의 마지막에 도달할 때에는 튜토리얼 동안 도달한 단계를 확인할 수 있는 브라우저에서 오픈한 index.html을 가지고 있어야 한다.

만약 사용자가 커넥션(connection)에 대한 자세한 정보를 얻고 싶다면 브라우저 콘솔을 열고 await ipfs.id()라는 명령을 입력하여 가져올 수 있다.

그림 1: 인브라우저 콘솔(The In-Browser Console)

단계 1: 피어(Peer)와 커넥션하기

특정한 IPFS 챗 애플릿의 핵심은 피어 커넥션(Peer Connection)이다. 일반적으로 어떤 사람이 IPFS에 연결했을 경우 우리는 그 사람에게 채팅을 통해서 대화하고 싶다. 대화하기 위해서는 한 특정한 채널에 구독해야 한다. 같은 채널에 구독한 모든 사용자는 채널에 보내진 같은 메시지를 받게 될 것이다. 그러나 다른 사람들과는 어떻게 연결할 것인가?

그림 2: 잠재적 사용자 네트워크 셋업

*애플릿(applet): 플러그인의 하나로서 전용 위젯 엔진이나 더 큰 프로그램 범위 내에서 실행되는 특정한 작업을 수행하는 조그마한 응용 프로그램을 말한다.

IPFS에서 다른 사람들과 연결하는 방법은 두 가지가 존재한다. 먼저 작동하기 위해서 NAT에 의존하는 WebRTCStar을 활용한다. 그러나 NAT이 어떤 이유로 고장이 날 경우 백업 플랜이 존재한다. WebRTCStar 이외에도 조직적으로 p2p 회로를 통해서 다른 사람을 발견할 수 있다. 사용자는 연결이 완료되었다는 것을 확인하기 위해서라도 두 가지 방법 모두 고려해야 한다.

파일의 상단 부분에는 부트스트랩을 고정해야 하고, 이를 가져와 포함해야 한다.

그림 3: 부트스트랩 고정(the bootstrap Constant)

다음으로 사용자는 커넥션을 시도하지만, 만약 커넥션 이 실패할 경우 자동으로 재시도할 것이다. 보호 장치의 일환으로 사용자는 연결을 재시도하기 전에 커넥션이 끊어지는 것을 확인하고 싶을 것이다.

그림 4: 두부트스트랩 재연결 함수 (The dobootstrap(reconnect) Function)

다음에 할 일로는 processAnnounce() 함수를 개발하는 것이다. processAnnounce() 함수는 공개 채널(public channel, pubsub)에 구독하기 위해 사용할 수 있다. 아나운서라는 회로에 구독하고 여기에 processAnnounce() 함수를 첨부한다. 비교를 위해 자신의 ID를 저장하므로 자신에게서 수집한 메시지를 다시 보내지 않아도 된다. 오랜 시간동안 휴면상태에 있을 경우 연결이 끊어질 경향이 있으므로 네트워크에 부활 패킷(keep-alive packet)을 끊임없이 보내는 것은 중요하다.

그림 5: processAnnounce() 함수 파트1(The processAnnounce() Function Part I)

p2p 회로 주소를 모으기 시작하면 표준 문자열 분할을 활용하여 메시지에서 쪼갤 수 있다. 또한, 커넥션을 확인하려는 항목이므로 WebRTCStar에서 피어 목록을 얻을 수 있다. 다음으로 사용자는 커넥션을 2번 시도해볼 것이다. 일반적으로 시스템이 첫 번째 시도를 거부하여 사용자는 커넥션을 불필요하게 시행하게 되므로, 백업 시도는 연결을 성공적으로 하기 위해 필요한 것이다.

그림 6: processAnnounce() 함수 파트2(The processAnnounce() Function Part II)

사용자는 checkAlive() 함수를 사용하여 커넥션 상태를 업데이트하여 그 상태를 채팅창에 업데이트할 수 있다. 또한 사용자는 부활 패킷이 15초마다 수신받을 수 있도록 시간 조정을 하여 그가 연결된 것을 확인하고자 한다. 사용자는 이때 연결에 대한 오버헤드(overhead)를 완료했으므로 메시지를 주고받을 수 있다.

*오버헤드(overhead): 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간 · 메모리 등을 말한다.

그림 7: checkAlive() 함수(the checkAlive() Function)

이제부터 Onload() 함수를 업데이트할 것이다.

그림 8: 업데이트된 onload() 함수(the Updated onload() Function)

단계 2: 메시지 주고받기

두 개의 래퍼(wrapper)를 사용하여 채팅 시스템과 상호작용할 것이다. 래퍼들을 부트스트랩 정의 아래에 배치하지만, 두부트스트랩(재연결) 함수 위에 배치한다. 첫 번째는 채널에 플래그(flag)로 전달된 문자열을 사용하는 표준 joinChannel() 함수로, 이를 통해 공개 채널을 구독하고 해당 채널에서 보낸 모든 메시지를 수신할 수 있다. sendmsg() 함수(소문자 m)는 유사하게 사용되지만, 사용자는 이 함수를 사용하여 강한 메시지를 보낼 수 있다. 다른 sendMsg() 함수(대문자 M)는 보다 높은 차원의 함수로서, 텍스트 요소로부터 인풋 데이터를 모아서 전송한다. out() 함수는 받은 메시지를 채팅에 보낼 수 있다.

그림 9: 메시지 전송 및 채널 조인(Message Sending and Channel Joins)

추가 고려사항

코드 검사에서 바로 알 수 있듯이 이 시스템은 IPFS에서 수행할 수 있는 작업을 소개하기 위해 개발됐다. 그러나 이 시스템은 더 기능적이고 강력한 기반이 될 수 있다. 조금의 노력만 더해지면 채팅 안에서 사용자는 이모티콘을 보내거나 gif를 연결할 수 있기도 하다. 또한 이미 내장된 미디어를 전시할 수 있다. 이 튜토리얼은 모든 메시지를 암호화하지 않지만, 개발자들은 적합하다고 생각하면 자체 사용자 지정 암호화를 추가할 수 있다. 모든 메시지는 서명되어 있기 때문에 제삼자가 전달한 경우에도 메시지를 확인할 수 있다.

더욱 다양한 정보 및 방송 관련 소식은

공식 SNS 채널을 통해 확인 가능합니다.