API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 24th, 2018
51
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.78 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Toiney Chat Client</title>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <link rel="shortcut icon" href="favicon.ico">
  10. <!-- will's pimpin css imports -->
  11. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  12. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  13. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  14.  
  15. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  17. <style>
  18. body{
  19. background:#252830;
  20. margin:0px;
  21. height:900px;
  22. color:#cfd2da;
  23. font-family: sans-serif;
  24. height:100%;
  25. width:100%;
  26. margin-left:1%;
  27.  
  28. }
  29. btn{
  30. color:#cfd2da;
  31. }
  32. h1,p,h2,h3{
  33. color:#cfd2da;
  34. }
  35. .chat_box{
  36. position:fixed;
  37. right:20px;
  38. bottom:0px;
  39. width:250px;
  40. }
  41. .chat_body{
  42. background:white;
  43. height:400px;
  44. padding:5px 0px;
  45. }
  46.  
  47. .chat_head,.msg_head{
  48. background:#f39c12;
  49. color:white;
  50. padding:15px;
  51. font-weight:bold;
  52. cursor:pointer;
  53. border-radius:5px 5px 0px 0px;
  54. }
  55.  
  56. .msg_box{
  57. position:fixed;
  58. bottom:-5px;
  59. width:250px;
  60. background:white;
  61. border-radius:5px 5px 0px 0px;
  62. }
  63.  
  64. .msg_head{
  65. background:#3498db;
  66. }
  67.  
  68. .msg_body{
  69. background:white;
  70. height:200px;
  71. font-size:12px;
  72. padding:15px;
  73. overflow:auto;
  74. overflow-x: hidden;
  75. }
  76. .msg_input{
  77. width:100%;
  78. border: 1px solid white;
  79. border-top:1px solid #DDDDDD;
  80. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  81. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  82. box-sizing: border-box;
  83. }
  84.  
  85. .close{
  86. float:right;
  87. cursor:pointer;
  88. }
  89. .minimize{
  90. float:right;
  91. cursor:pointer;
  92. padding-right:5px;
  93.  
  94. }
  95.  
  96. .user{
  97. position:relative;
  98. padding:10px 30px;
  99. }
  100. .user:hover{
  101. background:#f8f8f8;
  102. cursor:pointer;
  103.  
  104. }
  105. .user:before{
  106. content:'';
  107. position:absolute;
  108. background:#2ecc71;
  109. height:10px;
  110. width:10px;
  111. left:10px;
  112. top:15px;
  113. border-radius:6px;
  114. }
  115.  
  116. .msg_a{
  117. position:relative;
  118. background:#FDE4CE;
  119. padding:10px;
  120. min-height:10px;
  121. margin-bottom:5px;
  122. margin-right:10px;
  123. border-radius:5px;
  124. }
  125. .msg_a:before{
  126. content:"";
  127. position:absolute;
  128. width:0px;
  129. height:0px;
  130. border: 10px solid;
  131. border-color: transparent #FDE4CE transparent transparent;
  132. left:-20px;
  133. top:7px;
  134. }
  135.  
  136.  
  137. .msg_b{
  138. background:#EEF2E7;
  139. padding:10px;
  140. min-height:15px;
  141. margin-bottom:5px;
  142. position:relative;
  143. margin-left:10px;
  144. border-radius:5px;
  145. word-wrap: break-word;
  146. }
  147. .msg_b:after{
  148. content:"";
  149. position:absolute;
  150. width:0px;
  151. height:0px;
  152. border: 10px solid;
  153. border-color: transparent transparent transparent #EEF2E7;
  154. right:-20px;
  155. top:7px;
  156. }
  157. /* Dropdown Button */
  158. .dropbtn {
  159. background-color: #3498DB;
  160. color: white;
  161. padding: 16px;
  162. font-size: 16px;
  163. border: none;
  164. cursor: pointer;
  165. }
  166.  
  167. /* Dropdown button on hover & focus */
  168. .dropbtn:hover, .dropbtn:focus {
  169. background-color: #2980B9;
  170. }
  171.  
  172. /* The container <div> - needed to position the dropdown content */
  173. .dropdown {
  174. position: relative;
  175. display: inline-block;
  176. }
  177.  
  178. /* Dropdown Content (Hidden by Default) */
  179. .dropdown-content {
  180. display: none;
  181. position: absolute;
  182. background-color: #f1f1f1;
  183. min-width: 160px;
  184. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  185. z-index: 1;
  186. }
  187.  
  188. /* Links inside the dropdown */
  189. .dropdown-content a {
  190. color: black;
  191. padding: 12px 16px;
  192. text-decoration: none;
  193. display: block;
  194. }
  195.  
  196. /* Change color of dropdown links on hover */
  197. .dropdown-content a:hover {background-color: #ddd}
  198.  
  199. /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  200. .show {display:block;}
  201. </style>
  202.  
  203. </head>
  204. <body>
  205. <h1>Toiney Chat Client</h1>
  206. <p>
  207. Host: <input id="webSocketHost" class="form-control" style="width:25%" type="text" value="www.teenchat.com/ws"/>
  208. </p>
  209. <p>
  210. <button class="btn btn-success" onClick="initWebSocket();">Connect</button>
  211. <button class="btn btn-danger" id="disconnectButton" onClick="stopWebSocket();" disabled>Disconnect</button>
  212. <button class="btn btn-warning" onClick="checkSocket();">State</button>
  213. <button class="btn btn-primary" id ="reqBtn" onClick="req_list({{ data }});">Send Requirements</button>
  214. </p>
  215. <p>
  216. <textarea id="debugTextArea" class="form-control" rows="3" style="width:40%" readonly></textarea>
  217. </p>
  218. <p>
  219. <textarea id="chatTextArea" class="form-control" style="width:40%;" readonly></textarea>
  220. </p>
  221. <p>
  222. <input type="text" id="inputText" class="form-control" style="width:40%;" onkeydown="if(event.keyCode===13)sendMessage();"/>
  223. <button id="sendButton" class="btn btn-success" onClick="sendMessage();" disabled>Send</button>
  224. </p>
  225. <div class="dropdown">
  226. <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  227. User
  228. </button>
  229. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  230. <a class="dropdown-item" href="#">Action</a>
  231. <a class="dropdown-item" href="#">Another action</a>
  232. <a class="dropdown-item" href="#">Something else here</a>
  233. </div>
  234. </div>
  235.  
  236.  
  237. <script type="text/javascript">
  238. var debugTextArea = document.getElementById("debugTextArea");
  239. var chatTextArea = document.getElementById("chatTextArea");
  240.  
  241. function debug(message) {
  242. debugTextArea.value += message + "\n";
  243. debugTextArea.scrollTop = debugTextArea.scrollHeight;
  244. }
  245.  
  246. function format(msg) {
  247. chatTextArea.value += msg + "\n";
  248. chatTextArea.scrollTop = chatTextArea.scrollHeight;
  249. }
  250.  
  251. function sendMessage() {
  252. var strToSend = document.getElementById("inputText").value;
  253. if ( websocket != null) {
  254. if (strToSend === '!main') {
  255. strToSend.replace("!main", "");
  256. document.getElementById("inputText").value = "";
  257. websocket.send( '{"Post": "' + 'lol' + '", "RoomID": "rdqlcurrmpk", "C": "post"}' );
  258. console.log( "string sent :", '"'+strToSend+'"' );
  259. format(strToSend);
  260. } else {
  261. document.getElementById("inputText").value = "";
  262. websocket.send(strToSend);
  263. console.log("string sent :", '"' + strToSend + '"');
  264. debug(strToSend);
  265. }
  266. }
  267. }
  268.  
  269. var websocket = null;
  270.  
  271. function initWebSocket() {
  272. try {
  273. if (typeof MozWebSocket === 'function')
  274. WebSocket = MozWebSocket;
  275. if ( websocket && websocket.readyState === 1 )
  276. websocket.close();
  277. var wsUri = "ws://" + document.getElementById("webSocketHost").value;
  278. websocket = new WebSocket( wsUri );
  279. websocket.onopen = function (evt) {
  280. debug("CONNECTED");
  281. document.getElementById("disconnectButton").disabled = false;
  282. document.getElementById("sendButton").disabled = false;
  283. document.getElementById("reqBtn").disabled = false;
  284. };
  285. websocket.onclose = function (evt) {
  286. debug("DISCONNECTED");
  287. document.getElementById("disconnectButton").disabled = true;
  288. document.getElementById("sendButton").disabled = true;
  289. document.getElementById("reqBtn").disabled = true;
  290. };
  291. websocket.onmessage = function (evt) {
  292. console.log( "Message received :", evt.data );
  293. debug( evt.data );
  294. // resp will be sent to format textbox
  295. var resp = JSON.parse(evt.data);
  296. if (resp !== undefined) {
  297. var options = [
  298. set0 = [resp['UID']]
  299. ];
  300.  
  301. function makeUL(array) {
  302. // Create the list element:
  303. var list = document.createElement('ul');
  304.  
  305. for(var i = 0; i < array.length; i++) {
  306. // Create the list item:
  307. var item = document.createElement('li');
  308. item.setAttribute("id", resp['UID']);
  309. // Set its contents:
  310. item.appendChild(document.createTextNode(array[i]));
  311.  
  312. // Add it to the list:
  313. list.appendChild(item);
  314. }
  315.  
  316. // Finally, return the constructed list:
  317. return list;
  318. }
  319.  
  320. // Add the contents of options[0] to #myDropdown:
  321. document.getElementById('chatTabs').appendChild(makeUL(options[0]));
  322. }
  323. else {
  324. format("unlucky")
  325. }
  326. };
  327. websocket.onerror = function (evt) {
  328. debug('ERROR: ' + evt.data);
  329. };
  330. } catch (exception) {
  331. debug('ERROR: ' + exception);
  332. }
  333. }
  334.  
  335. function req_list(data) {
  336. if (websocket != null) {
  337. debug("Sending REQ LIST");
  338. setTimeout(function () {
  339. arrayLength = data.length;
  340. for (var i = 0; i < arrayLength; i++) {
  341. websocket.send(data[i]);
  342. }
  343. }, 1000)
  344. }
  345. }
  346.  
  347. function stopWebSocket() {
  348. if (websocket)
  349. websocket.close();
  350. }
  351.  
  352. function checkSocket() {
  353. if (websocket != null) {
  354. var stateStr;
  355. switch (websocket.readyState) {
  356. case 0: {
  357. stateStr = "CONNECTING";
  358. break;
  359. }
  360. case 1: {
  361. stateStr = "OPEN";
  362. break;
  363. }
  364. case 2: {
  365. stateStr = "CLOSING";
  366. break;
  367. }
  368. case 3: {
  369. stateStr = "CLOSED";
  370. break;
  371. }
  372. default: {
  373. stateStr = "UNKNOWN";
  374. break;
  375. }
  376. }
  377. debug("WebSocket state = " + websocket.readyState + " ( " + stateStr + " )");
  378. } else {
  379. debug("WebSocket is null");
  380. }
  381. }
  382. /* When the user clicks on the button,
  383. toggle between hiding and showing the dropdown content */
  384. function myFunction() {
  385. document.getElementById("myDropdown").classList.toggle("show");
  386. }
  387.  
  388. // Close the dropdown menu if the user clicks outside of it
  389. window.onclick = function(event) {
  390. if (!event.target.matches('.dropbtn')) {
  391.  
  392. var dropdowns = document.getElementsByClassName("dropdown-content");
  393. var i;
  394. for (i = 0; i < dropdowns.length; i++) {
  395. var openDropdown = dropdowns[i];
  396. if (openDropdown.classList.contains('show')) {
  397. openDropdown.classList.remove('show');
  398. }
  399. }
  400. }
  401. }
  402. $(document).ready(function(){
  403.  
  404. $('.chat_head').click(function(){
  405. $('.chat_body').slideToggle('slow');
  406. });
  407. $('.msg_head').click(function(){
  408. $('.msg_wrap').slideToggle('slow');
  409. });
  410.  
  411. $('.close').click(function(){
  412. $('.msg_box').hide();
  413. });
  414.  
  415. $('.user').click(function(){
  416.  
  417. $('.msg_wrap').show();
  418. $('.msg_box').show();
  419. });
  420.  
  421. $('textarea').keypress(
  422. function(e){
  423. if (e.keyCode == 13) {
  424. e.preventDefault();
  425. var msg = $(this).val();
  426. $(this).val('');
  427. if(msg!='')
  428. $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
  429. $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
  430. }
  431. });
  432.  
  433. });
  434. </script>
  435.  
  436. <div class="chat_box">
  437. <div class="chat_head"> Chat Box</div>
  438. <div class="chat_body">
  439. <div id="chatTabs"></div>
  440. </div>
  441. </div>
  442.  
  443. <div class="msg_box" style="right:290px">
  444. <div class="msg_head">
  445. <div class="close">x</div>
  446. </div>
  447. <div class="msg_wrap">
  448. <div class="msg_body">
  449. <div class="msg_b" id="msgBody"></div>
  450. <div class="msg_push"></div>
  451. </div>
  452. <div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>
  453. </div>
  454.  
  455. </div>
  456. </body>
  457. </html>
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!