chapter9-reverseecho/index.html at master · OpenShift-Cookbook/chapter9-reverseecho · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
	<title>ReverseEcho</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
    body {
      padding-top:60px;
      padding-bottom: 60px;
    }
  </style>
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ReverseEcho</a>
        </div>

    </div>
  </div>

<div class="container">
	<div class="row">
		<div class="col-md-6">
			<input type="text" class="form-control" rows="3" id="message" placeholder="Write a message">
      <input type="button" id="echobutton" value="Reverse Echo" />
		</div>
		<div class="col-md-6">
			<p id="result"></p>
		</div>
	</div>

</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
        var wsUrl;
        console
        if(window.location.host == '127.0.0.1:3000'){
          wsUrl = window.location.protocol + "//" + window.location.host;
        }else{
          if (window.location.protocol == 'http:') {
          wsUrl = 'ws://' + window.location.host + ':8000/';
        } else {
          wsUrl = 'wss://' + window.location.host + ':8443/';
          }
        }
        console.log('WebSockets Url : ' + wsUrl);
        var socket = io.connect(wsUrl);

        socket.on('connect', function(){
          console.log('User connected');
        });


        socket.on('rev-message', function (data) {
                $('#result').text(data);
        });

        $(function(){
                $('#echobutton').click( function() {
                        var message = $('#message').val();
                        $('#message').val('');
                        socket.emit('message', message);
                });
        });

</script>

</body>
</html>