diff --git a/docs/client-server/howto.rst b/docs/client-server/howto.rst
index 433277000..9ef4cb5f7 100644
--- a/docs/client-server/howto.rst
+++ b/docs/client-server/howto.rst
@@ -121,6 +121,8 @@ these rules may specify if you require an **invitation** from someone already in
the room in order to **join the room**. In addition, you may also be able to
join a room **via a room alias** if one was set up.
+**Try out the fiddle: http://jsfiddle.net/og1xokcr/**
+
Inviting a user to a room
-------------------------
You can directly invite a user to a room like so::
@@ -164,6 +166,8 @@ An event is some interesting piece of data that a client may be interested in.
It can be a message in a room, a room invite, etc. There are many different ways
of getting events, depending on what the client already knows.
+**Try out the fiddle: http://jsfiddle.net/5uk4dqe2/**
+
Getting all state
-----------------
If the client doesn't know any information on the rooms the user is
@@ -288,3 +292,12 @@ and then resume getting live state from a newer end token.
NB: The timeout can be changed by adding a ``timeout`` query parameter, which is
in milliseconds. A timeout of 0 will not block.
+
+Example application
+-------------------
+The following example demonstrates registration and login, live event streaming,
+creating and joining rooms, sending messages, getting member lists and getting
+historical messages for a room. This covers most functionality of a messaging
+application.
+
+**Try out the fiddle: http://jsfiddle.net/L8r3o1wr/**
diff --git a/jsfiddles/example_app/demo.css b/jsfiddles/example_app/demo.css
new file mode 100644
index 000000000..4c1e157cc
--- /dev/null
+++ b/jsfiddles/example_app/demo.css
@@ -0,0 +1,43 @@
+.roomListDashboard, .roomContents, .sendMessageForm {
+ visibility: hidden;
+}
+
+.roomList {
+ background-color: #909090;
+}
+
+.messageWrapper {
+ background-color: #EEEEEE;
+ height: 400px;
+ overflow: scroll;
+}
+
+.membersWrapper {
+ background-color: #EEEEEE;
+ height: 200px;
+ width: 50%;
+ overflow: scroll;
+}
+
+.textEntry {
+ width: 100%
+}
+
+p {
+ font-family: monospace;
+}
+
+table
+{
+ border-spacing:5px;
+}
+
+th,td
+{
+ padding:5px;
+}
+
+.roomList tr:not(:first-child):hover {
+ background-color: orange;
+ cursor: pointer;
+}
diff --git a/jsfiddles/example_app/demo.html b/jsfiddles/example_app/demo.html
new file mode 100644
index 000000000..0af946f6b
--- /dev/null
+++ b/jsfiddles/example_app/demo.html
@@ -0,0 +1,56 @@
+
+
Matrix example application: Requires a local home server running at http://localhost:8080
+
+
+
+
+
+
+
+
+
+ Room |
+ My state |
+ Latest message |
+
+
+
+
+
+
+
+
+
diff --git a/jsfiddles/example_app/demo.js b/jsfiddles/example_app/demo.js
new file mode 100644
index 000000000..295597f0f
--- /dev/null
+++ b/jsfiddles/example_app/demo.js
@@ -0,0 +1,303 @@
+var accountInfo = {};
+
+var eventStreamInfo = {
+ from: "END"
+};
+
+var roomInfo = [];
+var memberInfo = [];
+var viewingRoomId;
+
+// ************** Event Streaming **************
+var longpollEventStream = function() {
+ var url = "http://localhost:8080/matrix/client/api/v1/events?access_token=$token&from=$from";
+ url = url.replace("$token", accountInfo.access_token);
+ url = url.replace("$from", eventStreamInfo.from);
+
+ $.getJSON(url, function(data) {
+ eventStreamInfo.from = data.end;
+
+ var hasNewLatestMessage = false;
+ var updatedMemberList = false;
+ var i=0;
+ var j=0;
+ for (i=0; i 0) {
+ data.room_alias_name = roomAlias;
+ }
+ $.ajax({
+ url: "http://localhost:8080/matrix/client/api/v1/rooms?access_token="+accountInfo.access_token,
+ type: "POST",
+ contentType: "application/json; charset=utf-8",
+ data: JSON.stringify(data),
+ dataType: "json",
+ success: function(response) {
+ $("#roomAlias").val("");
+ response.membership = "join"; // you are automatically joined into every room you make.
+ response.latest_message = "";
+
+ roomInfo.push(response);
+ setRooms(roomInfo);
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+});
+
+// ************** Getting current state **************
+var getCurrentRoomList = function() {
+ var url = "http://localhost:8080/matrix/client/api/v1/im/sync?access_token=" + accountInfo.access_token + "&from=END&to=START&limit=1";
+ $.getJSON(url, function(data) {
+ for (var i=0; i=0; --i) {
+ addMessage(data.chunk[i]);
+ }
+ });
+};
+
+var getMemberList = function(roomId) {
+ $("#members").empty();
+ memberInfo = [];
+ var url = "http://localhost:8080/matrix/client/api/v1/rooms/" + roomId + "/members/list?access_token=" + accountInfo.access_token;
+ $.getJSON(url, function(data) {
+ for (var i=0; i"+roomList[i].room_id+"" +
+ ""+roomList[i].membership+" | " +
+ ""+roomList[i].latest_message+" | " +
+ "";
+ rows += row;
+ }
+
+ $("#rooms").append(rows);
+
+ $('#rooms').find("tr").click(function(){
+ var roomId = $(this).find('td:eq(0)').text();
+ var membership = $(this).find('td:eq(1)').text();
+ if (membership !== "join") {
+ console.log("Joining room " + roomId);
+ var url = "http://localhost:8080/matrix/client/api/v1/rooms/$roomid/members/$user/state?access_token=$token";
+ url = url.replace("$token", accountInfo.access_token);
+ url = url.replace("$roomid", encodeURIComponent(roomId));
+ url = url.replace("$user", encodeURIComponent(accountInfo.user_id));
+ $.ajax({
+ url: url,
+ type: "PUT",
+ contentType: "application/json; charset=utf-8",
+ data: JSON.stringify({membership: "join"}),
+ dataType: "json",
+ success: function(data) {
+ loadRoomContent(roomId);
+ getCurrentRoomList();
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+ }
+ else {
+ loadRoomContent(roomId);
+ }
+ });
+};
+
+var addMessage = function(data) {
+ var row = "" +
+ ""+data.user_id+" | " +
+ ""+data.content.body+" | " +
+ "
";
+ $("#messages").append(row);
+};
+
+var addMember = function(data) {
+ var row = "" +
+ ""+data.target_user_id+" | " +
+ ""+data.content.membership+" | " +
+ "
";
+ $("#members").append(row);
+};
+