差分

このページの2つのバージョン間の差分を表示します。

--- p5js:10.node.jsでsimplechat [2021/03/09 02:33] – ↷ processing:p5js:10.node.jsでsimplechat から p5js:10.node.jsでsimplechat へページを移動しました。 baba
+++ p5js:10.node.jsでsimplechat [2021/06/02 10:15] (現在) – [その他Herokuに必要な準備] baba
@@ 行 14: / 行 14: @@
   * 送信ボタン
   * テキスト表示画面
-のUIを最初に作成します．こちらで作成した雛形を如何に置きます．
+のUIを最初に作成します．こちらで作成した雛形を以下に置きます．
   * {{ :processing:p5js:simplechat_2020_06_16_15_24_27.zip |}}
@@ 行 20: / 行 20: @@
 では次に同じディレクトリ内にserver.jsというファイルを作成して，下記のプログラムをコピーします．
 <file .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)
-function newConnection(socket){
+// newConnection関数の定義．socketには接続したユーザの情報が含まれている
-	console.log('connection:',	socket.id);
+function newConnection(socket) {
-	socket.on('chatdata', mouseMsg);
+    console.log('connection:', socket.id);
-	function mouseMsg(data) {
+    // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる
-		socket.broadcast.emit('chatdata', data)
+    socket.on('sendMessage', gotMessage);
-		console.log(data)
+    function gotMessage(data) {
-	}
+        // 接続しているユーザ全員にメッセージを転送する
+        socket.broadcast.emit('gotMessage', data)
+        console.log(data)
+    }
 }
 </file>
@@ 行 55: / 行 72: @@
 {{:processing:p5js:スクリーンショット_2020-06-17_0.38.47.png?400|}}
-こんな感じの表示が出ると思います．
+これでサーバにアクセスして指定したウェブサイトを表示できるようになりましたが，まだsketch.js内には通信に関してなにも定義されていないため，チャットデータのやり取りがユーザ同士では実現できていません．試しに localhost:3000 を２つのウィンドウで開いてお互いにチャットメッセージを送り合ってみてください．自分のメッセージしか画面上では更新されないのがわかると思います．では以下ではsketch.jsに通信のための機能を実装していきます．
 ===== index.htmlの修正 =====
@@ 行 65: / 行 82: @@
 <file .js sketch.js>
 var socket;
-var chatlog ={
+var chatlog = {
-  name:"Name",
+  name: "Name",
-  message:"Sample message"
+  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 = io.connect(window.location.origin);
-  socket.on('chatdata', gotMessage);
+  socket.on('gotMessage', gotMessage);
 }
-function gotMessage(chatdata){
+function gotMessage(chatdata) {
   console.log(chatdata);
   chatlog.name = chatdata.name;
@@ 行 84: / 行 101: @@
 function draw() {
   background(220);
-  text("名前:"+chatlog.name, width/2, height/2);
+  text("名前:" + chatlog.name, width / 2, height / 2);
-  text("メッセージ:"+chatlog.message, width/2, height/2+12);
+  text("メッセージ:" + chatlog.message, width / 2, height / 2 + 12);
 }
-function sendMessage()
+function sendMessage() {
-{
   var text_name = document.getElementById("name").value;
   var text_message = document.getElementById("message").value;
   var chatdata = {
-    name:text_name,
+    name: text_name,
-    message:text_message
+    message: text_message
   }
-  socket.emit('chatdata', chatdata);
+  socket.emit('sendMessage', chatdata);
   console.log(chatdata);
   chatlog.name = chatdata.name;
   chatlog.message = chatdata.message;
 }
 </file>
-===== その他Herokuに必要な準備 =====
+以上でユーザ側の通信手続きも揃いました．もう一度 localhost:3000 をブラウザで2ひらき，お互いのメッセージが届いていることを確認してみましょう．
+{{ :p5js:pasted:20210602-100346.png }}
+さて，ここまでで同じパソコンの中で通信を実現することができるようになりました．次はこれを外部サーバにアップロード&インストール（デプロイ）して，遠隔地間でチャットができるかどうかを確認してみます．
+===== Herokuへのデプロイに必要な準備 =====
 ==== Procfileの作成 ====
 server.jsと同じ場所にProcfileを作成して置く必要があります．中身には