https://github.com/leviosa42/p5js-sample-mqtt
MQTT.js + shiftr.io Desktop + p5.js を使ったサンプルコード
https://github.com/leviosa42/p5js-sample-mqtt
mqtt mqttjs p5js shiftrio
Last synced: about 2 months ago
JSON representation
MQTT.js + shiftr.io Desktop + p5.js を使ったサンプルコード
- Host: GitHub
- URL: https://github.com/leviosa42/p5js-sample-mqtt
- Owner: leviosa42
- License: mit
- Created: 2024-11-21T12:09:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-20T23:43:28.000Z (over 1 year ago)
- Last Synced: 2025-01-21T00:27:51.124Z (over 1 year ago)
- Topics: mqtt, mqttjs, p5js, shiftrio
- Language: JavaScript
- Homepage:
- Size: 150 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# p5js-sample-mqtt
MQTT を使って p5.js 上で通信を行うサンプルです。
## 技術スタック
- MQTT
- Desktop shiftr.io ... MQTT ブローカー
- mqtt.js ... MQTT クライアント
- p5.js ... クリエイティブコーディング用ライブラリ
- LiveServer(VSCode 拡張機能) ... ローカルサーバー
## ディレクトリ構成
```
p5js-sample-mqtt
├── README.md
├── receiver
│ ├── index.html
│ └── sketch.js
└── sender
├── index.html
└── sketch.js
```
## セットアップ
1. リポジトリをクローンしVSCodeで開きます。
```bash
git clone
code p5js-sample-mqtt
```
1. 右下の `Go Live` ボタンをクリックしてローカルサーバーを立ち上げます。このとき、ボタンの表示が `Port : ****` に変わるため、ポート番号をメモしておいてください。
> [!NOTE]
> もし LiveServer がインストールされていない場合は、VSCode の拡張機能からインストールしてください。
> [!NOTE]
> デフォルトのポート番号は `5500` です。
3. ブラウザで `http://localhost:ポート番号/sender` と `http://localhost:ポート番号/receiver` を開きます。
> [!NOTE]
> iPad等プライベートLAN内のデバイスで動作させる場合は、`http://PCのIPアドレス:ポート番号/sender` と `http://PCのIPアドレス:ポート番号/receiver` を開いてください。
## 使い方
`sender` 側での情報が `receiver` 側で表示されます。
送信している内容は以下の通りです。
- マウス座標
- `sender` 側の時刻[msec]
- マウスボタンを押しているかどうか
## 参考
- https://qiita.com/emqx_japan/items/b0c010f7b2591575a263
- https://qiita.com/youtoy/items/7c58de69b4b20543a5b5
## ライセンス
MIT