メモ

HerokuにExpress4＋SocketIOを入れるメモ

Posted on by seigo

いろんなサンプルがExpress3＋Socket.ioで困ってたのだけど、とてもシンプルで最近の良い記事が以下が見つかったので、それを元にHerokuへのインストールやってみた。

Node.js – Express4系とSocket.io1系チュートリアルを試してみる – Qiita

ひとまずHerokuにNodeJSインストール

Getting Started with Node.js on Heroku | Heroku Dev Center

ローカルにexpressとsocket.ioをインストール

※20150512修正 コマンドが間違ってました。こちらが正しいです。

npm i --save express
npm i --save socket.io

npm i –save-dev express
npm i –save-dev socket.io

package.jsonにも追加されるのでHerokuにも同期できる。

これをHerokuコミットしてデプロイ

getting startで入ったindex.jsに既にコードがあるので生かして使う。express既に使われている状況。

var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));

app.get('/', function(request, response) {
  response.send('Hello World!');
});

app.listen(app.get('port'), function() {
  console.log("Node app is running at localhost:" + app.get('port'));
});

ローカルでindex.js起動

node index.js

image_20150428_002806_20

無事動きます。

index.js → app.jsにリネーム

index.js → app.jsにリネームする。

Procfileも合わせる

web: node index.js

を

web: node app.js

に変更。

Herokuコミットしてデプロイ

デプロイして一旦確認。

app.js編集

app.get('/', function(request, response) {
  response.send('Hello World!');
});

をpublic/index.htmlを読むように変更

app.get('/', function(request, response) {
  res.sendFile(__dirname + '/public/index.html');
});

socket.io実装

「実際にメッセージを共有する部分」の調整

herokuのapp.jsを少々イジる。

/*
// 元ネタ
var express = require('express');
var app = express();
var io = require('socket.io')(http);
*/

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

/*
// 元ネタ
app.listen(app.get('port'), function() {
  console.log("Node app is running at localhost:" + app.get('port'));
});
*/

http.listen(app.get('port'), function(){
  console.log('listening on *:' + app.get('port'));
});

双方向なブロードキャストの部分

書き加える。

Herokuコミットしてデプロイ

実行してみるとコンソールでエラー吐いてる。

Mixed Content: The page at 'https://test-1ft-socketio.herokuapp.com/?' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.11.1.js'. This request has been blocked; the content must be served over HTTPS.

HTTP/HTTPSがあってねえよと言われるので、パスを両対応の // にする。

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<script src="//cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>

これで無事動いた

image_20150428_002902_21

余談1：恐れていたこの辺りはハマらなかった

node, socket.ioを使ったウェブアプリをherokuにアップロードした時につまずいたところメモ – Qiita

もうHerokuはWebSocket対応してくれてる模様。よかった。

余談2：Heroku本家にもWebSockets記事あった

Using WebSockets on Heroku with Node.js | Heroku Dev Center

今回試したものも、かなりお作法に則ってるっぽい。

余談3：Socket.ioのサイトのゴロがSVG

SVGだったのでタイトル画像作る際に、拡大縮小で劣化せず扱いやすかったです。

おわりに

やはり、一度でも動かしてみると仕組みが理解しやすいです。よいサンプルに出会えてありがたやありがたや。

それでは、よき Heroku & NodeJS & SocketIO Lifeを！

、、、
seigo