API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 25th, 2016
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.72 KB | None | 0 0
raw download clone embed print report
  1. index.html
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <title>Vert.X</title>
  10. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  11. <link rel="stylesheet" type="text/css" href="css/style.css" />
  12. <link rel="stylesheet" type="text/css" href="css/component.css" />
  13. <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script>
  14. <script src="vertxbus.min.js"></script>
  15. <script src="vertxhandler.js"></script>
  16.  
  17. <!--[if IE]>
  18. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  19. <![endif]-->
  20. </head>
  21. <body>
  22. <div class="container">
  23. <header class="clearfix">
  24.  
  25. <a href="" class="navbar-brand"><img alt="Brand" width="162" src="img/logo-sm.png"></a>
  26.  
  27. </header>
  28. <div id="tabs" class="tabs">
  29. <nav>
  30. <ul>
  31. <li><a href="#section-1" class="login"><span>Login</span></a></li>
  32. <li id="register-btn"><a href="#section-2" class="Register"><span>Register</span></a></li>
  33. <li><a href="#section-3" class="Chat"><span>Chat</span></a></li>
  34.  
  35. </ul>
  36. </nav>
  37.  
  38. <div class="content">
  39. <section id="section-1">
  40.  
  41. <div id="signInContainer" class="mediabox">
  42. <h4>Login</h4>
  43. <input name="userName" class="form-control" type="text" placeholder="User Name">
  44. <input name="password" class="form-control" type="password" placeholder="Password">
  45. <input id="signIn" class="btn" type="button" value="Submit" data-target="#section-3">
  46. <p><a href="#section-2" role="tab" data-toggle="tab" id="register-link" style=" color: #782b90;"> click here to register</a></p>
  47. <div class="power">
  48. <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
  49. </div>
  50. </div>
  51.  
  52. </section>
  53. <section id="section-2">
  54. <div class="mediabox">
  55. <h4>Register</h4>
  56. <form class="form">
  57. <input class="form-control" type="text" placeholder="User Name">
  58. <input class="form-control" type="text" placeholder="Email">
  59.  
  60. <input class="form-control" type="password" placeholder="Password">
  61. <input class="form-control" type="password" placeholder="Confirm Password">
  62.  
  63. <input class="btn" type="button" value="Submit">
  64. </form>
  65. <div class="power">
  66. <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
  67. </div>
  68. </div>
  69.  
  70. </section>
  71. <section id="section-3" style="padding-left:0em;">
  72. <div class="chatbox" style=" ">
  73. <div class="container-fluid">
  74. <div class="row">
  75. <div id="userListContainer" class="col-md-2 col-xs-4 col-sm-2" style="border-right:1px solid #782b90; height:550px; padding-left:0px; padding-right:0px;">
  76. Online users
  77. </div>
  78. <div class="col-md-10 col-xs-8 col-sm-10" style="padding-left:0em;">
  79.  
  80. <div class="container-fluid">
  81. <div class="row">
  82. <div class="col-md-12 col-sm-12 col-xs-12" style="margin-left:8px; margin-top:10px; padding-left:0px; padding-right:0px; ">
  83. <table id="chatHistory" class="table table-bordered">
  84. </table>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="container-fluid">
  89. <div class="row">
  90. <div class="col-md-12">
  91. <form class="form" style="margin-bottom:20px;">
  92. <div class="input-group">
  93. <input id="newChat" type="text" class="form-control input-lg" aria-describedby="send-addon" required autofocus>
  94. <span style="color:#fff;background-color: #782b90; border-color: #782b90;" class="btn input-group-addon input-lg" id="sendChat">Send</span>
  95. </div>
  96. </form>
  97.  
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102.  
  103. <div class="chatpower">
  104. <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
  105. </div>
  106. </div>
  107.  
  108. </div>
  109.  
  110.  
  111.  
  112.  
  113. </div>
  114.  
  115. </section>
  116.  
  117.  
  118. </div><!-- /content -->
  119. </div><!-- /tabs -->
  120.  
  121. </div>
  122. <script src="js/vertx.js"></script>
  123.  
  124. <script>
  125. new CBPFWTabs(document.getElementById('tabs'));
  126. </script>
  127. <script src="js/jquery-1.10.2.js"></script>
  128. <script src="js/bootstrap.min.js"></script>
  129. <script>
  130. $('#register-link').click(function () {
  131. $('#register-btn').trigger('click');
  132. });
  133. </script>
  134. </body>
  135. </html>
  136. ____________________________________________________________________________________________
  137. vertxhandler.js
  138.  
  139. window.onload = function () {
  140. var eventBus = new vertx.EventBus("http://localhost:8080/chat");
  141. var userName = document.querySelector("input[name=userName]");
  142. var password = document.querySelector("input[name=password]");
  143. var email = document.querySelector("input[name=email]");
  144. var userListContainer = document.getElementById("userListContainer");
  145. var chatContainer = document.getElementById("chatContainer");
  146. var chatHistory = document.getElementById("chatHistory");
  147. var newChat = document.getElementById("newChat");
  148. var signInContainer = document.getElementById("signInContainer");
  149.  
  150. eventBus.onopen = function () {
  151. eventBus.registerHandler("users/signedIn", function (message) {
  152. userListContainer.innerHTML += "<div>" + message.userName + "</div>";
  153. });
  154.  
  155. document.getElementById("register").addEventListener("click", function (event) {
  156. eventBus.send("users/register"), {
  157. userName: userName.value,
  158. email: email.value,
  159. password: password.value
  160. }, function (reply) {
  161. if (reply.status === 200) {
  162.  
  163. } else if (reply.status === 120) {
  164.  
  165. }
  166. }
  167. }, false);
  168.  
  169. document.getElementById("signIn").addEventListener("click", function (event) {
  170. eventBus.send("users/signIn", {
  171. userName: userName.value, password: password.value
  172. }, function (reply) {
  173. if (reply.status === 200) {
  174. document.getElementById("sendChat").addEventListener("click", function () {
  175. var text = newChat.value;
  176. if (text.substring(0, 1) === ".") {
  177. var args = text.split(' ');
  178. eventBus.send("commands/perform", {
  179. userName: userName.value,
  180. command: args[0],
  181. arg1: args[1]
  182. });
  183. }
  184. eventBus.send("messages/post", {
  185. userName: userName.value,
  186. text: text
  187. });
  188. newChat.value = "";
  189. }, false);
  190.  
  191. eventBus.registerHandler("messages/posted", function (message) {
  192. //chatHistory.innerHTML += addToTable(message.userName, message.text);
  193. //var table = document.getElementById("elementID");
  194. //Callum method
  195. var row = chatHistory.insertRow(0);
  196. var cell1 = row.insertCell(0);
  197. cell1.innerHTML = "put in timestamp here";
  198. });
  199. }
  200. });
  201. }, false);
  202.  
  203. };
  204. };
  205.  
  206. function addToTable(username, message) {
  207. //Jon method
  208. return "<tr><td class=\"col-md-3 col-sm-3 col-xs-4\">" + username + "</td><td class=\"col-md-9 col-sm-9 col-xs-8\">" + message + "</td></tr>";
  209. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!