【Ionic】 PeerJS를 사용하여 P2P 채팅 앱 만들기

실행 환경은 홈 네트워크 내에서 가정합니다.

PeerJS란?

PeerJS는 WebRTC를 일반적으로 사용하는 것보다 쉽게 ​​처리에 통합 할 수 있도록 개발 된 JavaScript 라이브러리입니다.

PeerJS - GitHub

이번에는 Node.js를 사용하여 간단한 시그널링 서버를 자전으로 준비하고, PeerJS를 사용해 그 서버에 액세스해, 브라우저간의 시그널링을 행합니다.

Ionic으로 피어 만들기

평소

$ ionic start p2p-text-chat blank
$ cd p2p-text-chat

PeerJS 유형 정의 설치

$ npm install --save @types/peerjs

PeerJS 로딩

"src/index.html"에 다음을 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js"></script>

Talk 클래스 정의

이번에는 한 번의 메시지를 Talk 인스턴스로 관리합니다.

class Talk {
  constructor(
    public srcId: string,
    public destId: string,
    public message: string
  ) {}
}

메시지 제출 양식 만들기

Angular에서 말하는 Template-driven Forms에 따라 작성합니다.
"연결 대상 PeerID"또는 "보내는 메시지"중 하나라도 비어 있으면 "Send"버튼이 비활성화됩니다.

<!-- 自分のPeerID -->
<h3>Your PeerID is <span ion-text color="danger">{{ talk.srcId }}</span></h3>

<!-- 投稿フォーム -->
<form (ngSubmit)="onSend()" #talkForm="ngForm">

  <!-- 接続先PeerID入力 -->
  <ion-item>
      <ion-label>Connect to</ion-label>
      <ion-input name="destPeerId" type="number" required [(ngModel)]="talk.destId" #destPeerId="ngModel"></ion-input>
  </ion-item>

  <!-- 送信メッセージ入力 -->
  <ion-item>
      <ion-label>Message</ion-label>
      <ion-input name="message" type="text" required [(ngModel)]="talk.message" #message="ngModel"></ion-input>
  </ion-item>

  <!-- 送信ボタン Required設定されているInputがある場合は非活性 -->
  <ion-row>
    <ion-col center text-center>
      <button ion-button type="submit" [disabled]="talkForm.form.invalid">Send</button>
    </ion-col>
  </ion-row>
</form>

Talk 인스턴스를 초기화합니다.
또한 무작위 PeerID를 발행하고 이를 기반으로 Peer 인스턴스를 만듭니다.
Peer 인스턴스가 안전하게 생성되고 청취 상태가 되면,
생성된 PeerID를 Talk 인스턴스로 설정합니다.
마지막으로 다른 Peer로부터 접속을 받았을 경우의 처리의 싱크처를 설정합니다.

talk: Talk = new Talk('', '', '');
talkHistory: Talk[] = [];
peer: PeerJs.Peer;

ionViewDidLoad() {
  this.start();
}

public start() {
  const peerId = String(Math.floor(Math.random() * 900) + 100);
  const options = {
    host: location.hostname,
    port: 9000
  };

  this.peer = new Peer(peerId, options);

  this.peer.on('open', id => this.talk.srcId = id);

  this.peer.on('connection', conn => this.receive(conn));
}

private receive(conn: PeerJs.DataConnection) {
  conn.on('open', () => {
    conn.on('data', data => this.showMessage(data));
  });
}

showMessage(talk: Talk) {
  this.talkHistory.push(talk);
}

입력한 메시지 보내기

제출 작업을 받으면 onSend 함수가 실행됩니다.

onSend() {
  const conn = this.peer.connect(this.talk.destId, { serialization: 'json' });

  conn.on('open', () => {
    conn.send(this.talk);
    this.showMessage(this.talk);
  });
}

Talk 기록 보기

이번에는 ion-card를 사용했습니다.

<!-- トーク履歴表示 履歴が0の場合は表示しない -->
<ion-card *ngIf="talkHistory.length > 0">
  <ion-card-content>
    <ion-card-title>Talk</ion-card-title>
      <ion-list>
        <ion-item *ngFor="let talk of talkHistory;">
          <h3>[{{talk.srcId}} -> {{talk.destId}}]</h3>
          <p>{{ talk.message }}</p>
        </ion-item>
      </ion-list>
  </ion-card-content>
</ion-card>

이제 피어를 준비했습니다.
실행 이미지는 다음과 같습니다.

시그널링 서버 구축

준비

Peer 패키지 설치

$ npm install --save peer

코드

"peer.server.js"라는 파일을 만들고 다음을 작성했습니다.

var PeerServer = require('peer').PeerServer;
var server = new PeerServer({port: 9000});

이상. 놀랄 정도로 쉬웠습니다.

실행하다

두 터미널을 시작하고 첫 번째로

$ node peer.server.js

두 번째 터미널에서

$ ionic serve

이런 식으로 움직입니다.

끝에

기본 중의 기본입니다만 바삭바삭 움직임을 확인할 수 있었습니다.
참고서적에 링크를 붙인 책의 내용의 복습이라고 하는 느낌이군요.

더 유행하게 하기 위해서는 「Ionic 사용하면 이런 느낌으로 바삭바삭하게 프로토타입 만들 수 있어요」라고 실례를 늘려 가는 것이 좋을까・・・

상당히 했기 때문에 유행 해 주었으면 좋겠다.

실제 코드는 여기 GitHub입니다.

참고서적

HTML5/WebSocket/WebRTC로 TypeScript 네트워크 프로그래밍