Skip to content

Latest commit

 

History

History
68 lines (45 loc) · 1.85 KB

README.md

File metadata and controls

68 lines (45 loc) · 1.85 KB

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で開きます。
git clone
code p5js-sample-mqtt
  1. 右下の Go Live ボタンをクリックしてローカルサーバーを立ち上げます。このとき、ボタンの表示が Port : **** に変わるため、ポート番号をメモしておいてください。

Note

もし LiveServer がインストールされていない場合は、VSCode の拡張機能からインストールしてください。

Note

デフォルトのポート番号は 5500 です。

  1. ブラウザで http://localhost:ポート番号/sender と http://localhost:ポート番号/receiver を開きます。

Note

iPad等プライベートLAN内のデバイスで動作させる場合は、http://PCのIPアドレス:ポート番号/sender と http://PCのIPアドレス:ポート番号/receiver を開いてください。

使い方

sender 側での情報が receiver 側で表示されます。

送信している内容は以下の通りです。

  • マウス座標
  • sender 側の時刻[msec]
  • マウスボタンを押しているかどうか

参考

ライセンス

MIT