42
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

はじめに

PeerServerはオープンソースのWebRTCクライアントのPeerJS用のSignalingサーバーです。

先日はPeerServerをIaaSとかにインストールする手順を書いたけど、いつの間にかHerokuがWebSocketをサポートしている(まだBeta)ことを知ったので、HerokuでPeerServer動かしてみました。

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

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

PeerServerをHerokuで動かす手順

PeerServerをダウンロード

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

Herokuで動かすために、server.jsProcfileの2つのファイルを作成
server.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

コミット

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

Herokuにアプリを作成

$ heroku create peerserver001

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

$ heroku labs:enable websockets

Herokuのデプロイ

$ git push heroku master

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

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

Herokuは無料でSSLが使えるので、以下のようにすればSSL通信にもできる
PeerJSが提供しているPeerServer CloudはSSLじゃないけど、Herokuを使えば無料でSSLのPeerServerを立てられるよ。

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

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

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

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

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

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

$ 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

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

今日のソースはこちら

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

最後に

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

co-meeting

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

42
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?