Guest User

Untitled

a guest
Sep 25th, 2019
42
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10.  
  11.  
  12. <main>
  13. <header>
  14. <div class="user-count">0</div>
  15. <h1>Tokyo Chat</h1>
  16. </header>
  17.  
  18. <section class="chat">
  19. </section>
  20.  
  21. <form>
  22. <input type="text" placeholder="Say something nice" />
  23. <button>Send</button>
  24. </form>
  25. <style>
  26. /* ./public/style.css */
  27. * {
  28. box-sizing: border-box;
  29. transition: all .3s ease;
  30. }
  31.  
  32. html, body {
  33. background: #eee;
  34. width: 100%;
  35. height: 100%;
  36. margin: 0;
  37. padding: 0;
  38. }
  39.  
  40. main {
  41. width: calc(100% - 20px);
  42. max-width: 500px;
  43. margin: 0 auto;
  44. font-family: Helvetica, Arial, Sans, sans-serif;
  45. }
  46.  
  47. h1, .user-count {
  48. margin: 0;
  49. padding: 10px 0;
  50. font-size: 32px;
  51. }
  52.  
  53. .user-count {
  54. float: right;
  55. }
  56.  
  57. .chat {
  58. content: '';
  59. width: 100%;
  60. height: calc(100vh - 165px);
  61. background: white;
  62. padding: 5px 10px;
  63. }
  64.  
  65. .chat p {
  66. margin: 0 0 5px 0;
  67. }
  68.  
  69. input, button {
  70. width: 100%;
  71. font: inherit;
  72. background: #fff;
  73. border: none;
  74. margin-top: 10px;
  75. padding: 5px 10px;
  76. }
  77.  
  78. button:hover {
  79. cursor: pointer;
  80. background: #ddd;
  81. }
  82.  
  83. @media all and (min-width: 500px) {
  84. .chat {
  85. height: calc(100vh - 140px);
  86. }
  87. input {
  88. width: calc(100% - 160px);
  89. }
  90. button {
  91. float: right;
  92. width: 150px;
  93. }
  94. }
  95. </style>
  96. <script>
  97. // /public/javascript.js
  98.  
  99. // Get the current username from the cookies
  100. var user = cookie.get('user');
  101. if (!user) {
  102.  
  103. // Ask for the username if there is none set already
  104. user = prompt('Choose a username:');
  105. if (!user) {
  106. alert('We cannot work with you like that!');
  107. } else {
  108. // Store it in the cookies for future use
  109. cookie.set('user', user);
  110. }
  111. }
  112. // Connect to the server-side websockets. But there's no server yet!
  113. var socket = io();
  114. // The user count. Can change when someone joins/leaves
  115. socket.on('count', function (data) {
  116. $('.user-count').html(data);
  117. });
  118.  
  119. // When we receive a message
  120. // it will be like { user: 'username', message: 'text' }
  121. socket.on('message', function (data) {
  122. $('.chat').append('<p><strong>' + data.user + '</strong>: ' + data.message + '</p>');
  123. });
  124. // When the form is submitted
  125. $('form').submit(function (e) {
  126. // Avoid submitting it through HTTP
  127. e.preventDefault();
  128.  
  129. // Retrieve the message from the user
  130. var message = $(e.target).find('input').val();
  131.  
  132. // Send the message to the server
  133. socket.emit('message', {
  134. user: cookie.get('user') || 'Anonymous',
  135. message: message
  136. });
  137.  
  138. // Clear the input and focus it for a new message
  139. e.target.reset();
  140. $(e.target).find('input').focus();
  141. });
  142. // ./public/javascript.js
  143.  
  144. // Get the current username from the cookies
  145. var user = cookie.get('user');
  146. if (!user) {
  147.  
  148. // Ask for the username if there is none set already
  149. user = prompt('Choose a username:');
  150. if (!user) {
  151. alert('We cannot work with you like that!');
  152. } else {
  153. // Store it in the cookies for future use
  154. cookie.set('user', user);
  155. }
  156. }
  157.  
  158. var socket = io();
  159.  
  160. // The user count. Can change when someone joins/leaves
  161. socket.on('count', function (data) {
  162. $('.user-count').html(data);
  163. });
  164.  
  165. // When we receive a message
  166. // it will be like { user: 'username', message: 'text' }
  167. socket.on('message', function (data) {
  168. $('.chat').append('<p><strong>' + data.user + '</strong>: ' + data.message + '</p>');
  169. });
  170.  
  171. // When the form is submitted
  172. $('form').submit(function (e) {
  173. // Avoid submitting it through HTTP
  174. e.preventDefault();
  175.  
  176. // Retrieve the message from the user
  177. var message = $(e.target).find('input').val();
  178.  
  179. // Send the message to the server
  180. socket.emit('message', {
  181. user: cookie.get('user') || 'Anonymous',
  182. message: message
  183. });
  184.  
  185. // Clear the input and focus it for a new message
  186. e.target.reset();
  187. $(e.target).find('input').focus();
  188. });
  189. // /index.js
  190.  
  191. const server = require('server');
  192. const { get, socket } = server.router;
  193. const { render } = server.reply;
  194.  
  195. server([
  196. get('/', ctx => render('index.html'))
  197. ]);
  198. // /index.js
  199.  
  200. const server = require('server');
  201. const { get, socket } = server.router;
  202. const { render } = server.reply;
  203.  
  204. const updateCounter = ctx => {
  205. ctx.io.emit('count', ctx.io.sockets.sockets.length);
  206. };
  207.  
  208. server([
  209. // For the initial load render the index.html
  210. get('/', ctx => render('index.html')),
  211.  
  212. // Join/leave the room
  213. socket('connect', updateCounter),
  214. socket('disconnect', updateCounter)
  215. ]);
  216. // /index.js
  217.  
  218. const server = require('server');
  219. const { get, socket } = server.router;
  220. const { render } = server.reply;
  221.  
  222. // Update everyone with the current user count
  223. const updateCounter = ctx => {
  224. ctx.io.emit('count', Object.keys(ctx.io.sockets.sockets).length);
  225. };
  226.  
  227. // Send the new message to everyone
  228. const sendMessage = ctx => {
  229. ctx.io.emit('message', ctx.data);
  230. };
  231.  
  232. server([
  233. get('/', ctx => render('index.html')),
  234. socket('connect', updateCounter),
  235. socket('disconnect', updateCounter),
  236. socket('message', sendMessage)
  237. ]);
  238. </script>
  239. </main>
  240. </body>
  241. </html>
RAW Paste Data