-
Notifications
You must be signed in to change notification settings - Fork 94
Expand file tree
/
Copy pathsocketClient.html
More file actions
104 lines (99 loc) · 3.05 KB
/
socketClient.html
File metadata and controls
104 lines (99 loc) · 3.05 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WebSocket-聊天室</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css" media="screen">
body{font-size: 12px;}
.chatBox{width: 500px; height: 400px; border: solid 1px #00BCD4; overflow: hidden;}
.connState{background-color: #ccc; padding: 5px; color: #9C27B0;}
.msgList{width: 100%; height: 300px; border-bottom: solid 1px #00BCD4; }
.msgList>p{margin: 0; padding: 5px;}
.msgBox{width: 100%; height: 40px; border-bottom: solid 1px #00BCD4;}
.msgBox>input{width: 100%; padding: 0; border: none; height: 100%; outline: none;}
.btnBox{padding: 5px; text-align: right;}
</style>
</head>
<body>
<div class="chatBox">
<div class="connState">服务已断开</div>
<div class="msgList"></div>
<div class="msgBox">
<input type="text" id="mesBox" value="" />
</div>
<div class="btnBox">
昵称：<input type="text" id="nickName" value="" />
<input type="button" id="btnConnection" value="连接" />
<input type="button" id="btnClose" value="关闭" />
<input type="button" id="btnSend" value="发送" />
</div>
</div>
<script type="text/javascript">
var socket = null;
if(!WebSocket){
$('.connState').text("您的浏览器不支持WebSocket");
}
$('#btnConnection').click(function(){
if(socket){
return false;
}
if(!WebSocket){
$('.connState').text("您的浏览器不支持WebSocket");
return false;
}
if(!$('#nickName').val()){
window.alert('昵称不能为空！');
return false;
}
//连接 socket 服务器
socket = new WebSocket('ws://localhost:8080');
//监听 socket 的连接
socket.onopen = function(){
$('.connState').text("服务已连接 ws://localhost:8080");
sendMessage('加入聊天');
}
//监听服务端广播过来的消息
socket.onmessage = function(msg){
var msgObj = JSON.parse(msg.data);
if(msgObj.status == 0){
$('<p>' + msgObj.nickname + '[' + msgObj.time + ']退出聊天</p>').appendTo('.msgList');
} else{
$('<p>' + msgObj.nickname + '[' + msgObj.time + ']：' + msgObj.message + '</p>').appendTo('.msgList');
}
}
//监听服务端断开
socket.onclose = function(){
$('.connState').text("服务已断开");
socket = null;
}
//监听服务端异常
socket.onerror = function(){
$('.connState').text("服务错误");
socket = null;
}
});
$('#btnSend').click(function(){
sendMessage();
});
$('#btnClose').click(function(){
if(socket){
socket.close();
}
})
var sendMessage = function(_mess){
if(socket){
var myDate = new Date();
var now = myDate.getMonth() + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
var mesObj = {
nickname: $('#nickName').val(),
message: _mess || $('#mesBox').val(),
time: now
}
socket.send(JSON.stringify(mesObj));
}
}
</script>
</body>
</html>