99
This commit is contained in:
114
Reportapi/MyCode.Project.WebApi/socket.html
Normal file
114
Reportapi/MyCode.Project.WebApi/socket.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user