ラズパイ（IOT・６０）

Webの表示側に距離センサーから送られたデータが表示される
部分を追加します。
ここには、Socket.IOでリアルタイムに送られてきた
データが自動的に表示されるようにします。

  <ul id="messages"></ul>
  <form id="message_form" action="#">
    <input id="input_msg" autocomplete="off" /><button>Send</button>
    <input type="button" value="距離計測" onclick="sendGetDistance();" />
  </form>
  <script>
    var socketio = io();
    $(function(){
      $('#message_form').submit(function() {
        socketio.emit('message', $('#input_msg').val());
        $('#input_msg').val('');
        return false;
      });
      
      // メッセージを取得した場合
      socketio.on('message', function(msg) {
        $('#messages').append($('<li>').text(msg));
      });
      
      // 距離を取得した場合
      socketio.on('rec_distance', function(dat) {
        $('#messages').append($('<li>').text(
          dat.distance1 + 'mm ' + dat.distance2 + 'mm ' + dat.distance3 + 'mm ' + dat.distance4 + 'mm'
        ));
      });
    });
    
    function sendGetDistance() {
      socketio.emit('get_distance', '');
    }
  </script>