HiThere/index.html at master · JakeKwon/HiThere · 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
93
94
<!DOCTYPE html>
<html>
	<head>
		<title>Chat</title>
		<link rel="stylesheet" href="public/stylesheets/main.css">
	</head>
	<body>
		<div class="chat">
			<input type="text" class="chat-name" placeholder="Enter your name">
			<div class="chat-messages"></div>
			<textarea placeholder="Type your message"></textarea>
			<div class="chat-status">Status: <span>asleep</span></div>
		</div>

		<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
		<script>
			(function() {
				var getNode = function(s) {
					return document.querySelector(s);
				},

				//Get required nodes
				status = getNode(".chat-status span"),
				messages = getNode(".chat-messages"),
				textarea = getNode(".chat textarea"),
				chatName = getNode(".chat-name"),

				statusDefault = status.textContent,

				setStatus =function(s){
					status.textContent =s;
					if(s !== statusDefault){
						var delay = setTimeout(function(){
							setStatus(statusDefault);
							clearInterval(delay);
						},3000);
					}
				};

				try{
					var socket = io.connect("http://127.0.0.1:8080");
				} catch(e) {
					//set status to warn user
				}

				if(socket!==undefined){
					//listen for output
					socket.on("output", function(data){
						if(data.length){
							//loop through results
							for(var x = 0; x<data.length; x = x+1){
								var message = document.createElement('div');
								message.setAttribute("class", "chat-message");
								message.textContent = data[x].name+": "+data[x].message;
								//append
								messages.appendChild(message);
								//messages.insertBefore(message,messages.firstChild);
							}
						}

					});


					//listen for a status
					socket.on("status", function(data) {
						// if its object get the message of it, if its a string just print it out
						setStatus((typeof data == "object") ? data.message : data);
						if(data.clear ===true){
							textarea.value="";
						}
					});

					//listen for keydown
					textarea.addEventListener("keydown", function(event) {
						var self = this,
							name = chatName.value;

						// great way to check: console.log(even.which);
						if(event.which === 13 && event.shiftKey === false) {
							socket.emit("input", {
								name: name,
								message: self.value
							});

							event.preventDefault();
						}
					});
				}

 			})();
		</script>
	</body>
</html>