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;// 获得页面上的urlvar 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";//调整scrollTopdocument.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);
