<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" />
<title>websocket測試工具</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<script type="text/javascript">
var socket;
var messageNum=0;
var url;
var jsonStr;
if (window.WebSocket) {
function openws(url){
this.socket = new WebSocket(url);
this.socket.onmessage = function(event) {
messageNum = messageNum + 1;
var ta = document.getElementById('responseText');
var kk = "----------------------------------------------------------------------";
ta.value= ta.value + event.data + messageNum + "\n" + kk + "\n";
ta.scrollTop = ta.scrollHeight;
jsonStr = event.data;
jsonStr = JSON.parse(jsonStr);
//console.log(jsonStr)
if(jsonStr.data.sortid == "draw"){
xx = jsonStr.data.content.xx.split(",");
yy = jsonStr.data.content.yy.split(",");
window.draw(xx, yy);
//console.log(jsonStr.data.content.xx.split(",")[0]);
//console.log(jsonStr.data.content.yy.split(",")[0])
}
if (jsonStr.data.sortid == "insert_page"){
console.log(jsonStr.data.content.src);
document.getElementById("c1").style.backgroundImage = "url" + "(" + jsonStr.data.content.src + ")" ;
//document.getElementById("img1").src = jsonStr.data.content.src;
}
}
this.socket.onopen = function(event) {
var ta = document.getElementById('responseText');
ta.value = "連接配接開啟!";
}
this.socket.onclose = function(event) {
var ta = document.getElementById('responseText');
ta.value = "連接配接關閉";
}
}
} else {
alert("您的浏覽器不支援 WebSocket!");
}
function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("連接配接沒有開啟");
}
}
function opensocket(){
url = document.getElementById("i1").value
if (url == ""){
alert("請重新輸入連接配接")
} else{
window.openws(url)
}
}
function closeWebsocket(){
socket.close();
}
function sendMessage(){
if (socket == null){
alert("websocket沒有連接配接")
} else {
var message = document.getElementById("ms").value;
socket.send(message);
}
}
function draw(x, y){
ele = document.getElementById("c1");
ctx = ele.getContext("2d");
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x[0]*0.4, y[0]*0.4);
for(i = 1; i < x.length; i ++){
ctx.lineTo(x[i]*0.4, y[i]*0.4);
}
ctx.stroke();
}
</script>
<div style = "margin-top : 10px;">
<input id = "i1" style = "width:500px" value = "ws://172.31.17.48:9090?topic=2c9f49a06936fb10016947e2775900b9
&userName=霸波奔&userId=1010000001000163460&userRole=0&deviceId=45"/>
<div style = "margin:20px;">
<button style = "margin-left: 100px;" onclick = "opensocket()">連接配接</button>
<button style = "margin-left: 100px;" οnclick="closeWebsocket()">斷開連接配接</button>
</div>
</div>
<h3 >websocket連接配接工具</h3>
<textarea id="responseText" style="width: 500px; height: 300px;resize:none" placeholder="顯示消息"></textarea> <br />
<div>
<textarea id = "ms" style="width: 500px; height: 200px; resize:vertical;" ></textarea> <br />
<input type = "button" value = "發送" onclick = "sendMessage()" style = "width:500px; margin:0px" />
</div>
<canvas width = "760" height = "480" id = "c1"></canvas>
</body>
<html>
![高效辦公必備神器-Keychron鍵盤，值得擁有[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)