1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MonacaでP2Pチャットを3分で作成する

Last updated at Posted at 2021-02-02

#MonacaでP2Pチャットを3分で作成する

Monacaを使って、P2Pチャットを作ろうとして結構はまったりしたので備忘録代わりのメモ。

Monaca、P2Pなどで検索するとBluetoothプラグインとGoldプラン(有料)が必要やら、Node.jsやskywayのアカウントとhttpsサーバーが必要といった情報しか引っかからず、お試し程度で良いので、Monacaのみで実現できないか試した結果です。

ここではAchexという登録不要でWebSocketサーバーを提供してくれるサービスを利用してP2Pチャット(もどき)を実現します。
出典(参考):https://qiita.com/khsk/items/113a2781881ac2e480c0

以下の3段階で実現する、簡単3分間クッキングです。

##1.受信側プログラムを作る
原理的には対等なのですが、ここでは便宜上、メッセージを受信して表示する側を受信側またはサーバ側、メッセージを送信する側を送信側またはクライアント側とよぶことにする。

receiver.html
<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が入室しました」と表示されれば成功

sender.html
<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を編集して終了です。

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というWebSocketサーバを利用しています
        参考: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>

以上、お手軽3分間クッキングでした。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?