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