WebRTCサーバー「PeerServer」をHerokuで動かす

# はじめに

PeerServerはオープンソースのWebRTCクライアントの[PeerJS](http://peerjs.com/)用のSignalingサーバーです。

先日は[PeerServerをIaaSとかにインストールする手順](http://qiita.com/atskimura/items/80b2bb8fbc055cd4616f)を書いたけど、いつの間にか[HerokuがWebSocketをサポートしている](https://blog.heroku.com/archives/2013/10/8/websockets-public-beta)（まだBeta）ことを知ったので、HerokuでPeerServer動かしてみました。

WebRTCってなんだ？PeerServerってなんだ？って人は前の記事から読んでみてください。

* [WebRTCのオープンソースソフトウェアまとめ](http://qiita.com/atskimura/items/97b2cc04e19781f4a4e6)
* [オープンソースのWebRTCサーバー「PeerServer」インストール手順](http://qiita.com/atskimura/items/80b2bb8fbc055cd4616f)

とりあえず動かしたい方は一番下にHeroku対応済みのソースのリンクを貼っておいたので、それをcloneすればすぐにHerokuにデプロイできます。

# PeerServerをHerokuで動かす手順

PeerServerをダウンロード

```bash
$ git clone https://github.com/peers/peerjs-server.git
$ cd peerjs-server
```

Herokuで動かすために、`server.js`と`Procfile`の2つのファイルを作成
server.jsのオプションはご自由に

```js:server.js
var PeerServer = require('./lib/server').PeerServer;
var server = new PeerServer({
	port: process.env.PORT || 9000,
	key: 'peerjs'
});
```

```:Procfile
web: node server.js
```

コミット

```bash
$ git add .
$ git commit -m "for Heroku"
```

Herokuにアプリを作成

```bash
$ heroku create peerserver001
```

HerokuのWebSocketサポートはまだPublic Betaなので有効にするコマンドを実行

```bash
$ heroku labs:enable websockets
```

Herokuのデプロイ

```bash
$ git push heroku master
```

クライアントのnew Peerのところを修正

```bash
self.peer = new Peer({　host:'peerserver001.herokuapp.com', key: 'peerjs', debug: 3})
```

Herokuは無料でSSLが使えるので、以下のようにすればSSL通信にもできる
PeerJSが提供している[PeerServer Cloud](http://peerjs.com/peerserver)はSSLじゃないけど、Herokuを使えば無料でSSLのPeerServerを立てられるよ。

```bash
self.peer = new Peer({　host:'peerserver001.herokuapp.com', secure:true, port:443, key: 'peerjs', debug: 3})
```

# せっかくなのでPeerJSのデモも一緒に動かす

Herokuで静的ページを公開するアプリを使わせてもらいます。
https://github.com/machida/kuroigamen-sandbox

```bash
$ git clone git://github.com/machida/kuroigamen-sandbox.git
```

publicの下にpeerjsのリポジトリから以下のファイルを持ってくる。

* [peerjs/dist/peer.js](https://github.com/peers/peerjs/blob/master/dist/peer.js)
* [peerjs/examples/videochat/index.html](https://github.com/peers/peerjs/blob/master/examples/videochat/index.html)
* [peerjs/examples/videochat/style.css](https://github.com/peers/peerjs/blob/master/examples/videochat/style.css)

index.htmlを適当に直す。
SSLで動くようにと、Heroku上のPeerServerを見るように

```bash
$ diff ../peerjs/examples/videochat/index.html public/index.html
5,6c5,6
<   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<   <script type="text/javascript" src="/dist/peer.js"></script>
---
>   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
>   <script type="text/javascript" src="peer.js"></script>
13c13
<     var peer = new Peer({ key: 'lwjd5qra8257b9', debug: 3});
---
>     var peer = new Peer({　host:'peerserver001.herokuapp.com', secure:true, port:443, key: 'peerjs', debug: 3})
```

# 動いたよ

## https://peerjs001.herokuapp.com

![peerjs-heroku.png](https://qiita-image-store.s3.amazonaws.com/0/27267/f661e5bc-41db-ca00-d7e4-04e883cb4a95.png)

ちなみにここ大事なのですが、 **SSLで動かすとマイクやカメラの許可が一回で済むのです！**
HTTPの http://peerjs001.herokuapp.com と比べてみて欲しいのですが、こちらだとアクセスするたびにカメラの許可を聞かれてしまいますね。
というわけでみんなカメラやマイクを使うアプリはSSLで動かしましょうね。

# 今日のソースはこちら

大して直してないですが、すぐ試せるようにソースをGithubに上げておきました。

* PeerServer: https://github.com/atskimura/peerjs-server-heroku
* ビデオチャットデモ: https://github.com/atskimura/peerjs-examples-heroku

# 最後に

ちょっと宣伝。うちの会社で作ってる[co-meeting](http://www.co-meeting.com/)はWebSocketを使って一文字ずつ相手に伝わり会話のように議論できるテキストディスカッションツールです。
WebRTCのDataChannelは使ってないけど、リアルタイム系は抑えておかないとねということで最近はWebRTCもいじってます。
一文字ずつ伝わるテキストチャットはみんなでやるとおもしろいのでぜひ試してみてください。
### [co-meeting](http://www.co-meeting.com/)

　
では、楽しいWebRTCライフを！