chatclient.html 范例文件
chatclient-html/chatclient.html
<!DOCTYPE html>
<html>
<head>
<title>ChatClient</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="qwebchannel.js"></script>
<script>
'use strict';
var wsUri = "ws://localhost:12345";
window.loggedin = false;
window.onload = function() {
var socket = new WebSocket(wsUri);
socket.onclose = function() {
console.error("web channel closed");
};
socket.onerror = function(error) {
console.error("web channel error: " + error);
};
socket.onopen = function() {
window.channel = new QWebChannel(socket, function(channel) {
//connect to the changed signal of a property
channel.objects.chatserver.userListChanged.connect(function() {
$('#userlist').empty();
//access the property
channel.objects.chatserver.userList.forEach(function(user) {
$('#userlist').append(user + '<br>');
});
});
//connect to a signal
channel.objects.chatserver.newMessage.connect(function(time, user, message) {
$('#chat').append("[" + time + "] " + user + ": " + message + '<br>');
});
//connect to a signal
channel.objects.chatserver.keepAlive.connect(function(args) {
if (window.loggedin) {
//call a method
channel.objects.chatserver.keepAliveResponse($('#loginname').val())
console.log("sent alive");
}
});
});
}
}
</script>
</head>
<body>
<div id="loginDialog" class="easyui-dialog" title="Chat Login" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
<form id="loginForm" method="post">
<table cellpadding="5">
<tr><td>Name:</td><td><input class="easyui-validatebox" type="text" id="loginname" name="name" data-options="required:true"></input></td></tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Login</a>
</div>
<div style="text-align:center;padding:5px" id="loginError">
Username already in use.
</div>
<script>
$('#loginForm').submit(submitForm);
function submitForm(event) {
console.log("DEBUG login: " + channel);
channel.objects.chatserver.login($('#loginname').val(), function(arg) {
console.log("DEBUG login response: " + arg);
if (arg === true) {
$('#loginError').hide();
$('#loginDialog').dialog('close');
window.loggedin = true;
} else {
$('#loginError').show();
}
});
console.log($('#loginname').val());
if (event !== undefined)
event.preventDefault();
return false;
}
</script>
</div>
<div class="easyui-layout" style="width:500px;height:300px;">
<div data-options="region:'east',split:true" title="Users" id="userlist" style="width:100px;">
</div>
<div data-options="region:'south',split:true" style="height:50px;">
<form id="messageForm">
<input class="easyui-validatebox" type="text" id="message" name="name" style="width: 97%"></input>
</form>
</div>
<div data-options="region:'center'" id="chat">
</div>
<script>
$('#messageForm').submit(submitMessage);
function submitMessage(event) {
channel.objects.chatserver.sendMessage($('#loginname').val(), $('#message').val());
$('#message').val('');
if (event !== undefined)
event.preventDefault();
return false;
}
</script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#loginError').hide();
});
</script>
</body>
</html>
