Chat example¶
Simple chat room example. The client code uses Knockout and jQuery.
Server - examples/chat-server.py¶
#!/usr/bin/env python
import example_pythonpath
from example_utils import ExampleServer, ExampleStaticFile
class ChatServer(ExampleServer):
urls = [
('/', ExampleStaticFile('chat.html')),
] + ExampleServer.urls
def rpc_message(self, request):
self.sessions.notify('message', request.data)
if __name__ == '__main__':
ChatServer.main()
Client - examples/chat.html¶
<!DOCTYPE html>
<html>
<head>
<title>Mushroom Chat Example</title>
</head>
<style type="text/css">
#messages {
border: 1px solid #999;
padding: 0.5em;
margin: 1em 0;
height: 20em;
overflow: auto;
}
</style>
<body>
<h1>Welcome to Mushroom Chat Example</h1>
<div id="loading" data-bind="visible: !online()">Loading...</div>
<div style="display: none" data-bind="visible: online">
<div data-bind="visible: !usernameSet()">
<h2>Choose username</h2>
<form id="login-form" data-bind="submit: setUsername">
<input name="username" data-bind="value: username, valueUpdate: 'afterkeydown'">
<input type="submit" value="Ok" data-bind="enable: username() !== ''">
</form>
</div>
<div data-bind="visible: usernameSet">
<h2>Current discussion</h2>
<div id="messages">
<div data-bind="if: messages().length === 0">No chat messages, yet. :-(</div>
<!-- ko foreach: messages -->
<div class="message">
<<span class="username" data-bind="text: username"></span>>
<span class="message" data-bind="text: message"></span>
</div>
<!-- /ko -->
</div>
<form id="form" data-bind="submit: sendMessage">
<input name="message" data-bind="value: message, valueUpdate: 'afterkeydown'">
<input type="submit" value="Send" data-bind="enable: message() !== ''">
</form>
</div>
</div>
<script type="text/javascript" src="/js/mushroom.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/knockout.js"></script>
<script type="text/javascript">
$(function() {
var model = {
username: ko.observable(''),
usernameSet: ko.observable(false),
message: ko.observable(''),
messages: ko.observableArray(),
online: ko.observable(false),
setUsername: function() {
this.usernameSet(true);
},
sendMessage: function() {
client.notify('message', {
username: this.username(),
message: this.message()
});
this.message('');
return false;
}
}
ko.applyBindings(model);
var client = new mushroom.Client({
url: '/'
});
client.signals.connected.connect(function() {
model.online(true);
});
client.method('message', function(request) {
model.messages.push(request.data);
});
client.connect();
});
</script>
</body>
</html>