当前位置：首页 > article >正文

lws-minimal-ws-server前端分析

article 2025/3/16 6:22:42

index.html

index.html是前端入口

<html>
 <head>
  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
  <!-- 引入js -->
  <script src="/example.js"></script>
 </head>
	<body>
		<img src="libwebsockets.org-logo.svg">
		<img src="strict-csp.svg"><br>
	
		LWS chat <b>minimal ws server example</b>.<br>
		Chat is sent to all browsers open on this page.
		<br>
		<br>
		<!-- 文本框 -->
		<textarea id=r readonly cols=40 rows=10></textarea><br>
		<!-- 输入框 -->
		<input type="text" id=m cols=40 rows=1>
		<!-- 发送按键 -->
		<button id=b>Send</button>
	</body>
</html>

example.js

example.js 为index.html提供了处理的逻辑


function get_appropriate_ws_url(extra_url)
{
	var pcol;
	// 获得页面上的url
	var u = document.URL;

	/*
	 * We open the websocket encrypted if this page came on an
	 * https:// url itself, otherwise unencrypted
	 */

	// 去掉http://或者https://
	if (u.substring(0, 5) === "https") {
		pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) === "http")
			u = u.substr(7);
	}

	// 去掉/后面的
	u = u.split("/");

	/* + "/xxx" bit is for IE10 workaround */

	//回来的url就城了ws://地址或者wss://地址
	return pcol + u[0] + "/" + extra_url;
}

//创建ws服务
function new_ws(urlpath, protocol)
{
	return new WebSocket(urlpath, protocol);
}

//加载监听
document.addEventListener("DOMContentLoaded", function() {
	
	//创建ws服务
	var ws = new_ws(get_appropriate_ws_url(""), "lws-minimal");
	try {
		//ws启动时
		ws.onopen = function() {
			//不禁用输入框和按键
			document.getElementById("m").disabled = 0;
			document.getElementById("b").disabled = 0;
		};
	
		//ws接收到数据包时
		ws.onmessage =function got_packet(msg) {
			//把收到的内容写到文本框加回车
			document.getElementById("r").value =
				document.getElementById("r").value + msg.data + "\n";
			//调整scrollTop
			document.getElementById("r").scrollTop =
				document.getElementById("r").scrollHeight;
		};
	
		//ws连接关闭时
		ws.onclose = function(){
			// 输入框和发送按键禁用
			document.getElementById("m").disabled = 1;
			document.getElementById("b").disabled = 1;
		};
	} catch(exception) {
		alert("<p>Error " + exception);  
	}
	
	//按键点击发送
	function sendmsg()
	{
		//发送内容
		ws.send(document.getElementById("m").value);
		//清空内容
		document.getElementById("m").value = "";
	}
	
	//为b按键增加一个click监听
	document.getElementById("b").addEventListener("click", sendmsg);
	
}, false);