tag:crieit.net,2005:https://crieit.net/tags/mqtt/feed
「mqtt」の記事 - Crieit
Crieitでタグ「mqtt」に投稿された最近の記事
2019-12-02T07:00:07+09:00
https://crieit.net/tags/mqtt/feed
tag:crieit.net,2005:PublicArticle/15573
2019-12-02T07:00:07+09:00
2019-12-02T07:00:07+09:00
https://crieit.net/posts/d2e5218181c66086dd0e423f1bc427a9
ボウリング幹事アプリを作りました。
<p>この記事は<a href="https://crieit.net/advent-calendars/2019/crieit">なんでも Advent Calendar 2019</a>の2日目の記事です。<br />
昨日はだら@Crieit開発者さんの「<a href="https://crieit.net/posts/688d4075e654935779abc887cfe485aa">お金も名声も得ることを考えなかったら何を作りたいんだろう？</a>」という記事でした。</p>
<h1 id="ボウリング幹事アプリを作りました"><a href="#%E3%83%9C%E3%82%A6%E3%83%AA%E3%83%B3%E3%82%B0%E5%B9%B9%E4%BA%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F">ボウリング幹事アプリを作りました</a></h1>
<p><a href="https://crieit.now.sh/upload_images/3cebc8b53a7a1a70fcf9eb56cb0dfce15dda909adf110.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3cebc8b53a7a1a70fcf9eb56cb0dfce15dda909adf110.jpg?mw=700" alt="" /></a><br />
練習用のレーンを用意しました。ご自由にお使いください。<br />
- <a target="_blank" rel="nofollow noopener" href="https://letsbowling.netlify.com/editor/sandbox">https://letsbowling.netlify.com/editor/sandbox</a></p>
<h2 id="どんなアプリ?"><a href="#%E3%81%A9%E3%82%93%E3%81%AA%E3%82%A2%E3%83%97%E3%83%AA%3F">どんなアプリ?</a></h2>
<p>ボウリング大会などの幹事さん向けに、複数レーンにまたがる大会の<strong>スコアのリアルタイム共有</strong>などができるアプリです。<br />
閲覧専用(参加者向け)と管理用(運営者向け)でURLを分けています。</p>
<h3 id="URLシェア(QRコード)"><a href="#URL%E3%82%B7%E3%82%A7%E3%82%A2%28QR%E3%82%B3%E3%83%BC%E3%83%89%29">URLシェア(QRコード)</a></h3>
<h3 id="選手情報入力"><a href="#%E9%81%B8%E6%89%8B%E6%83%85%E5%A0%B1%E5%85%A5%E5%8A%9B">選手情報入力</a></h3>
<p>チーム名・選手名を入力できます。</p>
<h3 id="各ゲームスコア入力"><a href="#%E5%90%84%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%B9%E3%82%B3%E3%82%A2%E5%85%A5%E5%8A%9B">各ゲームスコア入力</a></h3>
<p>内訳は入力できないのですが、スコアを入力すると後述のソート機能を使うことができます。</p>
<h3 id="ソート・HDCP算出機能"><a href="#%E3%82%BD%E3%83%BC%E3%83%88%E3%83%BBHDCP%E7%AE%97%E5%87%BA%E6%A9%9F%E8%83%BD">ソート・HDCP算出機能</a></h3>
<ul>
<li>合計モード<br />
合計を算出、ソートしたいゲームにチェックを入れます。</li>
<li>HDCPモード<br />
HDCP(<strong>ハンディキャップ</strong>)はチェックを入れたゲームを対象に計算され、HDCPの項で選択したゲームのスコアとハンディキャップの合計でソートします。</li>
</ul>
<p><a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55ddfcf8f27bf9.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55ddfcf8f27bf9.jpg?mw=700" alt="" /></a></p>
<h3 id="動作イメージ"><a href="#%E5%8B%95%E4%BD%9C%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8">動作イメージ</a></h3>
<div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/mAIHE4E44Vo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<h3 id="開発期間"><a href="#%E9%96%8B%E7%99%BA%E6%9C%9F%E9%96%93">開発期間</a></h3>
<p>3週間(平日夜とか土日)</p>
<h2 id="使っている技術"><a href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93">使っている技術</a></h2>
<h3 id="MQTT"><a href="#MQTT">MQTT</a></h3>
<p>先日、<a href="https://crieit.net/posts/MQTT">MQTTを使ってみよう</a>という記事を書きましたが、このWEBアプリの目玉の技術です。<br />
このアプリは<strong>DBサーバなしで動いています</strong>が、MQTTでメッセージを送受信して複数人で同じデータ(ローカルストレージ)を共有することによって画面共有を実現しています。</p>
<p>DBサーバ立てるの面倒だな、ローカルストレージを共有する方法ないかな、と思ってたどり着いたのがこれ。後はWebRTCやWebSocketは候補にありました。</p>
<p>複数台(PC/モバイル)で同じ画面を見ながら操作していただくとわかると思いますが、表示を同期することができます。<br />
これをサーバ(DB/AP)への問い合わせなしで実現しました。<br />
<a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55de2900126be6.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55de2900126be6.jpg?mw=700" alt="" /></a></p>
<h3 id="ReactJS"><a href="#ReactJS">ReactJS</a></h3>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/atlassian/react-beautiful-dnd">react-beautiful-dnd</a><br />
ドラッグアンドドロップ</li>
<li><a target="_blank" rel="nofollow noopener" href="http://igorprado.com/react-notification-system/">react-notification-system</a><br />
メッセージ通知</li>
</ul>
<h3 id="local storage"><a href="#local+storage">local storage</a></h3>
<p>データの保存に各端末のローカルストレージを使っています。</p>
<h1 id="おわりに、今年リリースしたもの"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB%E3%80%81%E4%BB%8A%E5%B9%B4%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE">おわりに、今年リリースしたもの</a></h1>
<ul>
<li>08/18リリース：<a href="https://crieit.net/posts/cb42a72a9e70af9ea472af216219e0e8">タイピングスコア管理システム</a></li>
<li>08/21リリース：<a href="https://crieit.net/boards/baseball-score-management/f51b909e24c84342ac946117b65d092e">キャップ野球・全国大会非公式特設サイト</a></li>
<li>10/06リリース：<a href="https://crieit.net/boards/baseball-score-management/JCBL-SCORE-ver3">野球リーグスコア管理システム ver3α</a></li>
<li>10/21リリース：<a href="https://crieit.net/posts/4b0c9a1ddc05a0cc0ff61db75530b9b0">ドラフト風画像作成サービス「ドラフトなう!」</a></li>
<li>10/27リリース：<a href="https://crieit.net/posts/AnnictAccess3">アニメランキング作成サービス「Annict Access 3」</a></li>
<li>11/04リリース：<a href="https://crieit.net/boards/baseball-score-management/ReactNative">野球リーグandroidアプリ</a></li>
<li>11/17リリース：<a href="https://crieit.net/posts/509e31a0bbc4ffe7a1003278816c9e5d">音楽ランキングメーカー</a></li>
<li>12/01リリース：<a href="https://crieit.net/boards/baseball-score-management/d3a03b2eecede278f5eb211aaff9a6a2">優勝ラインシミュレーター</a></li>
<li>12/02リリース：<strong>ボウリング幹事アプリ「bowling party manager」</strong></li>
</ul>
ckoshien
tag:crieit.net,2005:PublicArticle/15557
2019-11-21T23:48:51+09:00
2019-11-21T23:48:51+09:00
https://crieit.net/posts/MQTT
MQTTを使ってみよう
<h1 id="MQTT(MQ Telemetry Transport)とは？"><a href="#MQTT%28MQ+Telemetry+Transport%29%E3%81%A8%E3%81%AF%EF%BC%9F">MQTT(MQ Telemetry Transport)とは？</a></h1>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/MQ_Telemetry_Transport">wikipedia</a></li>
</ul>
<p>通信プロトコルの一種でPub/Sub型のデータ配信モデル。<br />
軽量プロトコルのため、主にIoTの分野で使われていることが多いです。</p>
<h2 id="Pub/Sub型"><a href="#Pub%2FSub%E5%9E%8B">Pub/Sub型</a></h2>
<p>Pub/Sub型に関わるのは次の3者。</p>
<ul>
<li>Publisher メッセージを出す人</li>
<li>Subscriber メッセージを読む人</li>
<li>Broker 配送業者(中継サーバ)</li>
</ul>
<p>履歴の残らないLINE、という感じでしょうか。</p>
<h1 id="中継サーバを立ててみよう"><a href="#%E4%B8%AD%E7%B6%99%E3%82%B5%E3%83%BC%E3%83%90%E3%82%92%E7%AB%8B%E3%81%A6%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">中継サーバを立ててみよう</a></h1>
<p><a target="_blank" rel="nofollow noopener" href="https://hub.docker.com/_/eclipse-mosquitto">eclipse-mosquitto</a>というMQTTサーバのdockerイメージが配布されています。</p>
<p>今回はホストの1883番ポートにmosquittoサーバを公開します。<br />
さらにリバースプロキシの後ろに配置するため、nginxと同じnetwork(ここでは<strong>default</strong>)に接続します。</p>
<p><strong>docker-compose.yml(抜粋)</strong></p>
<pre><code class="yml"> mosquitto:
image: eclipse-mosquitto
hostname: mosquitto
container_name: mosquitto
ports:
- "1883:1883"
volumes:
- ./mosquitto.conf:/mosquitto/config/mosquitto.conf
networks:
- default
</code></pre>
<p><strong>moquitto.conf(一部)</strong></p>
<pre><code class="conf"># ========================================================
# Default listener
# ========================================================
# Port to use for the default listener.
port 1883
# Choose the protocol to use when listening.
protocol websockets
# listener port-number [ip address/host name]
listener 9001
</code></pre>
<p><strong>nginx.conf(listen 443)</strong></p>
<pre><code> location /mqtt {
proxy_pass http://mosquitto:1883/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
</code></pre>
<h1 id="クライアント(react)側実装"><a href="#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%28react%29%E5%81%B4%E5%AE%9F%E8%A3%85">クライアント(react)側実装</a></h1>
<pre><code class="javascript">import PahoMQTT from "paho-mqtt";
const uuidv4 = require('uuid/v4');
//wssを利用する
const client = new PahoMQTT.Client(
'******',443,uuidv4()
);
export const connect=()=>{
client.connect({
userName: "******",
password: "********",
useSSL: true,
onSuccess,
onFailure
});
client.onMessageArrived = onMessageArrived;
client.onConnectionLost = onConnectionLost;
}
const onSuccess=()=>{
client.subscribe(TOPIC);
}
const onFailure=()=>{
console.log('connect failed.')
}
export const onMessageArrived=(message)=>{
console.log(message.payloadString);
}
export const send=(message)=>{
client.send(TOPIC, message, 0, false);
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
connect();
}
}
</code></pre>
<h1 id="アドベントカレンダー"><a href="#%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC">アドベントカレンダー</a></h1>
<ul>
<li><a href="https://crieit.net/advent-calendars/2019/crieit">crieitアドベントカレンダー「なんでも」</a></li>
</ul>
<p>2日目に登板予定です。<br />
MQTTを基礎技術に使ったアプリを作る予定です。</p>
ckoshien