差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
processing:p5js:10.node.jsでsimplechat [2020/08/25 09:43] – ↷ processing:p5js:xx.node.jsでsimplechat から processing:p5js:10.node.jsでsimplechat へページを名称変更しました。 baba | p5js:10.node.jsでsimplechat [2021/06/02 10:14] – [sketch.jsの修正] baba | ||
---|---|---|---|
行 2: | 行 2: | ||
このページでは node.js と p5jsでシンプルなチャットシステムを制作します.最初はローカル環境で動作させた後,外部無料サーバ(heroku)にデプロイするまでを一緒にやってみましょう.このページの手順を追った動画も合わせて紹介しておきます. | このページでは node.js と p5jsでシンプルなチャットシステムを制作します.最初はローカル環境で動作させた後,外部無料サーバ(heroku)にデプロイするまでを一緒にやってみましょう.このページの手順を追った動画も合わせて紹介しておきます. | ||
+ | 最初にnode.js をインストールしてください。 | ||
+ | * https:// | ||
< | < | ||
<div style=" | <div style=" | ||
行 12: | 行 14: | ||
* 送信ボタン | * 送信ボタン | ||
* テキスト表示画面 | * テキスト表示画面 | ||
- | のUIを最初に作成します.こちらで作成した雛形を如何に置きます. | + | のUIを最初に作成します.こちらで作成した雛形を以下に置きます. |
* {{ : | * {{ : | ||
行 18: | 行 20: | ||
では次に同じディレクトリ内にserver.jsというファイルを作成して,下記のプログラムをコピーします. | では次に同じディレクトリ内にserver.jsというファイルを作成して,下記のプログラムをコピーします. | ||
<file .js server.js> | <file .js server.js> | ||
+ | // すでに環境設定でポートが設定されていれば,それに従い,そうでなければ3000番をポート番号として利用する | ||
var PORT = process.env.PORT || 3000; | var PORT = process.env.PORT || 3000; | ||
+ | |||
+ | // expressはウェブサービスを提供するモジュール | ||
let express = require(' | let express = require(' | ||
+ | |||
+ | // expressモジュールの初期化.appにexpressモジュールを代入している | ||
let app = express(); | let app = express(); | ||
+ | |||
+ | // 指定したポート番号でサービス窓口を開始 | ||
let server = app.listen(PORT) | let server = app.listen(PORT) | ||
- | + | ||
+ | // 窓口にお客が来たときにpublic以下のディレクトリファイルを提供する | ||
app.use(express.static(' | app.use(express.static(' | ||
- | + | ||
+ | // ポート番号(サービス窓口番号)確認用出力 | ||
console.log(" | console.log(" | ||
- | + | ||
+ | /// socket.ioモジュールの読み込み | ||
let socket = require(' | let socket = require(' | ||
+ | |||
+ | // 先程作成したサービス窓口を 変数 io に代入 | ||
let io = socket(server); | let io = socket(server); | ||
- | + | ||
+ | // 教えてもらったサービス窓口で socket.io というプロトコルで通信をする | ||
+ | // ユーザの接続があるとconnectionメッセージが最初に送信されるので,そのメーッセージが来たときに呼び出す関数を指定する | ||
io.sockets.on(' | io.sockets.on(' | ||
- | + | ||
- | function newConnection(socket){ | + | // newConnection関数の定義.socketには接続したユーザの情報が含まれている |
- | console.log(' | + | function newConnection(socket) { |
- | socket.on(' | + | console.log(' |
- | + | ||
- | function | + | // さらに接続したユーザがなにかメッセージを送ってきたらその対応を定義できる |
- | socket.broadcast.emit(' | + | |
- | console.log(data) | + | function |
- | } | + | // 接続しているユーザ全員にメッセージを転送する |
+ | | ||
+ | console.log(data) | ||
+ | } | ||
} | } | ||
</ | </ | ||
行 53: | 行 72: | ||
{{: | {{: | ||
- | こんな感じの表示が出ると思います. | + | これでサーバにアクセスして指定したウェブサイトを表示できるようになりましたが,まだsketch.js内には通信に関してなにも定義されていないため,チャットデータのやり取りがユーザ同士では実現できていません.試しに localhost: |
===== index.htmlの修正 ===== | ===== index.htmlの修正 ===== | ||
行 63: | 行 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; | ||
行 82: | 行 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; | ||
- | |||
- | | ||
} | } | ||
</ | </ | ||
+ | 以上でユーザ側の通信手続きも揃いました.もう一度 localhost: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | さて,ここまでで同じパソコンの中で通信を実現することができるようになりました.次はこれを外部サーバにアップロード& | ||
===== その他Herokuに必要な準備 ===== | ===== その他Herokuに必要な準備 ===== | ||
==== Procfileの作成 ==== | ==== Procfileの作成 ==== |