文書の過去の版を表示しています。
node.jsでsimpleなチャットシステムをつくる
このページでは node.js と p5jsでシンプルなチャットシステムを制作します.最初はローカル環境で動作させた後,外部無料サーバ(heroku)にデプロイするまでを一緒にやってみましょう.このページの手順を追った動画も合わせて紹介しておきます.
最初にnode.js をインストールしてください。
p5.jsでサンプルを作成する
まず最初にp5.jsにいって,簡単なサンプルを作成します.今回はsimpleなチャットシステムと考えているので,
- 自分の名前の入力欄
- 送信テキストの入力欄
- 送信ボタン
- テキスト表示画面
のUIを最初に作成します.こちらで作成した雛形を以下に置きます.
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 を2つのウィンドウで開いてお互いにチャットメッセージを送り合ってみてください.自分のメッセージしか画面上では更新されないのがわかると思います.では以下では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('https://simplechat-7305.herokuapp.com'); // ここのURLはみなさんがherokuにdeployしたURLを指定してください. socket.on('chatdata', 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('chatdata', chatdata); console.log(chatdata); chatlog.name = chatdata.name; chatlog.message = chatdata.message; }
その他Herokuに必要な準備
Procfileの作成
server.jsと同じ場所にProcfileを作成して置く必要があります.中身には
web: node server.js
を一行だけ追記しておきます.
.gitignore の追加
.gitignoreファイルを server.jsと同じ場所に作成し,中身には node_modules を記述しておきます.これはherokuにデータをpushした場合に,node_modules以下のファイルをアップロードしないための設定です.