<!DOCTYPE html>
|
<html>
|
<head>
|
<title>WebSocket</title>
|
|
<style>
|
html, body {
|
font: normal 1em arial, helvetica;
|
}
|
|
#log {
|
width: 400px;
|
height: 200px;
|
border: 1px solid #000000;
|
overflow: auto;
|
}
|
|
#msg {
|
width: 330px;
|
}
|
</style>
|
|
<script>
|
var socket;
|
|
function init() {
|
var host = "ws://127.0.0.1:5000/";
|
try {
|
socket = new WebSocket(host);
|
socket.onopen = function (msg) {
|
log("Begin Connection!");
|
};
|
socket.onmessage = function (msg) {
|
log(msg.data);
|
};
|
socket.onclose = function (msg) {
|
log("Lose Connection!");
|
};
|
}
|
catch (ex) {
|
log(ex);
|
}
|
$("msg").focus();
|
}
|
|
function send() {
|
var txt, msg;
|
txt = $("msg");
|
msg = txt.value;
|
if (!msg) {
|
alert("Message can not be empty");
|
return;
|
}
|
txt.value = "";
|
txt.focus();
|
try {
|
socket.send(msg);
|
} catch (ex) {
|
log(ex);
|
}
|
}
|
|
window.onbeforeunload = function () {
|
try {
|
socket.send('quit');
|
socket.close();
|
socket = null;
|
}
|
catch (ex) {
|
log(ex);
|
}
|
};
|
|
|
function $(id) {
|
return document.getElementById(id);
|
}
|
function log(msg) {
|
$("log").innerHTML += "<br>" + msg;
|
}
|
function onkey(event) {
|
if (event.keyCode == 13) {
|
send();
|
}
|
}
|
</script>
|
|
</head>
|
<body onload="init()">
|
<h3>WebSocket</h3>
|
<br>
|
<div id="log"></div>
|
<input id="msg" type="textbox" onkeypress="onkey(event)"/>
|
<button onclick="send()">发送</button>
|
</body>
|
</html>
|
