2011|08|
2013|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|05|06|07|08|09|10|11|12|
2016|01|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|

2020-02-08 サイネージ表示中に連動しなくて困った [長年日記]

以前、ボタンを押すと全てのクライアントのコンテンツが同時に代わるように改造した

が、連動しないことが度々発生して、結構管理が面倒なことになってしまっていた。

コネクションが切れた後に、再接続できないか、色々調べた結果、以下のコード(index.html)となった。

前回との違いは、"onclose"を付け加えて、ソケットが切れた時に再接続するようにしてみた。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Server</title>
  </head>
  <body>
    <input id="Button1" type="button" value="スタンバイ中" onclick="onButtonClick1();" />
    <input id="Button2" type="button" value="待機中" onclick="onButtonClick2();" />
    <input id="Button3" type="button" value="移動中" onclick="onButtonClick3();" />
    <p id="input"></p>
    <p id="input1"></p>
    <p id="input2"></p>
    <p id="input3"></p>
    <pre id="output"></pre>    
 
    <iframe id="image_place" src="http://192.168.101.1:8686/red.html" width="100%" height="700"></iframe>
    
    <script>
      var input1 = document.getElementById('input1');
      var input2 = document.getElementById('input2');
      var input3 = document.getElementById('input3');      
      var img = document.getElementById("image_place");
      var output = document.getElementById('output');
 
      // socketの変数は、connect()の外に出しておかないとボタンに届かない
      var socket;
 
      function connect() {  // で、ここから connect()を括る
 
      socket = new WebSocket("ws://" + window.location.host + "/chat");
      
      socket.onopen = function() { 
      // output.innerHTML += "Connection OK\n";
      };
      
      socket.onmessage = function(e) {
      // output.innerHTML += "Get message from server:" + e.data + "\n";
 
      var obj = JSON.parse(e.data); // JSONオブジェクトに変換
 
      // output.innerHTML += "Get object :" + obj.Message + "\n";
 
      // switch(e.data){
      switch(obj.Message){      
      case '1':
      img.src = "http://192.168.101.1:8686/red.html";
      break;
 
      case '2':
      img.src = "http://192.168.101.1:8686/yellow.html";
      break;
 
      case '3':
      img.src = "http://192.168.101.1:8686/blue.html";      
      break;
      }
      
      }
      socket.onclose = function(e) {
      console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
      setTimeout(function() {
        connect();
      }, 1000);
      };
 
      }  // で、ここでconnect()を閉じる
 
      connect();  // で、ここでconnect()を起動する
      
      function onButtonClick1(){
        input1.value = "1";
        socket.send(JSON.stringify( 
        {
           message: input1.value
        }
        ));
        input1.value = "";
      };
 
      function onButtonClick2(){
        input2.value = "2";
        socket.send(JSON.stringify( 
        {
           message: input2.value
        }
        ));
       input2.value = "";
      };
 
      function onButtonClick3(){
        input3.value = "3";      
        socket.send(JSON.stringify( 
        {
           message: input3.value
        }
        ));
       input3.value = "";
      };
 
      
    </script>
  </body>
</html>
 
 
 

これが運用上「上手く動かなかった」ら、後日報告する。

一応、ラズパイをリブートして、自動的に立ち上がってくるのを、デバッグモードで確認した