客户端代码/test.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
	<style>
		textarea {
			vertical-align: bottom;
		}

		#output {
			overflow: auto;
		}

		#output>p {
			overflow-wrap: break-word;
		}

		#output span {
			color: blue;
		}

		#output span.error {
			color: red;
		}
	</style>
	<body>
		<h2>WebSocket Test</h2>
		<textarea cols="60" rows="6"></textarea>
		<button>send</button>
		<div id="output"></div>
	</body>
	<script>
		// http://www.websocket.org/echo.html
		const button = document.querySelector("button");
		const output = document.querySelector("#output");
		const textarea = document.querySelector("textarea");
		const wsUri = "ws://127.0.0.1:8088";
		const websocket = new WebSocket(wsUri);
		

		button.addEventListener("click", onClickButton);

		websocket.onopen = (e) => {
			writeToScreen("CONNECTED");
			doSend("连接服务器成功");
		};

		websocket.onclose = (e) => {
			writeToScreen("DISCONNECTED");
		};

		websocket.onmessage = (e) => {
			writeToScreen(`<span>RESPONSE: ${e.data}</span>`);
		};

		websocket.onerror = (e) => {
			writeToScreen(`<span class="error">ERROR:</span> ${e.data}`);
		};

		function doSend(message) {
			writeToScreen(`SENT: ${message}`);
			websocket.send(message);