-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathns.html
114 lines (97 loc) · 3.08 KB
/
ns.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html>
<head>
<link href="all.css" media="screen" rel="stylesheet" type="text/css" />
<style>
#wrap{position:relative; padding:20px;}
#userW{border-radius: 5px; background-color:#ccc; padding:8px; margin:10px;}
#chat{ padding:8px;}
#sidebar{background-color:#333; color:#fff;}
#chat{background-color:#fff; color:#000; height:0px;}
#msgs{background-color:#ccc;}
.scroll{scroll:auto;}
.none{display:none;}
.cols{height:500px;}
.post{background-color: #ddd; padding:3px 5px; border-bottom:1px solid #999; margin:0 05px 10px 5px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="socket.io.js" type="text/javascript"></script>
<script type="text/javascript">
var NS = {};
NS.User ={name : ""};
NS.Chat = { "update" : function(post, username){ jQuery("#msgs").append("<p class='post'><em>" + username +":</em> " + post + "</p>");}
};
var socket = new io.Socket(null, {rememberTransport: false, port: 8080});
socket.connect();
socket.addEvent('message', function(data) {
//console.log("msg from server" + data);
console.log(data);
if(data["msgtype"] == "login" && data["status"] !== "red")
{
if(data["status"]=="green")
{
//$("#users").append("<li>"+data["username"]+"</li>");
$("#chat").animate({"height":"516"},500).find(".cols").removeClass("none");
$("#userW").find(".loginW").hide();
$("#sendbar").find(".cuser").html("@"+data["username"]).removeClass("none").end().removeClass("none");
NS.User = data["username"];
}
else if(data["status"]=="blue")
{
$("#users").append("<li>"+data["username"]+"</li>");
NS.Chat.update(data["username"] + " joined us", "chatbot");
}
}
else if(data["msgtype"] === "chat")
{
NS.Chat.update(data["post"], data["username"]);
}
});
jQuery(function($){
$("#btnchat").click(function(){
var user = ($("#name").val().trim().length > 0) && $("#name").val().trim();
if(!user)
return false;
socket.send({"msgtype" : "login", "username": user});
//$("#chat").animate({"height":"516"},500).find(".cols").removeClass("none");
//$("#userW").find(".loginW").hide();
//$("#sendbar").find(".cuser").html("@"+user).end().removeClass("none");
});
$("#btnsend").click(function(){
var msg = ($("#msgnow").val().trim().length > 0) && $("#msgnow").val().trim();
//console.log("msg is = " + msg);
if(!msg)
return false;
socket.send({"msgtype":"chat", "username":NS.User, "post": msg});
//NS.Chat.update(msg);
});
});
</script>
</head>
<body>
<div id="wrap">
<div id= "userW">
<p class="loginW">
<label id="luser" for="name">your name</label>
<input type="text" id="name" />
<input type="submit" id="btnchat" value="start"/>
</p>
<div id="sendbar" class="none">
<h2 class="cuser none"></h2>
<textarea id="msgnow" rows="3" cols="50"></textarea>
<br/>
<input id="btnsend" type="submit" value="send"/>
</div>
</div>
<div id="chat" class="line">
<div id="msgs" class="unit size3of4 scroll none cols">
<h2>chat session started now </h2>
</div>
<div id="sidebar" class="unit size1of4 scroll none cols">
<h2>connected</h2>
<ul id="users"></ul>
</div>
</div
</div>
</body>
</html>