2019-07-27 22:44:32 +08:00
|
|
|
|
<html>
|
2016-09-20 19:55:38 +08:00
|
|
|
|
<meta charset="utf-8" />
|
2016-09-22 22:50:45 +08:00
|
|
|
|
<title>WebSocket Chat</title>
|
2016-09-20 19:55:38 +08:00
|
|
|
|
<script language="javascript" type="text/javascript">
|
2016-09-22 22:50:45 +08:00
|
|
|
|
var wsUri = "ws://121.42.12.244:9001/";
|
|
|
|
|
|
var output = document.getElementById("output");
|
|
|
|
|
|
var ws = null;
|
|
|
|
|
|
|
|
|
|
|
|
function OnConnect(user) {
|
|
|
|
|
|
wsUri = document.getElementById("url").value;
|
|
|
|
|
|
openWebSocket(user);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function openWebSocket(user) {
|
|
|
|
|
|
if (ws != null)
|
|
|
|
|
|
ws.close();
|
|
|
|
|
|
ws = new WebSocket(wsUri);
|
|
|
|
|
|
ws.onmessage = function (evt) { onMessage(evt); };
|
|
|
|
|
|
ws.onopen = function (evt) { onOpen(evt, user); };
|
|
|
|
|
|
ws.onclose = function (evt) { onClose(evt); };
|
|
|
|
|
|
ws.onerror = function (evt) { onError(evt); };
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onMessage(evt) {
|
|
|
|
|
|
var data = evt.data + "<br>" + document.getElementById('result').innerHTML;
|
|
|
|
|
|
document.getElementById('result').innerHTML = data;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onOpen(evt, user) {
|
|
|
|
|
|
// writeToScreen("CONNECTED");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onClose(evt) {
|
|
|
|
|
|
// writeToScreen("DISCONNECTED");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onError(evt) {
|
|
|
|
|
|
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function doLogin(user) {
|
|
|
|
|
|
var user = document.getElementById(user).value;
|
|
|
|
|
|
message = "login|" + user;
|
|
|
|
|
|
ws.send(message);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function doSend(to, msgid) {
|
|
|
|
|
|
var to_user = document.getElementById(to).value;
|
|
|
|
|
|
var msg = document.getElementById(msgid).value;
|
|
|
|
|
|
message = "chat|" + msg + "|" + to_user;
|
|
|
|
|
|
ws.send(message);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function doClear(result) {
|
|
|
|
|
|
document.getElementById(result).innerHTML = "";
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function writeToScreen(message) {
|
|
|
|
|
|
var pre = document.createElement("p");
|
|
|
|
|
|
pre.style.wordWrap = "break-word";
|
|
|
|
|
|
pre.innerHTML = message;
|
|
|
|
|
|
output.insertBefore(pre);
|
|
|
|
|
|
}
|
2016-09-20 19:55:38 +08:00
|
|
|
|
|
2016-09-22 22:50:45 +08:00
|
|
|
|
</script>
|
2016-09-20 19:55:38 +08:00
|
|
|
|
<body>
|
|
|
|
|
|
|
2016-09-22 22:50:45 +08:00
|
|
|
|
<fieldset style="width:530px;">
|
2016-09-20 19:55:38 +08:00
|
|
|
|
<legend>WebSocket</legend>
|
|
|
|
|
|
<p><span>Server url:</span>
|
2016-09-22 22:50:45 +08:00
|
|
|
|
<input id="url" type="text" value="ws://121.42.12.244:9001/" />
|
|
|
|
|
|
<input type="button" value="Connect" onclick="OnConnect('user');" />
|
2016-09-20 19:55:38 +08:00
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
2016-09-22 22:50:45 +08:00
|
|
|
|
me: <input id="user" type="text" value="user" />
|
|
|
|
|
|
<input type="button" value="login" onclick="doLogin('user');" />
|
2016-09-20 19:55:38 +08:00
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
2016-09-22 22:50:45 +08:00
|
|
|
|
to: <input id="to_user" type="text" value="user" />
|
|
|
|
|
|
|
|
|
|
|
|
msg: <input type=text id="msg" value="hello world!" />
|
|
|
|
|
|
<input type="button" value="send" onclick="doSend('to_user', 'msg');" />
|
|
|
|
|
|
<input type="button" value="clear" onclick="doClear('result');" />
|
2016-09-20 19:55:38 +08:00
|
|
|
|
</p>
|
2016-09-22 22:50:45 +08:00
|
|
|
|
recv:
|
|
|
|
|
|
<fieldset style="width:500px;height:80px; overflow:auto;">
|
|
|
|
|
|
<div id="result"></div>
|
|
|
|
|
|
</fieldset>
|
2016-09-20 19:55:38 +08:00
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="output"> </div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
