一个websocket网页连接测试工具

最新推荐文章于 2024-08-16 08:18:30 发布

Master.Star

最新推荐文章于 2024-08-16 08:18:30 发布

阅读量789

点赞数 7

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/Ye__Li/article/details/135817139

版权

这篇文章分享了一个用JavaScript编写的简单HTML网页，实现实时WebSocket连接，用户可以输入连接地址并发送、接收消息。它展示了如何在浏览器中使用WebSocket进行通信并显示在页面上。

摘要由CSDN通过智能技术生成

分享给大家一个纯js写的html网页版websocket连接工具，直接保存成html文件点开就可以运行，可以输出发送内容与接受内容；主打一个简单。默认连接地址请自行配置一下就行了
如果大家有更优化更简单更好看，更更更的版本欢迎分享哈

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>ws测试</title>

		<script type="text/javascript">
			var ws;

			 
			

			function tolink() {

				if("WebSocket" in window) {
					ws = new WebSocket(document.getElementById("linkId").value);
					 
					document.getElementById("linked").style.display = 'none';
					document.getElementById("cosed").style.display = '';
					 ws.addEventListener("message", function (event) {
					  console.log("Message from server ", event.data);
					  var received_msg = event.data;
								var htmk=document.getElementById("all");
								var li =document.createElement('li');
								li.innerHTML= "<font color='red'>收到消息</font>:"+JSON.stringify(JSON.parse(received_msg.replace(/[]|[\t\r\n]/g,"")));
								htmk.appendChild(li);
								 
					});
					 
				} else {
					// 浏览器不支持 WebSocket
					alert("您的浏览器不支持 WebSocket!");
				}
			}

			function toSend() {
				var msg=document.getElementById("tosend").value;
				ws.send( msg.replace(/[]|[\t\r\n]/g,"") );
			 
					var htmk=document.getElementById("all");
								var li =document.createElement('li');
								li.innerHTML= "发送消息:"+JSON.stringify(JSON.parse(msg.replace(/[]|[\t\r\n]/g,"")));
								htmk.appendChild(li);
			}

			function toClose() {
				ws.close();
				document.getElementById("linked").style.display = "";
				document.getElementById("cosed").style.display = 'none';
			 
			}
		</script>

	</head>

	<body>

		<div id="header" style="margin-bottom: 0;">
			请输入连接地址：<input id="linkId" value="ws://127.0.0.1:8081/ws?hat=hat001" /> <button id="linked" onclick="tolink()"> 连接</button>

			<button id="cosed" onclick="toClose()" style="display: none;"> 断开</button>
		</div>
		<div>
			<button id="sends" onclick="toSend()"> 发送</button>：
			<input id="tosend" type="text" style="height: 50;width: 100%;" /> </button>
		</div>
		<div>
			输出： 
			<div id="all">
				
			</div>
		</div>
		 

	</body>

</html>