console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<style>
		.scrollable-textarea {
			overflow: auto;
			resize: vertical;
			height: 500px;
			width: 100%;
		}

		#backupLastHosts {
			white-space: pre-line;
			font-size: 12px;
			color: gray;
		}
	</style>
	<title>Hosts Editor</title>

</head>

<body>
	<h1>Hosts Editor</h1>
	<button id="btnUpdateHosts" disabled="true" onclick="sendMessage()">更新hosts到设备</button>
    <button id="btnConnectionStatus"  onclick="handleConnectionStatus()">未连接</button>
    <button id="btnLoadRemoteHosts"  onclick="loadRemoteHosts()">加载远程hosts</button>

    <div id="hosts">
        <textarea id="hostsEdit" class="scrollable-textarea" placeholder="连接成功后此处展示设备的最新hosts文件内容，当内容为空时表示清空设备hosts" ></textarea>
    </div>
    <div id="backupLastHosts">
    </div>

<script>
const REQUEST_TYPE_HOSTS_TEXT = "hosts_text"
const RESPONSE_CODE_SERVER_PUSH = "server_push"
const RESPONSE_CODE_SUCCESS = "success"
const RESPONSE_CODE_FAILED = "failed"
   
let connectionStatus = 1; //1--未连接 2--连接成功 3--连接错误 4--连接关闭
let requestId = "123456"

let hostsEdit = document.getElementById("hostsEdit");
let btnConnectionStatus = document.getElementById("btnConnectionStatus");
let btnUpdateHosts = document.getElementById("btnUpdateHosts");
let backupLastHosts = document.getElementById("backupLastHosts");

let socket = connectWebSocket();



function connectWebSocket() {
	// 创建WebSocket对象
	let socket = new WebSocket("ws://192.168.0.101:10086/hosts");
	// let socket = new WebSocket("${ws_url}");
	// 连接打开时的回调函数
	socket.onopen = function(event) {
		updateConnectionStatus(2);
		console.log("WebSocket connection opened");
	};

	// 接收到消息时的回调函数
	socket.onmessage = function(event) {
		let message = event.data;
		console.log("Received message: " + message);

		let res = JSON.parse(message)
		if (res && res.request_type == REQUEST_TYPE_HOSTS_TEXT && res.code == RESPONSE_CODE_SERVER_PUSH) {			
            if(hostsEdit.value != ""){
                backupLastHosts.innerHTML="\n\n以下是上次hosts的备份：\n\n"+hostsEdit.value
                console.log("备份：" + hostsEdit.value)
            }
            hostsEdit.value = res.data;

		}
		if (res && res.request_type == REQUEST_TYPE_HOSTS_TEXT && res.request_id == requestId) {
			if(res.code == RESPONSE_CODE_SUCCESS){
                alert("更新成功");
            } else {
                alert("更新失败：" + res.data);
            }
            
		}
	};

	socket.onerror = function(event) {
		console.log("WebSocket connection error");
		updateConnectionStatus(3);
	}

	// 连接关闭时的回调函数
	socket.onclose = function(event) {
		console.log("WebSocket connection closed, code=" + event.code + ",reason=" + event.reason);
		updateConnectionStatus(4);
		btnConnectionStatus.innerHTML += "(code:" + event.code + ")"
	};

	return socket;

}


// 发送消息
function sendMessage() {
	let message = hostsEdit.value;
	// 发送消息到WebSocket服务器
	socket.send(JSON.stringify({
		"request_id": requestId,
		"request_type": REQUEST_TYPE_HOSTS_TEXT,
		"data": message
	}));
}

function updateConnectionStatus(status) {
	connectionStatus = status;
	if (status == 1) {
		btnConnectionStatus.innerHTML = "！！！未连接，点我重新连接";
		btnConnectionStatus.disabled = false;
		btnUpdateHosts.disabled = true;
	} else if (status == 2) {
		btnConnectionStatus.innerHTML = "已连接成功";
		btnConnectionStatus.disabled = true;
		btnUpdateHosts.disabled = false;
	} else if (status == 3) {
		btnConnectionStatus.innerHTML = "连接错误，点我重新连接";
		btnConnectionStatus.disabled = false;
		btnUpdateHosts.disabled = true;
	} else if (status == 4) {
		btnConnectionStatus.innerHTML = "连接断开，点我重新连接";
		btnConnectionStatus.disabled = false;
		btnUpdateHosts.disabled = true;
	} else {
		btnConnectionStatus.innerHTML = "！！！连接状态未知，点我重新连接";
		btnConnectionStatus.disabled = false;
		btnUpdateHosts.disabled = true;
	}

}

function handleConnectionStatus() {
	if (status == 1) {
		socket = connectWebSocket();
	} else if (status == 2) {
		//ignore
	} else if (status == 3) {
		socket = connectWebSocket();
	} else if (status == 4) {
		socket = connectWebSocket();
	} else {
		socket = connectWebSocket();
	}
}

// function downloadText1(url) {
// 	return fetch(url, {
// 			method: 'GET',
// 			mode: 'cors', // 设置跨域模式为CORS
// 		})
// 		.then(function(response) {
// 			if (!response.ok) {
// 				throw new Error(response.statusText);
// 			}
// 			return response.text();
// 		});
// }


function downloadText(url) {
    return fetch(url, {
            method: 'GET',
            mode: 'cors', // 设置跨域模式为CORS
        })
        .then(function(response) {
            let ok = response.ok
            let statusText = response.statusText

            return response.text()
                .then(function(text) {
                    if (ok) {
                        return {
                            ok: ok,
                            data: text
                        }
                    } else {
                        if (!text) {
                            return {
                                ok: ok,
                                data: statusText
                            }
                        } else {
                            return {
                                ok: ok,
                                data: text
                            }
                        }
                    }

                })
                .catch(function(error) {
                    console.error("downloadText:error:" + error);
                    alert("加载失败：" + error)
                });
        });
}

function loadRemoteHosts() {
    downloadText("${remote_hosts_url}")
        .then(function(result) {
             console.log("加载结果：" + JSON.stringfy(result));
            let text = result.data
            if (!result.ok) {
                console.error("downloadText:error:" + text);
                alert("加载失败：" + text)
                return
            }
            if (!text) {
                alert("远程hosts内容为空")
                return
            }
            if (hostsEdit.value != "") {
                backupLastHosts.innerHTML = "\n\n以下是上次hosts的备份：\n\n" + hostsEdit.value
                console.log("备份：" + hostsEdit.value)
            }
            hostsEdit.value = text;
        })

}
</script>
</body>
</html>