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);
相关推荐
招风的黑耳9 分钟前
Web元件库 ElementUI元件库+后台模板页面(支持Axure9、10、11)
前端·elementui·axure
雯0609~10 分钟前
CSS:使用内边距时,解决宽随之改变问题
前端·css
Dolphin_海豚21 分钟前
10 分钟带你入坑 electron
前端·javascript·electron
乐闻x31 分钟前
性能优化:javascript 如何检测并处理页面卡顿
前端·javascript·性能优化
雯0609~36 分钟前
vue3:八、登录界面实现-忘记密码
前端·javascript·vue.js
烂蜻蜓1 小时前
深入理解 HTML 中的<div>和元素:构建网页结构与样式的基石
开发语言·前端·css·html·html5
木木黄木木1 小时前
HTML5 Canvas弹跳小球游戏开发实战与技术分析
前端·html·html5
Anlici2 小时前
Axios 是基于 Ajax 还是 Fetch?从源码解析其实现
前端·面试
一个处女座的程序猿O(∩_∩)O2 小时前
Vue 中的 MVVM、MVC 和 MVP 模式深度解析
前端·vue.js·mvc
鱼樱前端2 小时前
前端程序员集体破防!AI工具same.dev像素级抄袭你的代码,你还能高傲多久?
前端·javascript·后端