<!DOCTYPE html> <html> <head> <title>JMessage PhoneGap Demo</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta name="msapplication-tap-highlight" content="no"/> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script charset="utf-8" src="cordova.js"></script> <script type="text/javascript"> var currentUser; var currentConversation; function onDeviceReady() { window.JMessage.init({'isOpenMessageRoaming': true}); window.JMessage.setDebugMode({'enable': true}); checkIsLogin(); } <!-- Login page --> function register() { var username = $("#registerUsername").val(); var password = $("#registerPassword").val(); window.JMessage.register({'username': username, 'password': password}, () => { alert('Register success'); }, (error) => { alert('Register failed: ' + error.description); }); } function checkIsLogin() { window.JMessage.getMyInfo((myInfo) => { if (myInfo.username != undefined) { this.currentUser = myInfo; gotoConversation(); } }); } function updateUserInfo() { window.JMessage.getMyInfo((myInfo) => { if (myInfo.username != undefined) { this.currentUser = myInfo; $('#myInfoUsername').text(myInfo.username); $('#myInfoNickname').val(myInfo.nickname); $('#myInfoGender').val(myInfo.gender); } }); } function login() { var username = $("#loginUsername").val(); var password = $("#loginPassword").val(); window.JMessage.login({'username': username, 'password': password}, () => { alert("login ok"); window.JMessage.getMyInfo((myInfo) => { if (myInfo != '') { this.currentUser = myInfo; gotoConversation(); } }); }, (error) => { alert("Login failed: " + error.description); }); } function gotoConversation() { $.mobile.navigate("#conversationListPage", {transition: "slide"}); } function gotoRegister() { $.mobile.navigate("#registerPage", {transition: "slide"}); } <!--Conversation list page --> $(document).on("pageshow", "#conversationListPage", () => { updateConversationList(); window.JMessage.addReceiveMessageListener((msg) => { updateConversationList(); }); }); function gotoAddConversation() { $.mobile.navigate("#addConversationPage", {transition: "slide"}); } function updateConversationList() { $('#conversationList').empty().listview('refresh'); window.JMessage.getConversations((conversationArray) => { for (var i = 0; i < conversationArray.length; i++) { insertConversation(conversationArray[i]); } }, (error) => { console.log(error.description) }); } function insertConversation(con) { var title = con.title; var targetName; if (con.conversationType === 'single') { targetName = con.target.username; } else { // group targetName = con.target.name; } var conStr = JSON.stringify(con).replace(/"/g, '"'); var insertString = "<li><a onclick=\"onClickConversationRow('" + conStr + "')\">" + targetName + '</a></li>'; $('#conversationList').append(insertString).listview('refresh'); } function onClickConversationRow(con) { currentConversation = JSON.parse(con); $.mobile.navigate("#conversationPage", {transition: "slide"}); } function naviBack() { $.mobile.navigate("#conversationListPage", {transition: "pop"}); } <!-- Conversation detail page --> var messageArray = []; $(document).on("pageshow", "#conversationPage", () => { window.JMessage.addReceiveMessageListener((msg) => { // 在收到消息后将消息对象加入到消息数组的开头。 messageArray.unshift(msg); refreshConversation(); }); if (currentConversation.conversationType === 'single') { var username = currentConversation.target.username; var appKey = currentConversation.target.appKey; window.JMessage.getHistoryMessages({'type': 'single', 'username': username, 'appKey': appKey, 'from': 0, 'limit': 10}, (msgArr) => { messageArray = msgArr refreshConversation(); }, (error) => { alert("Get history message error: " + error.description); }); } else if (currentConversation.conversationType === 'group') { var groupId = currentConversation.target.id; window.JMessage.getHistoryMessages({'type': 'group', 'groupId': groupId, 'from': 0, 'limit': 10}, (msgArr) => { messageArray = msgArr refreshConversation(); }, (error) => { alert("Get history message error: " + error.description); }); } }); function refreshConversation() { $('#messageList').empty().listview('refresh'); for (var i = 0; i < messageArray.length; i++) { insertMessage(messageArray[i]); } } function insertMessage(msg) { var targetName = msg.target.username; var createTime = msg.createTime; var createTimeStr = new Date(createTime).toLocaleString(); var insertString; if (msg.from.username === currentUser.username) { insertString = '<li style="text-align:right"><span style="font-size:12px">' + createTimeStr + "</span><br>" + msg.from.username + ":" + msg.text + '</li>'; } else { insertString = '<li style="text-align:left" style="font-size:12px">' + createTimeStr + "</span><br>" + msg.from.username + ":" + msg.text + '</li>'; } $('#messageList').append(insertString).listview('refresh'); } function sendMessage() { var username = currentConversation.target.username; var appKey = currentConversation.target.appKey; var messageContent = $('#messageContent').val(); window.JMessage.sendTextMessage({'type': 'single', 'username': username, 'appKey': appKey, 'text': messageContent}, (msg) => { messageArray.unshift(msg); refreshConversation(); }, (error) => { alert("Send message fail: " + error.description); }); } function addConversation() { var username = $("#addConversationText").val(); window.JMessage.createConversation({'type': 'single', 'username': username}, (conversation) => { currentConversation = conversation; alert("OK"); $.mobile.navigate("#conversationPage", {transition: "pop"}); }, (error) => { alert("Create conversation fail: " + error.description); }); } <!-- myInfoPage --> $(document).on("pageshow", "#myInfoPage", () => { $("#myInfoUsername").text(currentUser.username); $("#myInfoNickname").val(currentUser.nickname); $("#myInfoGender").val(currentUser.gender); }); function logout() { window.JMessage.logout(); currentUser = null; $.mobile.navigate("#loginPage"); } function setUserNickname() { var nickname = $("#myInfoNickname").val(); window.JMessage.updateMyInfo({'nickname': nickname}, () => { updateUserInfo(); }, (error) => { alert('Update fail: ' + error.description); }); } function setUserGender() { var gender = $("#myInfoGender").val(); window.JMessage.updateMyInfo({'gender': gender}, () => { updateUserInfo(); }, (error) => { alert('Update fail: ' + error.description); }); } function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } </script> </head> <body onload="onLoad()"> <!-- Login page --> <div data-role="page" id="loginPage"> <div data-role="header"> <h1>Login</h1> </div> <div data-role="content"> <h3>username:</h3> <input type="text" placeholder="username" id="loginUsername"> <h3>password:</h3> <input type="text" placeholder="password" id="loginPassword"> <div><h2></h2></div> <input type="button" onclick="login()" value="login"/> <div><h2></h2></div> <div class="ui-grid-a"> <div class="ui-block-a"> </div> <div class="ui-block-b"> <input type="button" onclick="gotoRegister()" value="register"/> </div> </div> </div> </div> <!-- Register page --> <div data-role="page" id="registerPage"> <div data-role="header"> <a href="#loginPage" data-icon="arrow-l">Back</a> <h1>Register</h1> </div> <div data-role="content"> <h3>username:</h3> <input type="text" placeholder="username" id="registerUsername"> <h3>password:</h3> <input type="text" placeholder="password" id="registerPassword"> <div><h2></h2></div> <input type="button" onclick="register()" value="register"/> </div> </div> <!-- Conversation list --> <div data-role="page" id="conversationListPage"> <div data-role="header"> <h1>ConversationList</h1> <div data-role="navbar"> <ul> <li><a href="#conversationListPage" class="ui-btn-active ui-state-persist">ConversationList</a> </li> <li><a href="#myInfoPage">MyInfo</a></li> </ul> </div> </div> <div> <div data-role="content"> <div class="ui-grid-b"> <div class="ui-block-c"> <input type="button" onclick="gotoAddConversation()" value="add"/> </div> </div> <div> <h4></h4> </div> <ul data-role="listview" id="conversationList"> </ul> </div> </div> </div> <!-- Conversation page --> <div data-role="page" id="conversationPage"> <div data-role="header"> <a href="#conversationListPage" data-icon="arrow-l">Back</a> <h1>Conversation</h1> </div> <div> <div data-role="content"> <div> <input type="text" id="messageContent"/> <input type="button" onclick="sendMessage()" value="发送" data-inline="true"/> </div> <div> <h4></h4> </div> <div> <ul data-role="listview" id="messageList"> </ul> </div> </div> </div> </div> <div data-role="page" id="addConversationPage"> <div data-role="header"> <a href="#conversationListPage" data-icon="arrow-l">Back</a> <h1>添加会话</h1> </div> <div data-role="content"> <div class="ui-grid-b"> <div class="ui-block-c"> </div> </div> <label for="addConversationText">username</label> <input type="text" id="addConversationText"/> <input type="button" onclick="addConversation()" value="确定"/> </div> </div> <!-- my info --> <div data-role="page" id="myInfoPage"> <div data-role="header"> <h1>MyInfo</h1> <div data-role="navbar"> <ul> <li><a href="#conversationListPage">ConversationList</a></li> <li><a href="#myInfoPage" class="ui-btn-active ui-state-persist">MyInfo</a></li> </ul> </div> </div> <div> <div data-role="content"> <div data-role="fieldcontain"> <label>username:</label> <label id="myInfoUsername">null:</label> </div> <label for="myInfoNickname">nickname:</label> <input type="text" name="text-2" id="myInfoNickname" value=""/> <input type="button" onclick="setUserNickname()" value="set nickname"/> <label for="myInfoGender">gender:(male , female , unknown)</label> <input type="text" name="text-3" id="myInfoGender" value=""> <input type="button" onclick="setUserGender()" value="set gender"/> <div data-role="fieldcontain"> <br> <input type="button" onclick="logout()" value="logout" data-theme="e"/> </div> </div> </div> </div> </body> </html>