差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
p5js:10.node.jsでsimplechat [2021/06/02 09:59] – [server.js] baba | p5js: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: " |
- | message:" | + | message: " |
} | } | ||
function setup() { | function setup() { | ||
createCanvas(400, | createCanvas(400, | ||
select("# | select("# | ||
- | socket = io.connect(' | + | socket = io.connect(window.location.origin); |
- | socket.on(' | + | socket.on(' |
} | } | ||
- | 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(" | + | text(" |
- | text(" | + | text(" |
} | } | ||
- | function sendMessage() | + | function sendMessage() { |
- | { | + | |
var text_name = document.getElementById(" | var text_name = document.getElementById(" | ||
var text_message = document.getElementById(" | var text_message = document.getElementById(" | ||
var chatdata = { | var chatdata = { | ||
- | name: | + | name: text_name, |
- | message: | + | message: text_message |
} | } | ||
- | socket.emit(' | + | socket.emit(' |
console.log(chatdata); | console.log(chatdata); | ||
chatlog.name = chatdata.name; | chatlog.name = chatdata.name; | ||
chatlog.message = chatdata.message; | chatlog.message = chatdata.message; | ||
- | |||
- | | ||
} | } | ||
</ | </ | ||
- | ===== その他Herokuに必要な準備 ===== | + | 以上でユーザ側の通信手続きも揃いました.もう一度 localhost: |
+ | |||
+ | {{ : | ||
+ | |||
+ | さて,ここまでで同じパソコンの中で通信を実現することができるようになりました.次はこれを外部サーバにアップロード& | ||
+ | ===== Herokuへのデプロイに必要な準備 ===== | ||
==== Procfileの作成 ==== | ==== Procfileの作成 ==== | ||
server.jsと同じ場所にProcfileを作成して置く必要があります.中身には | server.jsと同じ場所にProcfileを作成して置く必要があります.中身には |