processing:p5js:xx.node.jsでsimplechat

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

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

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

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

のUIを最初に作成します.こちらで作成した雛形を如何に置きます.

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

server.js
var PORT = process.env.PORT || 3000;
let express = require('express');
let app = express();
let server = app.listen(PORT)
 
app.use(express.static('public'));
 
console.log("Socket server is running. localhost:" + PORT)
 
let socket = require('socket.io');
let io = socket(server);
 
io.sockets.on('connection', newConnection)
 
function newConnection(socket){
	console.log('connection:',	socket.id);
	socket.on('chatdata', mouseMsg);
 
	function mouseMsg(data) {
		socket.broadcast.emit('chatdata', 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側ではsocket.ioを利用するのでそのための準備として,index.htmlでsocket.ioライブラリを読み込んで置く必要があります.headタグ内に,

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

を追記しておきます.

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;
 
 
}

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

web: node server.js

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

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

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

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

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

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

  • processing/p5js/xx.node.jsでsimplechat.txt
  • 最終更新: 2020/06/17 15:43
  • by baba