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">
			&lt;<span class="username" data-bind="text: username"></span>&gt;
			<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>