p5js:10.node.jsでsimplechat

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
p5js:10.node.jsでsimplechat [2021/06/02 09:59] – [server.js] babap5js:10.node.jsでsimplechat [2021/06/02 10:15] (現在) – [その他Herokuに必要な準備] baba
行 82: 行 82:
 <file .js sketch.js> <file .js sketch.js>
 var socket; var socket;
-var chatlog ={ +var chatlog = { 
-  name:"Name", +  name: "Name", 
-  message:"Sample message"+  message: "Sample message"
 } }
 function setup() { function setup() {
   createCanvas(400, 400);   createCanvas(400, 400);
   select("#send").mouseClicked(sendMessage);   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);   console.log(chatdata);
   chatlog.name = chatdata.name;   chatlog.name = chatdata.name;
行 101: 行 101:
 function draw() { function draw() {
   background(220);   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_name = document.getElementById("name").value;
   var text_message = document.getElementById("message").value;   var text_message = document.getElementById("message").value;
   var chatdata = {   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);   console.log(chatdata);
   chatlog.name = chatdata.name;   chatlog.name = chatdata.name;
   chatlog.message = chatdata.message;   chatlog.message = chatdata.message;
- 
-     
 } }
 </file> </file>
  
-===== その他Herokuに必要な準備 =====+以上でユーザ側の通信手続きも揃いました．もう一度 localhost:3000 をブラウザで2ひらき，お互いのメッセージが届いていることを確認してみましょう． 
 + 
 +{{ :p5js:pasted:20210602-100346.png }} 
 + 
 +さて，ここまでで同じパソコンの中で通信を実現することができるようになりました．次はこれを外部サーバにアップロード&インストール（デプロイ）して，遠隔地間でチャットができるかどうかを確認してみます． 
 +===== Herokuへのデプロイに必要な準備 =====
 ==== Procfileの作成 ==== ==== Procfileの作成 ====
 server.jsと同じ場所にProcfileを作成して置く必要があります．中身には server.jsと同じ場所にProcfileを作成して置く必要があります．中身には
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/p5js/10.node.jsでsimplechat.1622595574.txt.gz
  • 最終更新: 2021/06/02 09:59
  • by baba