node-socket-chat/chatclient.html at master · mmohen/node-socket-chat · 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


<!doctype html>
<html>
  <head>
    <title>Node Chat</title>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>

	<script>
	    var socket;
		var firstconnect = true;

	    function connect() {
			if(firstconnect) {
	        	socket = io.connect(null);

				// Callbacks for standard socket.io server events
	        	socket.on('connect', function(){ $('#status').html('Connected to Server'); });
	        	socket.on('disconnect', function(){ $('#status').html('Disconnected from Server'); });
	        	socket.on('reconnecting', function( nextRetry ){ $('#status').html('Reconnecting in ' + nextRetry + ' milliseconds');  });
	        	socket.on('reconnect_failed', function(){ $('#status').html('Reconnect Failed'); });

	        	// Callback for the 'chat' event we have defined
	        	socket.on('chat', function (client, message) {
		 			$('#messages').append('<b> Client '+ client + ' says:</b> ' + message + '<br>');
				});

				firstconnect = false;
			}
			else {
				socket.socket.reconnect();
			}
		}

		function disconnect() {
		    socket.disconnect();
		}

		function send() {
		    socket.send($('#message').val());
		};

	</script>

	<h1>Node Chat</h1>
	<div><p id="status">Waiting ....</p></div>
	<button id="connect" onClick='connect()'/>Connect</button>
	<button id="disconnect" onClick='disconnect()'>Disconnect</button><br><br>
	<input id="message"></input>
	<button id="send" onClick='send()'/>Send Message</button>
	<br>
	<br>Messages:<br><br>
	<div id="messages"></div>
  </body>
</html>