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

lws-minimal-ws-server前端分析

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);



http://www.kler.cn/a/586575.html

相关文章:

  • 考研数学复习误区:如何避免无效学习?
  • 3.4 基于TSX的渲染函数类型安全实践
  • Julia语言的饼图
  • Java常见的几种内存溢出及解决方法
  • BSides-Vancouver-2018 ftp匿名访问、hydra爆破22端口、nc瑞士军刀、提权
  • C++类对象创建全解析:从构造函数到内存管理
  • SQL Server语法实战指南:核心语法、注意事项与高频问题解析
  • Java基础-List、Set、Map
  • MATLAB中enumeration函数用法
  • 【FPGA实战】Verilog实现DE2-115的流水灯控制
  • 四、Jmeter工具接口脚本编写
  • 用Python实现持续集成与部署(CI/CD)流程:自动化测试、构建与部署
  • 什么是强哈希算法pbkdf2(Password-Based Key Derivation Function)
  • 向量数据库:A Brief Introduction
  • 04_Linux驱动_05_pinctrl子系统
  • 阿里云oss开发实践:大文件分片、断点续传、实时进度 React+Node+Socket.IO
  • 【接口封装】——22、读写文件
  • iOS底层原理系列03-Objective-C运行时机制
  • ubuntu24.04执行nvidia-smi报错,实际生产报错,处理过程
  • Docker部署Laravel项目