114 lines
3.0 KiB
HTML
114 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket Chat Client</title>
|
|
<meta charset="utf-8" />
|
|
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
|
|
<script type="text/javascript">
|
|
//判读浏览器是否支持websocket
|
|
$().ready(function() {
|
|
if ( !window.WebSocket ) {
|
|
alert("童鞋, 你的浏览器不支持该功能啊");
|
|
}
|
|
|
|
});
|
|
|
|
//在消息框中打印内容
|
|
function log(text) {
|
|
$("#log").append(text+"\n");
|
|
}
|
|
|
|
//全局的websocket变量
|
|
var ws;
|
|
|
|
//创建连接
|
|
$(function() {
|
|
$("#uriForm").submit(function() {
|
|
log("准备连接到" + $("#uri").val());
|
|
|
|
ws = new WebSocket($("#uri").val());
|
|
//连接成功建立后响应
|
|
ws.onopen = function() {
|
|
log("成功连接到" + $("#uri").val());
|
|
}
|
|
//收到服务器消息后响应
|
|
ws.onmessage = function(e) {
|
|
log("收到服务器消息:" + e.data + "\n");
|
|
}
|
|
//连接关闭后响应
|
|
ws.onclose = function() {
|
|
log("关闭连接");
|
|
$("#disconnect").attr({"disabled":"disabled"});
|
|
$("#uri").removeAttr("disabled");
|
|
$("#connect").removeAttr("disabled");
|
|
ws = null;
|
|
}
|
|
$("#uri").attr({"disabled":"disabled"});
|
|
$("#connect").attr({"disabled":"disabled"});
|
|
$("#disconnect").removeAttr("disabled");
|
|
return false;
|
|
});
|
|
});
|
|
|
|
//发送字符串消息
|
|
$(function() {
|
|
$("#sendForm").submit(function() {
|
|
|
|
if(ws == null){alert("连接已关闭，请重新连接");}
|
|
|
|
if (ws) {
|
|
var textField = $("#textField");
|
|
ws.send(textField.val());
|
|
log("我说:" + textField.val());
|
|
textField.val("");
|
|
textField.focus();
|
|
}
|
|
return false;
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$(function() {
|
|
$("#disconnect").click(function() {
|
|
if (ws) {
|
|
$("#log").empty();
|
|
ws.close();
|
|
ws = null;
|
|
}
|
|
return false;
|
|
});
|
|
});
|
|
|
|
$(function() {
|
|
$("#reset").click(function() {
|
|
$("#log").empty();
|
|
return false;
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form id="uriForm">
|
|
<input type="text" id="uri" value="ws://127.0.0.1:9798/id=1&type=0&t=3"
|
|
style="width: 500px;"> <input type="submit" id="connect"
|
|
value="Connect"><input type="button" id="disconnect"
|
|
value="Disconnect" disabled="disabled">
|
|
</form>
|
|
<br>
|
|
|
|
<br>
|
|
<form id="sendForm">
|
|
<input type="text" id="textField" value="" style="width: 200px;">
|
|
<input type="submit" value="Send">
|
|
</form>
|
|
<br>
|
|
<form>
|
|
<textarea id="log" rows="30" cols="100"
|
|
style="font-family: monospace; color: red;"></textarea>
|
|
</form>
|
|
<br>
|
|
</body>
|
|
</html> |