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

+
+

No account? Register:

+ + + +
+
+

Got an account? Login:

+ + + +
+
+ +
+
+ + +
+ + + + + + + + +
RoomMy stateLatest message
+
+ +
+

Select a room

+
+ + + +
+
+
+ + +
+
+ +
+

Member list:

+
+ + + +
+
+
+ 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); +}; +