|
rap/3.3.5/css/bootstrap.min.css">
8 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
9 <!-- <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
10 </head>
11 <body>
12 <div class="container">
13 <div>内容：</div>
14 <div class="list-group" id="divShow">
15 <!--<div class="list-group-item list-group-item-success">1111</div>
16 <div class="list-group-item list-group-item-info">1111</div>
17 <div class="list-group-item list-group-item-warning">1111</div>
18 <div class="list-group-item list-group-item-danger">1111</div>-->
19 </div>
20 <div class="list-group" id="divUsers">
21 在线：<br />
22 <!--<div class="btn btn-default">111</div>-->
23
24 </div>
25 <div>
26 昵称：<input class="form-control" id="txtUserName" value="红领巾" type="text" maxlength="20" style="width: 30%; margin-bottom: 15px" />
27 聊聊：<textarea class="form-control" id="txtContent" autofocus rows="6" placeholder="想聊的内容" maxlength="200" required style="width: 60%; "></textarea>
28 <button class="btn btn-default" id="btnSend" style="margin-top:15px">发 送</button>
29 </div>
30 </div>
31 </body>
32 </html>
33
34 <script>
35
36 var tool = function () {
37
38 var paperLoopNum = 0;
39 var paperTempleArr = [
40 '<div class="list-group-item list-group-item-success">{0}</div>',
41 '<div class="list-group-item list-group-item-info">{0}</div>',
42 '<div class="list-group-item list-group-item-warning">{0}</div>',
43 '<div class="list-group-item list-group-item-danger">{0}</div>'
44 ];
45
46 return {
47
48 paperDiv: function (val) {
49
50 var hl = paperTempleArr[paperLoopNum];
51 paperLoopNum++;
52 if (paperLoopNum >= paperTempleArr.length) { paperLoopNum = 0; }
53
54 return this.formart(hl, [val])
55 },
56 formart: function (str, arrVal) {
57
58 for (var i = 0; i < arrVal.length; i++) {
59 str = str.replace("{" + i + "}", arrVal[i]);
60 }
61 return str;
62 }
63 }
64 }
65
66 function showMsg(id, hl, isAppend) {
67
68 if (!isAppend) { $("#" + id).html(hl); } else {
69 $("#" + id).append(hl);
70 }
71 }
72
73 $(function () {
74
75 //初始化工具方法
76 var tl = new tool();
77
78 var wsUrl = "ws://172.16.9.6:8/webSocket";
79 ws = new WebSocket(wsUrl);
80
81 try {
82
83 ws.onopen = function () {
84
85 //showMsg("divShow", tl.paperDiv("连接服务器-成功"));
86 }
87
88 ws.onclose = function () {
89 if (ws) {
90 ws.close();
91 ws = null;
92 }
93 showMsg("divShow", tl.paperDiv("连接服务器-关闭"), true);
94 }
95
96 ws.onmessage = function (resu |