doug65536/javascript-socket-full.html

## javascript-socket-full.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Synchronized Slider</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
      <script type="text/javascript">
        var peers = [
          'http://localhost:5000',
          'http://foo:5000',
          'http://bar:5000'
        ];
        var sockets = [];

        $(document).ready(function() {
          sockets = peers.map(connect);

          // You could call this from a button handler or whatever
          function addConnectionDynamically(ip) {
            sockets.push(connect(ip));
          }

          function connect(ip) {
            var socket = io.connect(ip);

            socket.on('after connect', function(msg) {
              console.log('After connect', msg);
            });

            socket.on('update value', function(msg) {
              console.log('Slider value updated');
              $('#' + msg.who).val(msg.data);
            });

            return socket;
          }
        });
      </script>
   </head>
   <body>
      <div class="container text-center">
         <h1 >Slider Demo</h1>
         <form class="mt-5">
            <div class="form-group">
               <label for="formControlRange">Demo Slider 1</label>
               <input type="range" class="form-control-range sync" id="slider1" min="0" max="50" value="{{slider1}}">
            </div>
            <div class="form-group">
               <label for="formControlRange">Demo Slider 2</label>
               <input type="range" class="form-control-range sync" id="slider2" min="0" max="50" value="{{slider2}}">
            </div>
         </form>
      </div>
   </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Synchronized Slider</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
	<script type="text/javascript">
	var peers = [
	'http://localhost:5000',
	'http://foo:5000',
	'http://bar:5000'
	];
	var sockets = [];

	$(document).ready(function() {
	sockets = peers.map(connect);

	// You could call this from a button handler or whatever
	function addConnectionDynamically(ip) {
	sockets.push(connect(ip));
	}

	function connect(ip) {
	var socket = io.connect(ip);

	socket.on('after connect', function(msg) {
	console.log('After connect', msg);
	});

	socket.on('update value', function(msg) {
	console.log('Slider value updated');
	$('#' + msg.who).val(msg.data);
	});

	return socket;
	}
	});
	</script>
	</head>
	<body>
	<div class="container text-center">
	<h1 >Slider Demo</h1>
	<form class="mt-5">
	<div class="form-group">
	<label for="formControlRange">Demo Slider 1</label>
	<input type="range" class="form-control-range sync" id="slider1" min="0" max="50" value="{{slider1}}">
	</div>
	<div class="form-group">
	<label for="formControlRange">Demo Slider 2</label>
	<input type="range" class="form-control-range sync" id="slider2" min="0" max="50" value="{{slider2}}">
	</div>
	</form>
	</div>
	</body>
	</html>