2019-07-28 10:31:56 +08:00
|
|
|
<html>
|
2016-09-28 17:33:33 +08:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>WebSocket Chat</title>
|
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
|
|
var wsUri = "ws://121.42.12.244:9001/";
|
|
|
|
|
var ws = null;
|
|
|
|
|
var logined = false;
|
|
|
|
|
var user_list = new Array();
|
|
|
|
|
|
|
|
|
|
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 onOpen(evt, user) {
|
2022-02-10 09:50:00 +08:00
|
|
|
setStatus("connected!");
|
2016-09-28 17:33:33 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onClose(evt) {
|
2022-02-10 09:50:00 +08:00
|
|
|
setStatus("disconnected!");
|
2016-09-28 17:33:33 +08:00
|
|
|
logined = false;
|
|
|
|
|
user_list = new Array();
|
|
|
|
|
ws = null;
|
|
|
|
|
displayUsers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onError(evt) {
|
|
|
|
|
setStatus('<span style="color: red;">ERROR:</span> ' + evt.data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onMessage(evt) {
|
|
|
|
|
output = document.getElementById('output');
|
|
|
|
|
var data = evt.data;
|
|
|
|
|
var del1 = data.indexOf("|");
|
|
|
|
|
if (del1 == -1) {
|
|
|
|
|
setStatus("invalid data: " + data);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var cmd = data.substr(0, del1);
|
|
|
|
|
switch (cmd) {
|
|
|
|
|
case "status":
|
|
|
|
|
onStatus(data.substring(del1 + 1));
|
|
|
|
|
break;
|
|
|
|
|
case "users":
|
|
|
|
|
onUsers(data.substring(del1 + 1));
|
|
|
|
|
break;
|
|
|
|
|
case "login":
|
|
|
|
|
onLogin(data.substring(del1 + 1));
|
|
|
|
|
break;
|
|
|
|
|
case "logout":
|
|
|
|
|
onLogout(data.substring(del1 + 1));
|
|
|
|
|
break;
|
|
|
|
|
case "chat":
|
|
|
|
|
onChat(data.substring(del1 + 1));
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onChat(data) {
|
|
|
|
|
var del2 = data.indexOf("|");
|
|
|
|
|
if (del2 == -1) {
|
|
|
|
|
setStatus("invalid data: " + data);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var from = data.substr(0, del2);
|
|
|
|
|
var msg = data.substring(del2 + 1);
|
|
|
|
|
data = output.innerHTML + "<font color='blue'>" + from + "> " + msg + "</front><br>";
|
|
|
|
|
output.innerHTML = data;
|
|
|
|
|
output.scrollTop = output.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onStatus(data) {
|
|
|
|
|
setStatus(data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function userExist(user) {
|
|
|
|
|
for (var i = 0; i < user_list.length; i++) {
|
|
|
|
|
if (user_list[i] == user)
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function displayUsers() {
|
|
|
|
|
var users = "";
|
|
|
|
|
for (var i = 0; i < user_list.length; i++) {
|
|
|
|
|
users += user_list[i] + "<br>";
|
|
|
|
|
}
|
|
|
|
|
document.getElementById("users").innerHTML = users;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onUsers(data) {
|
|
|
|
|
setStatus("login ok");
|
|
|
|
|
var tokens = data.split("|");
|
|
|
|
|
for (var i = 0; i < tokens.length; i++) {
|
|
|
|
|
if (!userExist(tokens[i]))
|
|
|
|
|
user_list.push(tokens[i]);
|
|
|
|
|
}
|
|
|
|
|
displayUsers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onLogin(user) {
|
|
|
|
|
logined = true;
|
|
|
|
|
if (userExist(user))
|
|
|
|
|
return;
|
|
|
|
|
document.getElementById("users").innerHTML += user + "<br>";
|
|
|
|
|
user_list.push(user);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onLogout(user) {
|
|
|
|
|
for (var i = 0; i < user_list.length; i++) {
|
|
|
|
|
if (user_list[i] == user) {
|
|
|
|
|
user_list.splice(i, 1);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
displayUsers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doLogin(user) {
|
|
|
|
|
if (ws == null) {
|
|
|
|
|
alert("Please connect first!");
|
|
|
|
|
document.all.connect.focus();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var user = document.getElementById(user).value;
|
|
|
|
|
if (user.length == 0) {
|
|
|
|
|
alert("Please enter your name!");
|
|
|
|
|
document.all.user.focus();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
message = "login|" + user;
|
|
|
|
|
ws.send(message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doSend(to, msgid) {
|
|
|
|
|
if (!logined) {
|
|
|
|
|
alert("Please login first!");
|
|
|
|
|
document.all.login.focus();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var to_user = document.getElementById(to).value;
|
|
|
|
|
var msg = document.getElementById(msgid).value;
|
|
|
|
|
if (msg.length == 0)
|
|
|
|
|
return;
|
|
|
|
|
message = "chat|" + msg + "|" + to_user;
|
|
|
|
|
ws.send(message);
|
|
|
|
|
document.getElementById(msgid).value = "";
|
2022-02-10 09:50:00 +08:00
|
|
|
document.all.msg.focus();
|
2016-09-28 17:33:33 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doClear(output) {
|
|
|
|
|
document.getElementById(output).innerHTML = "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setStatus(message) {
|
|
|
|
|
node = document.getElementById("status");
|
|
|
|
|
node.innerHTML = '<font style="color: blue; height: 10px;">' + message + '</font>';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div style="float:left;">
|
|
|
|
|
<fieldset style="width:530px;">
|
|
|
|
|
<legend>WebSocket Chat</legend>
|
|
|
|
|
<p><span>Server url:</span>
|
2022-02-10 09:50:00 +08:00
|
|
|
<input id="url" type="text" value="ws://127.0.0.1:9001/" />
|
2016-09-28 17:33:33 +08:00
|
|
|
<input type="button" id="connect" value="connect" onclick="OnConnect('user');" />
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
me: <input id="user" type="text" value="" />
|
|
|
|
|
<input type="button" id="login" value="login" onclick="doLogin('user');" />
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
to: <input id="to_user" type="text" value="all" />
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<input type=text id="msg" size="60px" value="hello world!"
|
|
|
|
|
onkeydown = "if (event.keyCode==13) doSend('to_user', 'msg');"/>
|
|
|
|
|
<input type="button" value="send" onclick="doSend('to_user', 'msg');" />
|
|
|
|
|
<input type="button" value="clear" onclick="doClear('output');" />
|
|
|
|
|
</p>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div id="output" style="width:500px;height:300px; overflow:auto;"></div>
|
|
|
|
|
<hr>
|
|
|
|
|
<div id="status" style="width:500px;height:25px; overflow:auto;" align = "right"> </div>
|
2022-02-10 09:50:00 +08:00
|
|
|
<div><a href="https://github.com/acl-dev/acl/tree/master/app/wizard_demo/fiber_chat" target=_blank>源码</a></div>
|
2016-09-28 17:33:33 +08:00
|
|
|
</fieldset>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="float:auto; margin:10px">
|
|
|
|
|
<fieldset style="width:150px; height:500px;">
|
|
|
|
|
<legend>User List</legend>
|
|
|
|
|
<div id="users"></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
