mirror of
https://github.com/libevent/libevent.git
synced 2025-01-31 09:12:55 +08:00
e8313084f9
This adds few functions to use evhttp-based webserver to handle incoming WebSockets connections. We've tried to use both libevent and libwebsockets in our application, but found that we need to have different ports at the same time to handle standard HTTP and WebSockets traffic. This change can help to stick only with libevent library. Implementation was inspired by modified Libevent source code in ipush project [1]. [1]: https://github.com/sqfasd/ipush/tree/master/deps/libevent-2.0.21-stable Also, WebSocket-based chat server was added as a sample.
99 lines
2.2 KiB
HTML
99 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Chat Example</title>
|
|
<script type="text/javascript">
|
|
window.onload = function () {
|
|
var conn;
|
|
var msg = document.getElementById("msg");
|
|
var log = document.getElementById("log");
|
|
|
|
function appendLog(item) {
|
|
var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
|
|
log.appendChild(item);
|
|
if (doScroll) {
|
|
log.scrollTop = log.scrollHeight - log.clientHeight;
|
|
}
|
|
}
|
|
|
|
document.getElementById("form").onsubmit = function () {
|
|
if (!conn) {
|
|
return false;
|
|
}
|
|
if (!msg.value) {
|
|
return false;
|
|
}
|
|
conn.send(msg.value);
|
|
msg.value = "";
|
|
return false;
|
|
};
|
|
|
|
if (window["WebSocket"]) {
|
|
conn = new WebSocket("ws://" + document.location.host + ":8080/ws");
|
|
conn.onclose = function (evt) {
|
|
var item = document.createElement("div");
|
|
item.innerHTML = "<b>Connection closed.</b>";
|
|
appendLog(item);
|
|
};
|
|
conn.onmessage = function (evt) {
|
|
var messages = evt.data.split('\n');
|
|
for (var i = 0; i < messages.length; i++) {
|
|
var item = document.createElement("div");
|
|
item.innerText = messages[i];
|
|
appendLog(item);
|
|
}
|
|
};
|
|
} else {
|
|
var item = document.createElement("div");
|
|
item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
|
|
appendLog(item);
|
|
}
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: gray;
|
|
}
|
|
|
|
#log {
|
|
background: white;
|
|
margin: 0;
|
|
padding: 0.5em 0.5em 0.5em 0.5em;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
right: 0.5em;
|
|
bottom: 3em;
|
|
overflow: auto;
|
|
}
|
|
|
|
#form {
|
|
padding: 0 0.5em 0 0.5em;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 0px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<form id="form">
|
|
<input type="submit" value="Send" />
|
|
<input type="text" id="msg" size="64" autofocus />
|
|
</form>
|
|
</body>
|
|
</html>
|