디스코 챗(Disco Chat)은 타우리(Tauri), 자바스크립트 그리고 HTML을 사용하여 많든 p2p 챗 어플리케이션이다.
콘텐츠 목록
- 디스코 챗이란?
- 디스코 챗의 여정
- 오늘날의 디스코 챗
- 디스코 챗의 기능
- 변경할 수 있는 프로필을 위해 디스코 챗이 IPNS를 사용하는 방법
- IPNS 프로파일 기술적인 문제
- 디스코 챗이 종단 간 암호화를 구현하는 방법
- 종단 간 암호화 기술적인 문제
- 변경할 수 있는 프로필을 위해 디스코 챗이 IPNS를 사용하는 방법
- 마무리
- 링크
본 글에서는 디스코 챗이 무엇인지, 디스코 챗이 어떻게 그리고 왜 만들어졌는지에 대한 여정을 다룬다. 또한, 그 길에서 마주한 여러 문제에 대해 나눈다. 웹 개발에 친숙해지는 것은 앞으로 기술적인 부분에서 유용하다. 어플리케이션에 러스트(Rust) 구성 요소도 있지만 러스트는 이해에 그다지 필요치 않다.
디스코 챗이란?
디스코 챗은 사용자 지정 프로필, 종단 간 암호화, 오프라인 채팅 동기화 등을 자랑하는 재미있고 사용하기 쉬운 P2P 채팅 응용 프로그램이다. 개발자들에게 이와 같은 애플리케이션을 만드는 방법을 보여준다. (전문적이지 않더라도)만약 참여하고 싶다면 디스코 챗 출시 페이지에 방문하십시오.
디스코 챗의 핵심은 쿠보(Kubo) 노드로 구동되는 IPFS&libp2p를 사용한다. 오늘날의 개발자들이 쉽게 사용하게 하려고 HTML/CSS 인터페이스를 가지며 대부분 자바스크립트로 작성되었다. 단일 어플리케이션에서 쿠보, 자바스크립트, HTML 및 CSS에 완전한 동력을 제공하며 데스크톱에서 얇은 브라우저에서 작업할 수 있게 하는 타우리의 러스트 구성 요소도 있다.
디스코 채팅은 native-ipfs-building-blox(기본 ipfs 구성 요소)를 기반으로 하며, HTML/자바스크립트를 사용하여 데스크톱 IPFS 응용 프로그램을 구축하는 데 좋은 키트다(원한다면 러스트도 마찬가지다). 만약 새로운 아이디어를 위해 디스코 채팅에서 코드 정보를 가져가고 싶다면, native-ipfs-building-blox를 기반으로 사용하는 것을 강력히 추천한다.
디스코 챗의 여정
디스코 챗은 진정으로 최소한의 브라우저 채팅 애플리케이션으로 시작되었다. 공개 채널에서 닉네임을 설정하고 메시지를 작성할 수 있었다. 백엔드는 많은 '방'을 지원할 수 있었지만 프론트엔드는 할 수 없었다. 이 어플리케이션은 오늘날 'IPFS: 브라우저 연결 설명'이라는 제목의 비디오와 '단순 채팅 어플리케이션 작성'으로 존재한다. 디스코 챗과 비슷하게 브라우저 내의 채팅 어플리케이션 혹은 원하는 것을 구축하기 위한 기반을 개발자들에게 제공하는 것이 목표였다.
여기서 디스코 챗이 만들어졌다. 프레임워크를 구축한 후에 나만의 챗 어플리케이션을 구축하는 것이 재미있어 보였고 이를 위해서는 어떤 노력을 해야 하는지 살펴보았다. 이 시점에서 디스코 챗은 브라우저에서 작동할 수 있었으며 다수의 방, 마크다운(markdown), 이미지 공유, 비디오 공유, 이모티콘, 여러 줄의 텍스트 등과 같은 많은 기능이 제공되었다. 서버 없이 바로 다른 사용자들과 연결되는 웹 페이지를 여는 것은 흥미로웠다.
디스코 챗을 비롯한 원래의 챗은 서킷릴레이V1(CircuitRelayV1) 및 libp2p-webrtc-star에 의존했다. 불행하게도 요즘 쿠보에서 Cirvuit Relay V1의 폐지로 브라우저에서 릴레이를 달성하는 것은 훨씬 어렵다. 이것 외에도 브라우저 환경이 실제로 대부분의 p2p 기술을 제한시켜 홀펀칭(hole-punching)과 같은 것을 매우 어렵게 만든다. 이것만으로도 다른 길을 선택하기에 충분했지만, 현재 libp2p-webrtc-star도 다가오는 libp2p WebRTC 브라우저 대 브라우저 사양을 선호하여 더는 사용되지 않는다. 그래서 얼마 동안은 브라우저에서 지속할 수 없었다.
브라우저 버전이 언젠가 돌아오면 좋겠지만, 현재 모조의 브라우저 환경에서 작업하고 있으며 다시 브라우저로 옮기는 것이 상대적으로 쉬워야 한다.
오늘날의 디스코 챗
현재 자바스크립트의 인기는 말할 것도 없고, 크로스 플랫폼으로 작동하는 그래픽 어플리케이션을 쉽게 만들 수 있기 때문에 나는 디스코 챗을 브라우저에 유지하고 싶었다. 처음에 일렉트론(Electron)을 보았지만 (대규모라는 것은 말할 것도 없는)대기업에 대해 개발자와 사용자가 가지게 되는 많은 규제를 보고 걱정이 많았다. 하지만 여러 검색을 한 후에 러스트에 관련이 있는 매우 얇고 가벼운 브라우저 뷰인 타우리를 찾았다.
여기서 쿠보 노드 구동의 웹뷰를 사용하여 데스크톱 어플리케이션 생성을 도와주기 위해 native-ipfs-building-blox를 만들었다. 자바스크립트 면의 API는 정확히 동일하지만, 쿠보 RPC 클라이언트를 사용함으로써 js-ipfs 대신에 IPFS 노드를 실행하는 것과 같은 무거운 작업을 쿠보가 다 처리한다. 이는 서킷릴레이V2를 사용하고 일반적으로 소켓에서 들을 수 있는 고급 홀 펀칭 기술과 같은 전력을 제공한다.
그 후 브라우저 기반의 디스코 챗을 약간의 수정을 통해 UI 디렉토리에 넣었다. 디스코 채팅의 브라우저 버전은 쿠보와 쿠보 RPC API를 사용하는 새로운 디스코 챗에서는 더는 필요하지 않은 브라우저의 js-ipfs를 사용하였다. 그 후, 그 UI 디렉토리를 정리하고, 많은 코멘트를 추가하고, IPNS 기반 프로파일과 엔드 투 엔드 암호화를 구현했다.
디스코 챗의 기능
디스코 챗은 p2p로 운영되는 많은 기능이 있다. 주목할 만한 기능은 다음과 같다.
- 채팅방(암호화되지 않음)
- 암호화된 직접적인 메시지
- 이모티콘
- 마크다운
- 이미지 공유
- 비디오 공유
멋진 기능이지만, 웹3 공간에서 특별하게 눈에 띄는 것은 없다(서버나 체인이 없는 채팅방 제외). 디스코 챗을 다른 개발자들이 배울 수 있는 유용한 기능을 추가하여 눈에 띄게 하기 위해 커뮤니티와 동료 팀원들과 브레인스토밍을 했다. 많은 개발 프로젝트가 분산되며 체인 및 합의 없는 환경에서 최소한 두 가지 부분에서 문제를 겪는다고 결론을 내렸다.
- 단순한 웹사이트/리디렉트를 넣어 변경 가능한 데이터를 보유하는 방법
- 데이터를 숨기거나 암호화하는 방법
이러한 문제를 해결하기 위해 디스코 챗의 IPNS 기반 프로필을 만들었다. 변경 가능한 데이터를 보여주고 IPFS(혹은 어떤 공개 방)에서 데이터를 암호화하거나 숨기는 방법의 기초를 보여주기 위한 간단한 종단 간 암호화 기능이 있다. 이는 각 IPFS 노드가 키 쌍을 통해 생성되는 피어ID(PeerID)로 알려진 고유한 식별자를 가지고 있기 때문에 가능했다. 프로필 검색을 위해 피어ID를 IPNS 이름으로 활용하고 데이터 암호화를 하기 위해 키 쌍을 사용한다.
변경 가능한 프로필을 위해 디스코 챗이 IPNS를 사용하는 방법
이전에는 챗에서 메시지가 보내질 때마다 사용자의 닉네임이 같이 전송됐었다. 하지만 디스코 챗으로 발전하면서 메시지마다 프로필 사진과 연결된 CID가 같이 보내졌다. 이제 프로필 정보는 절대 전송되지 않는다. 프로필의 CID 대신에 정보 자체가 사용자의 (self 키라고도 알려진)피어ID를 사용하여 IPNS를 통해 생성된다. 즉 만약 사용자가 다른 사용자를 검색하고 싶다면 libp2p 덕에 해당 사용자의 피어ID를 알고 있으므로 필요한 프로필을 검색하기 위해 단순히 IPNS 검색을 하면 된다.
IPNS 프로필 기술적 문제
이 IPNS 프로필의 핵심은 ui/peers/ipns.js에 있으며 코드를 쉽게 가져갈 수 있는 약간 수정된 예시가 있다.
여기에 두 가지의 함수가 있다. publishProfile과 fetchPeerInfo다.
publishProfile은 IPNS에 프로필을 게시하는 함수다. 세 가지의 인수가 들어간다.
- ipfs - IPFS 핵심 API와 호환 가능한 객체
- currentNick - 사용자의 닉네임을 나타내는 문자열
- currentImg - 사용자의 아바타를 나타내는 문자열 CID
fetchPeerInfo는 다른 사용자의 프로필 정보를 가져오고 JSON을 분석하며 객체를(오류에 대해서는 undefined를) 반환한다. 세 가지의 인수를 포함한다.
- ipfs - IPFS 핵심 API와 호환 가능한 객체
- id - 사용자의 PeerID를 나타내는 문자열
- timeout(선택적) - 0.001초 안에 프로필을 검색하는 동안 기다릴 시간을 나타내는 정수
사용법이 간단하기를 바란다. 다음은 사용 예시다.
디스코 챗이 종단 간 암호화를 사용하는 방법
종종 'CID에서 데이터를 어떻게 숨기는 방법', 'IPFS에 추가하기 전에 데이터를 암호화하는 방법'과 같은 질문이 종종 있다. 디스코 챗의 경우 누구나 사용할 수 있는 간단한 기능을 구현했다. 원하는 특정 사용자에 대해 어떤 데이터든지 암호화한다. 이는 소통하고 있는 단 둘만 데이터를 해독할 권리가 있다는 것을 보장한다.
종단 간 암호화 기술적 문제
특정한 계획을 사용하기 전에 암호화 사용의 보안 영향을 연구하거나 이 주제에 대한 컨설팅을 받는 것을 강력히 추천한다.
디스코 챗의 암호화 예시는 ui/crypto.js에 있다. 시작하기 위해 다음과 같은 라이브러리가 필요하다.
- noble-ed25519 - ed25519 키로 작업하기 위함
- aes-js - 대칭 암호화를 처리
- bs58 - PeerID를 해독
메시지를 해독하기 위해서 수신자가 해야 할 일은 암호화 메시지를 생성하는 데에 쓰인 난스(nonce)(랜덤 숫자)와 암호화 메시지 자체다. 다음은 해당 코드다.
decryptMsg는 암호화된 메시지를 해독하며 여섯 개의 인수를 포함한다.
- msg - 해독하려는 암호화 메시지의 문자열
- n - 메시지 암호화에 사용된 난스를 나타내는 정수
- from - 발신자의 피어ID를 나타내는 문자열 CID
- to - 수신자의 피어ID를 나타내는 문자열 CID
- me - 우리의 고유한 피어ID를 나타내는 문자열 CID
- _priv_key - 우리의 고유한 피어ID의 개인키
해독된 메시지의 문자열을 반환한다.
encryptMsg는 메시지를 암호화한다. 세 가지의 인수를 포함한다.
- msg - 암호화하는 문자열
- to - 수신자의 피어ID를 나타내는 문자열 CID
- _priv_key - 우리의 고유한 피어ID의 개인키
이는 [암호화된 데이터, 난스]를 포함한 리스트를 반환한다. 메시지를 해독하기 위해서는 이 둘 다 필요하다.
해당 함수는 매번 보안을 생성한다는 것을 참고해야 한다. 이는 중간 정도로 무거운 실행이며 사용자당 한 번씩밖에 할 수 없다. 그래서 성능 면을 기대하고 있다면 이 보안을 캐시에 저장해야 한다. 이는 독자에게 남겨진 숙제다.🙂
해당 함수를 이용하는 것의 가장 큰 문제는 개인 노드의 개인 키 검색에 있다. 쿠보의 경우 config 파일(~/.ipfs/config)에 자동으로 저장된다. 디스코 챗의 경우 src/main.rs의 러스트 쪽에서 이뤄진다. Native-ipfs-building-blox 기초는 이 내장형의 러스트 측면을 가지고 있으며, 자바스크립트 측면에 노출되기만 하면 된다:
마무리
오늘날 디스코 챗은 개발자들이 분산형 프로필 및 암호화 데이터를 이용하여 p2p 어플리케이션 구축을 도와주는 최고의 예시 중 하나다. 누구나 이용할 수 있는 완전한 기능의 챗 어플리케이션이다. 아래는 디스코 챗 다운로드와 libp2p 및 IPFS에 대해 더 자세히 알아볼 수 있는 링크가 있다.
링크
- TheDiscordian/disco-chat: P2P 메시지 앱 | 깃헙
- TheDiscordian/native-ipfs-building-blox: HTML/CSS를 사용하여 IPFS 구동의 데스크톱 어플리케이션 만들기 | 깃헙
- 간단한 채팅 앱 만들기 | IPFS 문서
- IPFS&파일코인 시작
보다 다양한 정보 및 방송 관련 소식은
공식 SNS 채널을 통해 확인할 수 있습니다.