lws-minimal-ws-server前端分析

index.html

index.html是前端入口

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提供了处理的逻辑

js 复制代码
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);
相关推荐
乐闻x3 分钟前
提升 React 应用性能:使用 React Profiler 进行性能调优
前端·javascript·react.js·性能优化
NaZiMeKiY2 小时前
HTML5前端第二章节
前端·html·html5
天若有情6732 小时前
深入浅出:HTML 中 <a> 标签嵌入链接教程
前端·html
烂蜻蜓2 小时前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽2 小时前
Webpack 优化深度解析:从构建性能到输出优化的全面指南
前端·webpack·node.js
大龄大专大前端4 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流4 小时前
【SpringMVC】常用注解:@SessionAttributes
java·服务器·前端
肥肠可耐的西西公主4 小时前
前端(vue)学习笔记(CLASS 4):组件组成部分与通信
前端·vue.js·学习
烛阴4 小时前
JavaScript 函数绑定:从入门到精通,解锁你的代码超能力!
前端·javascript
泫凝5 小时前
使用 WebP 优化 GPU 纹理占用
前端·javascript