差分

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

--- p5js:10.node.jsでsimplechat [2021/06/02 09:50] – [server.js] baba
+++ p5js:10.node.jsでsimplechat [2021/06/02 10:15] (現在) – [その他Herokuに必要な準備] baba
@@ 行 31: / 行 31: @@
 // 指定したポート番号でサービス窓口を開始
 let server = app.listen(PORT)
 // 窓口にお客が来たときにpublic以下のディレクトリファイルを提供する
 app.use(express.static('public'));
 // ポート番号（サービス窓口番号）確認用出力
 console.log("Socket server is running. localhost:" + PORT)
@@ 行 49: / 行 49: @@
 // newConnection関数の定義．socketには接続したユーザの情報が含まれている
-function newConnection(socket){
+function newConnection(socket) {
-	console.log('connection:',socket.id);
+    console.log('connection:', socket.id);
-        // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる
+    // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる
-	socket.on('gotMessage', gotMessage);
+    socket.on('sendMessage', gotMessage);
-	function gotMessage(data) {
+    function gotMessage(data) {
-                // 接続詞ているユーザ全員にメッセージを転送する
+        // 接続しているユーザ全員にメッセージを転送する
-		socket.broadcast.emit('gotMessage', data)
+        socket.broadcast.emit('gotMessage', data)
-		console.log(data)
+        console.log(data)
-	}
+    }
 }
 </file>
@@ 行 70: / 行 70: @@
 でプログラムが動作するかを確認します．ちゃんと動作している場合は，Socket server is running. localhost:3000 とターミナルに表示されていると思います．では次にブラウザを開き，アドレス欄に　http://localhost:3000/　を入力してアクセスしてみましょう．
-しかしながらまだ何も表示
 {{:processing:p5js:スクリーンショット_2020-06-17_0.38.47.png?400|}}
-今度は「Cannot GET /」というメッセージが表示されたかと思います．これはpublic/sketch.js ファイル内でサーバへのアクセス方法を定義していないためです．
+これでサーバにアクセスして指定したウェブサイトを表示できるようになりましたが，まだsketch.js内には通信に関してなにも定義されていないため，チャットデータのやり取りがユーザ同士では実現できていません．試しに localhost:3000 を２つのウィンドウで開いてお互いにチャットメッセージを送り合ってみてください．自分のメッセージしか画面上では更新されないのがわかると思います．では以下ではsketch.jsに通信のための機能を実装していきます．
 ===== index.htmlの修正 =====
@@ 行 83: / 行 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;
@@ 行 102: / 行 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を作成して置く必要があります．中身には