node.jsでsimpleなチャットシステムをつくる

このページでは node.js と p5jsでシンプルなチャットシステムを制作します．最初はローカル環境で動作させた後，外部無料サーバ（heroku）にデプロイするまでを一緒にやってみましょう．このページの手順を追った動画も合わせて紹介しておきます．

最初にnode.js をインストールしてください。

https://nodejs.org

p5.jsでサンプルを作成する

まず最初にp5.jsにいって，簡単なサンプルを作成します．今回はsimpleなチャットシステムと考えているので，

自分の名前の入力欄
送信テキストの入力欄
送信ボタン
テキスト表示画面

のUIを最初に作成します．こちらで作成した雛形を以下に置きます．

simplechat_2020_06_16_15_24_27.zip

server.js

では次に同じディレクトリ内にserver.jsというファイルを作成して，下記のプログラムをコピーします．

server.js

// すでに環境設定でポートが設定されていれば，それに従い，そうでなければ3000番をポート番号として利用する
var PORT = process.env.PORT || 3000;
 
// expressはウェブサービスを提供するモジュール
let express = require('express');
 
// expressモジュールの初期化．appにexpressモジュールを代入している
let app = express();
 
// 指定したポート番号でサービス窓口を開始
let server = app.listen(PORT)
 
// 窓口にお客が来たときにpublic以下のディレクトリファイルを提供する
app.use(express.static('public'));
 
// ポート番号（サービス窓口番号）確認用出力
console.log("Socket server is running. localhost:" + PORT)
 
/// socket.ioモジュールの読み込み 
let socket = require('socket.io');
 
// 先程作成したサービス窓口を 変数 io に代入
let io = socket(server);
 
// 教えてもらったサービス窓口で socket.io というプロトコルで通信をする
// ユーザの接続があるとconnectionメッセージが最初に送信されるので，そのメーッセージが来たときに呼び出す関数を指定する 
io.sockets.on('connection', newConnection)
 
// newConnection関数の定義．socketには接続したユーザの情報が含まれている
function newConnection(socket) {
    console.log('connection:', socket.id);
 
    // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる
    socket.on('sendMessage', gotMessage);
    function gotMessage(data) {
        // 接続しているユーザ全員にメッセージを転送する
        socket.broadcast.emit('gotMessage', data)
        console.log(data)
    }
}

このプログラムはクライアントからのchatdataという名前のメッセージをそのまま他のクライアントに送信するプログラムになっています．詳しくはDanielの動画を見直してみましょう．この server.jsをnodeコマンドで実行しても，expressとsocket.ioのライブラリがないためにエラーとなります．なので，これらを追加します．

> npm init
> npm install express --save
> npm install socket.io --save

以上でライブラリのインストールが終わり，もう一度

> node server.js

でプログラムが動作するかを確認します．ちゃんと動作している場合は，Socket server is running. localhost:3000 とターミナルに表示されていると思います．では次にブラウザを開き，アドレス欄に　http://localhost:3000/　を入力してアクセスしてみましょう．

これでサーバにアクセスして指定したウェブサイトを表示できるようになりましたが，まだsketch.js内には通信に関してなにも定義されていないため，チャットデータのやり取りがユーザ同士では実現できていません．試しに localhost:3000 を２つのウィンドウで開いてお互いにチャットメッセージを送り合ってみてください．自分のメッセージしか画面上では更新されないのがわかると思います．では以下ではsketch.jsに通信のための機能を実装していきます．

index.htmlの修正

sketch.js側ではsocket.ioを利用するのでそのための準備として，index.htmlでsocket.ioライブラリを読み込んで置く必要があります．headタグ内に，

<script src="/socket.io/socket.io.js"></script>

を追記しておきます．

sketch.jsの修正

sketch.js

var socket;
var chatlog = {
  name: "Name",
  message: "Sample message"
}
function setup() {
  createCanvas(400, 400);
  select("#send").mouseClicked(sendMessage);
  socket = io.connect(window.location.origin);
  socket.on('gotMessage', gotMessage);
}
 
function gotMessage(chatdata) {
  console.log(chatdata);
  chatlog.name = chatdata.name;
  chatlog.message = chatdata.message;
}
 
function draw() {
  background(220);
  text("名前:" + chatlog.name, width / 2, height / 2);
  text("メッセージ:" + chatlog.message, width / 2, height / 2 + 12);
}
 
function sendMessage() {
  var text_name = document.getElementById("name").value;
  var text_message = document.getElementById("message").value;
  var chatdata = {
    name: text_name,
    message: text_message
  }
  socket.emit('sendMessage', chatdata);
  console.log(chatdata);
  chatlog.name = chatdata.name;
  chatlog.message = chatdata.message;
}

以上でユーザ側の通信手続きも揃いました．もう一度 localhost:3000 をブラウザで2ひらき，お互いのメッセージが届いていることを確認してみましょう．

さて，ここまでで同じパソコンの中で通信を実現することができるようになりました．次はこれを外部サーバにアップロード&インストール（デプロイ）して，遠隔地間でチャットができるかどうかを確認してみます．

Herokuへのデプロイに必要な準備

Procfileの作成

server.jsと同じ場所にProcfileを作成して置く必要があります．中身には

web: node server.js

を一行だけ追記しておきます．

.gitignore の追加

.gitignoreファイルを server.jsと同じ場所に作成し，中身には node_modules を記述しておきます．これはherokuにデータをpushした場合に，node_modules以下のファイルをアップロードしないための設定です．

Herokuにデプロイ

まずはHerokuにてアカウントを作成します．

https://www.heroku.com

ログイン先の右上の New ボタンから Create new app を選択します．

App name: simplechat-XXXX （XXXXは適当な乱数にしておいてください）
Choose a region: United States（Japanを選択したいのですが，リストにないので）：

新規にアプリを作成できると，のような画面が表示されます．ページ下にある Deploy using Heroku Gitの手順にしたがってpushまで行います．

目次