moo-comet/index.html at master · underscore05/moo-comet · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Simple Chat using Comet.js</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/spinner.css" />
</head>
<body>
	<div class="container" style="max-width:600px">
		<h1>Sample Chat Application</h1>
		<hr />
		<div class="panel panel-primary" >
			<div class="panel-heading">Messages</div>
			<div id="messageContainer" class="panel-body" style="max-height:300px;min-height:100px; overflow-y:scroll;">
				<div id="messages" class="list-group" ></div>
				<a href="reset.php" class="btn btn-warning">Clear Messages</a>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<form action="save.php" id="frm" role="form">
					<input type="hidden" name="act" value="save" />
					<div class="form-group">
						<label for="name">Name</label>
						<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name"/>
					</div>
					<div class="form-group">
						<label for="msg">Message</label>
						<textarea name="msg" id="msg" class="form-control" rows="3" placeholder="Enter your message"></textarea>
					</div>
					<div class="form-group">
						<button type="submit" id="save" class="btn btn-default">Send Message</button>
					</div>
				</form>
			</div>
		</div>
		<hr />
		<p class="content">
			This sample chat application is using MooTools, Mootools More and my very own Comet that extends Request.JSON class.
			This application's source code can be downloaded in my repository at
			<a href="https://github.com/underscore05/moo-comet" target="_blank">Github.com</a>.
		</p>
	</div>
	<script type="text/javascript" src="js/mootools-core-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/mootools-more-1.4.0.1.min.js"></script>
	<script type="text/javascript" src="js/comet.js"></script>
	<script type="text/javascript" charset="utf-8">
		window.addEvent('domready', function() {
			var frm = $('frm');
			new Form.Request(frm, null, {
				resetForm: false,
				requestOptions: {
					useSpinner: true,
					onComplete: function() {
						var msg = frm.getElement('#msg');
						msg.value="";
						msg.focus();
					}
				}
			});
			var messages = $('messages');
			var msgScroll = new Fx.Scroll($('messageContainer'));
			new Comet({
				url: 'data.php',
				onMaxRequestExceeded: function() {
					console.log('Resending another batch of request...');
					this.send();
				},
				onNewData: function(json){
					messages.empty();
					if(json.data.messages){
						json.data.messages.each(function(msg){
							var div = new Element('div.list-group-item');
							var spanName = new Element('div', {text:msg.name +':', style:'float:left'});
							var spanMessage = new Element('p', {text:msg.message});
							var spanDate = new Element('div', {text:msg.cdate, style:'float:right'});
							div.adopt(spanName);
							div.adopt(spanDate);
							div.adopt(new Element('hr'));
							div.adopt(spanMessage);
							messages.adopt(div);
						});
					}
					msgScroll.toBottom();
				}
			}).send();
		});
	</script>
</body>
</html>