差分
このページの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) | let server = app.listen(PORT) | ||
- | + | ||
// 窓口にお客が来たときにpublic以下のディレクトリファイルを提供する | // 窓口にお客が来たときにpublic以下のディレクトリファイルを提供する | ||
app.use(express.static(' | app.use(express.static(' | ||
- | + | ||
// ポート番号(サービス窓口番号)確認用出力 | // ポート番号(サービス窓口番号)確認用出力 | ||
console.log(" | console.log(" | ||
行 49: | 行 49: | ||
// newConnection関数の定義.socketには接続したユーザの情報が含まれている | // newConnection関数の定義.socketには接続したユーザの情報が含まれている | ||
- | function newConnection(socket){ | + | function newConnection(socket) { |
- | console.log(' | + | console.log(' |
- | + | ||
- | // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる | + | // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる |
- | socket.on(' | + | socket.on(' |
- | function gotMessage(data) { | + | function gotMessage(data) { |
- | // 接続詞ているユーザ全員にメッセージを転送する | + | // 接続しているユーザ全員にメッセージを転送する |
- | socket.broadcast.emit(' | + | socket.broadcast.emit(' |
- | console.log(data) | + | console.log(data) |
- | } | + | } |
} | } | ||
</ | </ | ||
行 72: | 行 72: | ||
{{: | {{: | ||
- | 今度は「Cannot GET /」というメッセージが表示されたかと思います.これはpublic/sketch.js | + | これでサーバにアクセスして指定したウェブサイトを表示できるようになりましたが,まだsketch.js内には通信に関してなにも定義されていないため,チャットデータのやり取りがユーザ同士では実現できていません.試しに localhost: |
===== index.htmlの修正 ===== | ===== index.htmlの修正 ===== | ||
行 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を作成して置く必要があります.中身には |