MonacaでP2Pチャットを３分で作成する
Monacaを使って、P2Pチャットを作ろうとして結構はまったりしたので備忘録代わりのメモ。
Monaca、P2Pなどで検索するとBluetoothプラグインとGoldプラン（有料）が必要やら、Node.jsやskywayのアカウントとhttpsサーバーが必要といった情報しか引っかからず、お試し程度で良いので、Monacaのみで実現できないか試した結果です。
ここではAchexという登録不要でWebSocketサーバーを提供してくれるサービスを利用してP2Pチャット（もどき）を実現します。
出典（参考）：https://qiita.com/khsk/items/113a2781881ac2e480c0
以下の３段階で実現する、簡単３分間クッキングです。
1.受信側プログラムを作る
原理的には対等なのですが、ここでは便宜上、メッセージを受信して表示する側を受信側またはサーバ側、メッセージを送信する側を送信側またはクライアント側とよぶことにする。
<html>
<body>
<h3>receiver(受信側)</h3>
<div id="log">
</div>
</body>
<script>
//WebSocketサーバに接続（Achex)
//hogefugaの部分は変更してください
const socket = new WebSocket('wss://cloud.achex.ca/hogefuga');
var logDiv = document.getElementById('log');
//通信開始
socket.addEventListener('open', function (event) {
console.log(event);
console.log(event.type);
//受信側は認証をしたら、メッセージが来るのを待つ
socket.send('{"auth":"receiver", "password":"pass"}');
logDiv.innerHTML += "log: Connected.<br>";
});
//メッセージ受信
socket.addEventListener('message', function (event) {
//受信メッセージ表示（確認用）
console.log(event);
console.log('message:' + JSON.stringify(event.data));
const json = JSON.parse(event.data)
// auth時のレスポンスもmessageで来るので弾いておきます
if (json.auth == 'OK') {
console.log('<<auth return>>');
return
}
console.log(json.msg);
console.log(json.to);
console.log(json.FROM);
logDiv.innerHTML += json.FROM + ":" + json.msg +'<br>';
})
</script>
</html>
動作確認
ブラウザで「F12」を押してデバッグツールを開くと、以下のようなメッセージが出力されているのがわかる。これは認証が通って「receiver」が受信待機中になったことを示している
実行結果例
Event {isTrusted: true, type: "open", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
receiver.html: open
receiver.html: MessageEvent {isTrusted: true, data: "{"auth":"OK","SID":77428}", origin: "wss://cloud.achex.ca", , …}
receiver.html: message:"{\"auth\":\"OK\",\"SID\":77428}"
2.送信側プログラムを作る
送信側プログラムをsender.htmlという名前で作成する。Chromeで開いたときに、サーバ側に「user1が入室しました」と表示されれば成功
<html>
<script>
//WebSocketサーバに接続（Achex)
const socket = new WebSocket('wss://cloud.achex.ca/hogefuga');
//通信開始
socket.addEventListener('open', function (event) {
console.log(event);
console.log(event.type);
// 事前登録などはなく使用時に好きなものを入れられます。
socket.send('{"auth":"user1", "password":"pass"}');
socket.send('{"to":"receiver", "msg":"user1が入室しました"}');
});
//データ送信
function dataSend(){
var msg1 = document.getElementById("msg").value;
var dt = {"to":"receiver", "msg": msg1};
var strDt = JSON.stringify(dt);
//alert(strDt);
socket.send(strDt);
}
</script>
<body>
user1:
<input type="text" id="msg" />
<button id="btn1" onclick="dataSend()">送信</button>
</body>
</html>
これで送信の準備が整ったので、任意の文字列を送信して受信側に表示されることを確認しよう
3.トップ画面を整える
最後にindex.htmlを編集して終了です。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<!--
本サンプルではachexというＷebＳocketサーバを利用しています
参考：https://qiita.com/khsk/items/113a2781881ac2e480c0
https://note.com/hosone_3/n/n8d3c58a48253
https://chirimen.org/remote-connection/
-->
<script>
</script>
</head>
<body>
<h1>P2Pテキストチャットのテスト</h1>
<a href="sender.html">クライアント（送信者)</a>
<br><br>
<a href="receiver.html">サーバー（受信者）</a>
</body>
</html>
以上、お手軽３分間クッキングでした。