Advertisement
Guest User

Untitled

a guest
May 25th, 2016
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.49 KB | None | 0 0
  1. <!doctype html>
  2.  
  3.  
  4. <html>
  5.  
  6.  
  7. <head>
  8.  
  9. <title>Lucas Chat</title>
  10.  
  11.  
  12. </head>
  13.  
  14.  
  15.  
  16. <body>
  17. <div id="top">
  18. <h1>Welcome to the chat!</h1>
  19. <br>
  20. <p>Enter in a nickname and a message to get started</p>
  21. <br>
  22. <p id="drop">Scroll up or down to view newer/older messages</p>
  23.  
  24. </div>
  25.  
  26. <ul id="messages">
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34. </ul>
  35.  
  36.  
  37. <form action="">
  38.  
  39. <input id="u" autocomplete="off" placeholder="Nickname"/><input id="m" autocomplete="off" placeholder="Message"/><button>Send</button>
  40. </form>
  41.  
  42.  
  43.  
  44. <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  45. <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  46. <script>
  47. var socket = io();
  48. $('form').submit(function(){
  49.  
  50. if ($('#m').val() != '' && $('#u').val() != '') {
  51.  
  52. socket.emit('send message', {msg:$('#m').val(),user:$('#u').val()});
  53. $('#u').css("display", "none")
  54. $('#m').css("width", "90%")
  55. $("#u").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)")
  56. $("#m").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)")
  57. $('#m').val('');
  58.  
  59. } else if ($('#u').val() === '' && $('#m').val() === '') {
  60. $("#u").css("box-shadow", "0px 0px 15px #ff8989")
  61. $("#m").css("box-shadow", "0px 0px 15px #ff8989")
  62. } else if ($('#u').val() === '' && $('#m').val() != '') {
  63. $("#u").css("box-shadow", "0px 0px 15px #ff8989")
  64. $("#m").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)")
  65. } else if ($('#m').val() === '' && $('#u').val() != '') {
  66. $("#m").css("box-shadow", "0px 0px 15px #ff8989")
  67. $("#u").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)")
  68. }
  69.  
  70. return false;
  71. });
  72. socket.on('receive message', function(msg){
  73. $('#messages').append($('<li>').html(msg));
  74. });
  75. </script>
  76.  
  77.  
  78.  
  79. </body>
  80. </html>
  81.  
  82. var app = require('express')();
  83. var http = require('http').Server(app);
  84. var io = require('socket.io')(http);
  85. var peopleCount = 0;
  86.  
  87. app.get('/', function(req, res){
  88. res.sendFile(__dirname + '/index.html');
  89. });
  90.  
  91. io.on('connection', function(socket){
  92.  
  93. peopleCount++
  94.  
  95. console.log('a user connected | connections: ' + peopleCount)
  96.  
  97. socket.on('disconnect', function(){
  98.  
  99. peopleCount--
  100.  
  101. console.log('a user disconnected | connections: ' + peopleCount)
  102.  
  103. });
  104. });
  105.  
  106.  
  107. io.on('connection', function(socket){
  108. socket.on('send message', function(data){
  109. io.emit('receive message', data.user + ': ' + data.msg);
  110. });
  111. });
  112.  
  113. http.listen(3000, function(){
  114. console.log('listening on *:3000');
  115. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement