API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 15th, 2016
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="keywords" content="registration, register, chat, chatroom"/>
  6. <meta name="robots" content="index, follow"/>
  7. <meta name="author" content="Luigi Vincent"/>
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>Web Chatter</title>
  10. <style>
  11. body {
  12. background-color: #E9EAED;
  13. color: #141823;
  14. }
  15.  
  16. #title {
  17. color: #415E9A;
  18. text-align: center;
  19. }
  20.  
  21. #register-form {
  22. margin-top: 10em;
  23. text-align: center;
  24. }
  25.  
  26. .login {
  27. margin: 0.5em;
  28. border-radius: 0.6em;
  29. color: #ffffff;
  30. cursor: pointer;
  31. font-size: 1em;
  32. background-color: #415E9A;
  33. }
  34. .login:hover {
  35. box-shadow: 0 0 10px #4A66A0;
  36. }
  37. .login:active {
  38. position: relative;
  39. outline: none;
  40. top: 0.05em;
  41. }
  42.  
  43. #login {
  44. margin-left: 6em;
  45. }
  46. .response {
  47. font-weight: bold;
  48. text-align: center;
  49. }
  50. .success {
  51. color: #4A66A0;
  52. }
  53.  
  54. .error {
  55. color: #FFCCCC;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <form id='register-form' method="post">
  61. <h1 id='title'>Welcome to Chatter</h1>
  62. Username: <input type="text" class="input" name="username" id="username" required="required"><br>
  63. Password: <input type="password" class="input" name="password" id="password" style="margin-left: 3px;" required="required"><br>
  64. Re-enter Password: <input type="password" class="input" name="confirm-password" id="confirm-password" style="margin-right: 55px;" required="required"><br>
  65. <input class="login" id="new" type="submit" name="register" value="Register" style="margin-left: 12em;">
  66. </form>
  67. <script src="/assets/sweetalert/dist/sweetalert.min.js"></script>
  68. <link rel="stylesheet" type="text/css" href="/assets/sweetalert/dist/sweetalert.css">
  69. <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  70. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  71. <script>
  72. var socket = io();
  73.  
  74. $('form').submit(function(e) {
  75. e.preventDefault();
  76. if ($('#password').val() === $('#confirm-password').val()) {
  77. socket.emit('registration', $('#username').val(), $('#password').val());
  78. } else {
  79. swal("Oops...", "Passwords do not match", "error");
  80. }
  81. });
  82.  
  83. socket.on('redirect', function(page){
  84. window.location.href = page;
  85. });
  86.  
  87. socket.on('exists', function() {
  88. swal("Sorry", "Username is taken", "error");
  89. });
  90. </script>
  91. </body>
  92. </html>
  93.  
  94. <!DOCTYPE html>
  95. <html>
  96. <head>
  97. <meta charset="utf-8">
  98. <meta name="description" content="A web chatting application by LKX"/>
  99. <meta name="keywords" content="chat, app, application, chatroom"/>
  100. <meta name="robots" content="index, follow"/>
  101. <meta name="author" content="Luigi Vincent, Kerules Fareg, Xiaoding Lin"/>
  102. <meta name="viewport" content="width=device-width, initial-scale=1">
  103. <title>Web Chatter</title>
  104. <style>
  105. body {
  106. background-color: #E9EAED;
  107. color: #141823;
  108. }
  109.  
  110. #title {
  111. color: #415E9A;
  112. text-align: center;
  113. }
  114.  
  115. #login-form {
  116. margin-top: 10em;
  117. text-align: center;
  118. }
  119.  
  120. .login {
  121. margin: 0.5em;
  122. border-radius: 0.6em;
  123. color: #ffffff;
  124. cursor: pointer;
  125. font-size: 1em;
  126. background-color: #415E9A;
  127. }
  128. .login:hover {
  129. box-shadow: 0 0 10px #4A66A0;
  130. }
  131. .login:active {
  132. position: relative;
  133. outline: none;
  134. top: 0.05em;
  135. }
  136.  
  137. #login {
  138. margin-left: 6em;
  139. }
  140. .response {
  141. font-weight: bold;
  142. text-align: center;
  143. }
  144. .success {
  145. color: #4A66A0;
  146. }
  147.  
  148. .error {
  149. color: #FFCCCC;
  150. }
  151. </style>
  152. </head>
  153.  
  154. <body>
  155. <form id='login-form' method=''>
  156. <h1 id='title'>Welcome to Chatter</h1>
  157. Username: <input type="text" class="input" id="username" required="required"><br>
  158. Password: <input type="password" class="input" id="password" style="margin-left: 3px;" required="required"><br>
  159. <input class="login" id="new" type="button" name="register" value="New User">
  160. <input class="login" id="login" type="submit" name="submit" value="Log in">
  161. </form>
  162. <script src="/assets/sweetalert/dist/sweetalert.min.js"></script>
  163. <link rel="stylesheet" type="text/css" href="/assets/sweetalert/dist/sweetalert.css">
  164. <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  165. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  166. <script>
  167. var socket = io();
  168. $('form').submit(function(e) {
  169. e.preventDefault();
  170. socket.emit('login', $('#username').val(), $('#password').val());
  171. });
  172.  
  173. socket.on('redirect', function(page) {
  174. window.location.href = page;
  175. });
  176.  
  177. socket.on('invalid', function() {
  178. swal("Oops...", "Wrong username or password", "error");
  179. });
  180.  
  181. $("#new").click(function() {
  182. socket.emit("register", null);
  183. });
  184. </script>
  185. </body>
  186. </html>
  187.  
  188. <!DOCTYPE html>
  189. <html>
  190. <head>
  191. <title>WebChatter</title>
  192. <style>
  193. * {
  194. margin: 0;
  195. padding: 0;
  196. box-sizing: border-box;
  197. }
  198.  
  199. body {
  200. font: 13px Helvetica, Arial;
  201. background-color: #E9EAED;
  202. color: #141823;
  203. }
  204.  
  205. form {
  206. background: #000;
  207. padding: 3px;
  208. position: fixed;
  209. bottom: 0;
  210. width: 100%;
  211. }
  212.  
  213. form input {
  214. border: 0;
  215. padding: 10px;
  216. width: 89%;
  217. margin-right: .5%;
  218. }
  219.  
  220. form button {
  221. width: 5%;
  222. background: #415E9A;
  223. color: #fff;
  224. border: none;
  225. padding: 10px;
  226. }
  227. form button:hover {
  228. box-shadow: 0 0 10px #4A66A0;
  229. }
  230.  
  231. #messages {
  232. list-style-type: none;
  233. margin: 0;
  234. padding: 0;
  235. }
  236.  
  237. #messages li {
  238. padding: 5px 10px;
  239. }
  240. #messages li:nth-child(odd) {
  241. background: #fff;
  242. }
  243. </style>
  244. </head>
  245. <body>
  246. <ul id="messages"></ul>
  247. <form action="">
  248. <input id="m" autocomplete="off" /><button>Send</button>
  249. <button id="return">Logout</button>
  250. </form>
  251. <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  252. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  253. <script>
  254. var socket = io();
  255. $('form').submit(function(){
  256. socket.emit('chat message', $('#m').val());
  257. $('#m').val('');
  258. return false;
  259. });
  260.  
  261. socket.on('connect', function() {
  262. socket.emit('user connect', null);
  263. });
  264.  
  265. $('#return').click(function () {
  266. window.history.back();
  267. });
  268.  
  269. socket.on('chat message', function(msg) {
  270. $('#messages').append($('<li>').text(msg));
  271. });
  272. </script>
  273. </body>
  274. </html>
  275.  
  276. var app = require('express')();
  277. var http = require('http').Server(app);
  278. var io = require('socket.io')(http);
  279. var serveStatic = require('serve-static');
  280. var connectingUser = [];
  281.  
  282. var mysql = require('mysql');
  283. var connection = mysql.createConnection({
  284. host : 'localhost',
  285. user : 'root',
  286. password : 'password',
  287. database : 'Chatter'
  288. });
  289. connection.connect();
  290.  
  291. app.use('/assets', serveStatic(__dirname + '/node_modules'));
  292. app.use(require('serve-favicon')(__dirname + '/assets/icon.ico'));
  293.  
  294. app.get('/', function(req, res) {
  295. res.sendFile(__dirname + '/index.html');
  296. })
  297.  
  298. app.get('/login', function(req, res) {
  299. res.redirect("/");
  300. })
  301.  
  302. app.get('/register', function(req, res) {
  303. res.sendFile(__dirname + '/registration.html');
  304. })
  305.  
  306. app.get('/app', function(req, res) {
  307. res.sendFile(__dirname + '/app.html');
  308. })
  309.  
  310. io.on('connection', function(socket) {
  311. var user = '';
  312. socket.on('user connect', function() {
  313. retrieveUserList(function(err, userList) {
  314. socket.emit('chat message', userList);
  315. });
  316. user = connectingUser.pop();
  317. });
  318.  
  319. socket.on('chat message', function(msg) {
  320. if (msg.length > 0) {
  321. io.emit('chat message', user + ": " + msg);
  322. }
  323. });
  324.  
  325. socket.on('login', function(username, password) {
  326. isValidUser(username, password, function(err, result) {
  327. if (result) {
  328. connectingUser.push(username);
  329. io.emit('chat message', username + " has logged in.");
  330. socket.emit('redirect', '/app');
  331. } else {
  332. socket.emit('invalid', null);
  333. }
  334. });
  335. });
  336.  
  337. socket.on('register', function() {
  338. socket.emit("redirect", '/register');
  339. });
  340.  
  341. socket.on('registration', function(username, password) {
  342. isExistingUser(username, function(err, result) {
  343. if (result) {
  344. socket.emit('exists', null);
  345. } else {
  346. addUser(username, password);
  347. socket.emit("redirect", '/login');
  348. }
  349. });
  350. });
  351. });
  352.  
  353. http.listen(8080, function(){
  354. console.log('listening on: 8080');
  355. });
  356.  
  357. function addUser(username, password) {
  358. connection.query('INSERT INTO users(username, password) VALUES("'
  359. + username + '", "' + password +'")',
  360. function(err) {
  361. if (err) {
  362. console.error("Error while performing user addition query.");
  363. }
  364. }
  365. );
  366. }
  367.  
  368. function isExistingUser(username, callback) {
  369. connection.query("SELECT username FROM users WHERE username="" + username + """,
  370. function(err, rows) {
  371. if (!err) {
  372. callback(null, rows.length > 0);
  373. } else {
  374. console.error('Error while performing user existential query.');
  375. }
  376. }
  377. );
  378. }
  379.  
  380. function isValidUser(username, password, callback) {
  381. connection.query("SELECT username FROM users WHERE username="" + username
  382. + "" AND password="" + password + """,
  383. function(err, rows) {
  384. if (!err) {
  385. callback(null, rows.length > 0);
  386. } else {
  387. console.error('Error while performing user validation query.');
  388. }
  389. }
  390. );
  391. }
  392.  
  393. function retrieveUserList(callback) {
  394. connection.query("SELECT username FROM users", function(err, rows) {
  395. var list = 'Registered Users: ';
  396. if (!err) {
  397. var listBuilder = '';
  398. for (var i = 0; i < rows.length; i++) {
  399. listBuilder += ', ' + rows[i].username;
  400. }
  401. list += listBuilder.substring(2);
  402. callback(null, list);
  403. } else {
  404. console.error('Error while performing user list query.');
  405. }
  406. });
  407. }
  408.  
  409. {
  410. "name": "socket-chatting-app",
  411. "version": "0.0.6",
  412. "description": "web chatter",
  413. "dependencies": {
  414. "express": "^4.10.2",
  415. "socket.io": "^1.4.5",
  416. "mysql": "^2.5.4"
  417. }
  418. }
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!