<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title>WebSocket</title>
<a href="./a=1">link</a>
<script type="text/javascript">
var socket;
if(!window.WebSocket){
window.WebSocket = window.MozWebSocket;
}
if(window.WebSocket){
socket = new WebSocket("ws://127.0.0.1/websocket");
console.log(socket);
socket.onmessage = function(event){
var ta = document.getElementById('responseContent');
ta.value += event.data + "\r\n";
};
socket.onopen = function(event){
var ta = document.getElementById('responseContent');
ta.value = "你当前的浏览器支持WebSocket,请进行后续操作\r\n";
};
socket.onclose = function(event){
var ta = document.getElementById('responseContent');
ta.value = "";
ta.value = "WebSocket连接已经关闭\r\n";
};
}else{
alert("您的浏览器不支持WebSocket");
}
function send(message){
if(!window.WebSocket){
return;
}
if(socket.readyState == WebSocket.OPEN){
socket.send(message);
}else{
alert("WebSocket连接没有建立成功!!");
}
}
</script>
</head>
<body>
<form onsubmit="return false;">
<input type="text" name="message" value="" style="width:200px; height:18px;"/><br><br>
<input type="button" value="发送WebSocket请求消息" onClick="send(this.form.message.value)">
<hr color="red" size="5px">
<h2>客户端接收到服务端返回的应答消息</h2>
<textarea id="responseContent" style="width:1024px; height:300px"></textarea>
</form>
</body>
</html>
websocket-HTML代码
skyyemperor
·2022-01-15
·545 次阅读
Comments | 0 条评论