java WebSocket HTML页面
2024-09-03 06:44:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocketTest客户端</title>
</head> <body> <h4>客户端输入:</h4>
<textarea id = "message" name="message" style="width: 200px;height: 100px"></textarea>
<br/>
<input type="button" value="发送到服务器" onclick="sendMessage()" /> <h4>服务器返回消息:</h4>
<textarea id = "responseText" name="message" style="width: 1100px;height: 100px"></textarea>
<br/>
<input type="button" οnclick="javascript:document.getElementById('responseText').value=''" value="clear data">
<script type="text/javascript">
function send(){
alert(2);
}
var webSocket;
if(window.WebSocket){
webSocket = new WebSocket("ws://127.0.0.1:2048/ws");
//客户端收到服务器的方法,这个方法就会被回调
webSocket.onmessage = function (ev) { var contents = document.getElementById("responseText");
contents.value = contents.value +"\n"+ ev.data;
} webSocket.onopen = function (ev) {
var contents = document.getElementById("responseText");
contents.value = "与服务器端的websocket连接建立"; var data = '{"method":"init","identifier":"11VKF7M0020199"}'; webSocket.send(data);
}
webSocket.onclose = function (ev) { var contents = document.getElementById("responseText");
contents.value = contents.value +"\n"+ "与服务器端的websocket连接断开";
}
}else{
alert("该环境不支持websocket")
} function sendMessage() {
//alert(document.getElementById("message").value);
if(window.webSocket){
if(webSocket.readyState == WebSocket.OPEN){
var data2 = '{"method":"video","serialNumber":"yjdp"}';
var data= '{"method":"video","identifier":"11VKF7M0020199","toIdentifier":"yjdp","status":"'+document.getElementById("message").value+'","url":"http://127.0.0.1:8081/UAV_FILES/FILES/0UYKG7K002001F.mp4"}';
webSocket.send(data);
}else{
alert("与服务器连接尚未建立")
}
}
} </script>
</body>
</html>
最新文章
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
- 关于安装AccessDatabaseEngine_x64.exe 的说明
- 【GoLang】类型和作用在它上面定义的方法必须在同一个包里定义
- iOS 键盘类型定制归纳
- Add Binary <;leetcode>;
- Java中正则表达式的使用
- C#中Monitor和Lock以及区别
- PS 的参考线
- Hadoop系列
- 4010: [HNOI2015]菜肴制作
- LightOJ 1370 Bi-shoe and Phi-shoe 欧拉函数+线段树
- 恭喜我开通了CSDN博客
- 第十六节,基本数据类型,字典dict
- .NET 开发环境搭建
- chrome地址栏命令
- RabbitMQ消息队列之二:消费者和生产者
- 【Java实现】栈和队列就是这么简单
- [Swift]LeetCode202. 快乐数 | Happy Number
- undefined reference to `pthread_create&#39;
- [Java]Get与Post,客户端跳转与服务器端跳转