読者です 読者をやめる 読者になる 読者になる

kei0425tan’s blog

技術的なことを主に

herokuでnodejsでチャット

herokuでリアルタイムチャット作ってみたいなということで、こちらを参考にして作ってみました。(参考というかコアな部分は丸コピになります。)
Node.js + Socket.IO + jQuery で最小構成チャット - Qiita

herokuでアプリの設定

橋本商会 » Node.jsに入門して画像チャットを作ってHerokuで動かした
まあ、最初から最後までこっちでもいいんだけど、念のため。

ファイルの用意

ファイルは以下

  • index.html
  • server.js
  • package.json
  • Procfile

index.html

<!doctype html>
<meta charset="utf-8">
<title>chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<form><input></form><div></div>
<script>
 var socket = io();
 $('form').submit(function () {
   socket.emit('msg', $('input').val());
   $('input').val('');
   return false;
 });
 socket.on('msg', function (data) {
   data = $('<div/>').text(data).html();
   $('div').prepend(data + '<br>');
 });
</script>

server.js

var html = require('fs').readFileSync('index.html');
var http = require('http').createServer(
    function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(html);
});
var io = require('socket.io')(http);
var webPort = process.env.PORT || 3000;
http.listen(webPort);
io.on(
    'connection',
    function (socket) {
        socket.on(
            'msg',
            function (data) {
                io.emit('msg', data);
            }
        );
    }
);

herokuの場合はポートがprocess.env.PORTになります。

package.json

{
  "name": "chat04",
  "version": "0.0.1",
  "description": "test",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "socket.io": "^1.3.6"
  }
}

npm initで質問に答えるだけで自動生成できる。

Procfil

web: node server.js


以上の組み合わせで無事にチャットが動きましたー