David A. Windham
david
/
chat
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

socket.io chat

windhamdavid 8 years ago
parent
19b8244687
commit
08542f7101
8 changed files with 539 additions and 1 deletions
Unified View Show Diff Stats
  1. 5 0
      .gitignore
  2. 2 1
      README.md
  3. 75 0
      index.js
  4. 13 0
      package.json
  5. 28 0
      public/index.html
  6. 1 0
      public/jquery-1.12.4.min.js
  7. 266 0
      public/main.js
  8. 149 0
      public/style.css

+ 5 - 0
.gitignore
View File 

@@ -0,0 +1,5 @@
 
+.DS_Store
 
+log/*
 
+*.log
 
+npm-debug.log*
 
+node_modules

+ 2 - 1
README.md
View File 

@@ -1 +1,2 @@
 
-# chat
 
+##### socket.io chat
 
+[chat.davidawindham.com](http://chat.davidawindham.com)

+ 75 - 0
index.js
View File 

@@ -0,0 +1,75 @@
 
+// Setup basic express server
 
+var express = require('express');
 
+var app = express();
 
+var server = require('http').createServer(app);
 
+var io = require('socket.io')(server);
 
+var port = process.env.PORT || 8080;
 
+
 
+server.listen(port, function () {
 
+  console.log('Server listening at port %d', port);
 
+});
 
+
 
+// Routing
 
+app.use(express.static(__dirname + '/public'));
 
+
 
+// Chatroom
 
+
 
+var numUsers = 0;
 
+
 
+io.on('connection', function (socket) {
 
+  var addedUser = false;
 
+
 
+  // when the client emits 'new message', this listens and executes
 
+  socket.on('new message', function (data) {
 
+    // we tell the client to execute 'new message'
 
+    socket.broadcast.emit('new message', {
 
+      username: socket.username,
 
+      message: data
 
+    });
 
+  });
 
+
 
+  // when the client emits 'add user', this listens and executes
 
+  socket.on('add user', function (username) {
 
+    if (addedUser) return;
 
+
 
+    // we store the username in the socket session for this client
 
+    socket.username = username;
 
+    ++numUsers;
 
+    addedUser = true;
 
+    socket.emit('login', {
 
+      numUsers: numUsers
 
+    });
 
+    // echo globally (all clients) that a person has connected
 
+    socket.broadcast.emit('user joined', {
 
+      username: socket.username,
 
+      numUsers: numUsers
 
+    });
 
+  });
 
+
 
+  // when the client emits 'typing', we broadcast it to others
 
+  socket.on('typing', function () {
 
+    socket.broadcast.emit('typing', {
 
+      username: socket.username
 
+    });
 
+  });
 
+
 
+  // when the client emits 'stop typing', we broadcast it to others
 
+  socket.on('stop typing', function () {
 
+    socket.broadcast.emit('stop typing', {
 
+      username: socket.username
 
+    });
 
+  });
 
+
 
+  // when the user disconnects.. perform this
 
+  socket.on('disconnect', function () {
 
+    if (addedUser) {
 
+      --numUsers;
 
+
 
+      // echo globally that this client has left
 
+      socket.broadcast.emit('user left', {
 
+        username: socket.username,
 
+        numUsers: numUsers
 
+      });
 
+    }
 
+  });
 
+});

+ 13 - 0
package.json
View File 

@@ -0,0 +1,13 @@
 
+{
 
+	"name": "chat.davidawindham.com",
 
+	"version": "0.0.1",
 
+	"description": "socket.io chat",
 
+	"main": "index.js",
 
+	"author": "David A. Windham",
 
+	"private": true,
 
+	"license": "BSD",
 
+	"dependencies": {
 
+		"socket.io": "1.4.6",
 
+		"express": "4.13.4"
 
+	}
 
+}

+ 28 - 0
public/index.html
View File 

@@ -0,0 +1,28 @@
 
+<!doctype html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <title>Chat | David A. Windham</title>
 
+  <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+  <ul class="pages">
 
+    <li class="chat page">
 
+      <div class="chatArea">
 
+        <ul class="messages"></ul>
 
+      </div>
 
+      <input class="inputMessage" placeholder="Type here..."/>
 
+    </li>
 
+    <li class="login page">
 
+      <div class="form">
 
+        <h3 class="title">What's your name?</h3>
 
+        <input class="usernameInput" type="text" maxlength="14" />
 
+      </div>
 
+    </li>
 
+  </ul>
 
+
 
+  <script src="jquery-1.12.4.min.js"></script>
 
+  <script src="/socket.io/socket.io.js"></script>
 
+  <script src="/main.js"></script>
 
+</body>
 
+</html>

File diff suppressed because it is too large
+ 1 - 0
public/jquery-1.12.4.min.js


+ 266 - 0
public/main.js
View File 

@@ -0,0 +1,266 @@
 
+$(function() {
 
+  var FADE_TIME = 150; // ms
 
+  var TYPING_TIMER_LENGTH = 400; // ms
 
+  var COLORS = [
 
+    '#e21400', '#91580f', '#f8a700', '#f78b00',
 
+    '#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
 
+    '#3b88eb', '#3824aa', '#a700ff', '#d300e7'
 
+  ];
 
+
 
+  // Initialize variables
 
+  var $window = $(window);
 
+  var $usernameInput = $('.usernameInput'); // Input for username
 
+  var $messages = $('.messages'); // Messages area
 
+  var $inputMessage = $('.inputMessage'); // Input message input box
 
+
 
+  var $loginPage = $('.login.page'); // The login page
 
+  var $chatPage = $('.chat.page'); // The chatroom page
 
+
 
+  // Prompt for setting a username
 
+  var username;
 
+  var connected = false;
 
+  var typing = false;
 
+  var lastTypingTime;
 
+  var $currentInput = $usernameInput.focus();
 
+
 
+  var socket = io();
 
+
 
+  function addParticipantsMessage (data) {
 
+    var message = '';
 
+    if (data.numUsers === 1) {
 
+      message += "there's 1 participant";
 
+    } else {
 
+      message += "there are " + data.numUsers + " participants";
 
+    }
 
+    log(message);
 
+  }
 
+
 
+  // Sets the client's username
 
+  function setUsername () {
 
+    username = cleanInput($usernameInput.val().trim());
 
+
 
+    // If the username is valid
 
+    if (username) {
 
+      $loginPage.fadeOut();
 
+      $chatPage.show();
 
+      $loginPage.off('click');
 
+      $currentInput = $inputMessage.focus();
 
+
 
+      // Tell the server your username
 
+      socket.emit('add user', username);
 
+    }
 
+  }
 
+
 
+  // Sends a chat message
 
+  function sendMessage () {
 
+    var message = $inputMessage.val();
 
+    // Prevent markup from being injected into the message
 
+    message = cleanInput(message);
 
+    // if there is a non-empty message and a socket connection
 
+    if (message && connected) {
 
+      $inputMessage.val('');
 
+      addChatMessage({
 
+        username: username,
 
+        message: message
 
+      });
 
+      // tell server to execute 'new message' and send along one parameter
 
+      socket.emit('new message', message);
 
+    }
 
+  }
 
+
 
+  // Log a message
 
+  function log (message, options) {
 
+    var $el = $('<li>').addClass('log').text(message);
 
+    addMessageElement($el, options);
 
+  }
 
+
 
+  // Adds the visual chat message to the message list
 
+  function addChatMessage (data, options) {
 
+    // Don't fade the message in if there is an 'X was typing'
 
+    var $typingMessages = getTypingMessages(data);
 
+    options = options || {};
 
+    if ($typingMessages.length !== 0) {
 
+      options.fade = false;
 
+      $typingMessages.remove();
 
+    }
 
+
 
+    var $usernameDiv = $('<span class="username"/>')
 
+      .text(data.username)
 
+      .css('color', getUsernameColor(data.username));
 
+    var $messageBodyDiv = $('<span class="messageBody">')
 
+      .text(data.message);
 
+
 
+    var typingClass = data.typing ? 'typing' : '';
 
+    var $messageDiv = $('<li class="message"/>')
 
+      .data('username', data.username)
 
+      .addClass(typingClass)
 
+      .append($usernameDiv, $messageBodyDiv);
 
+
 
+    addMessageElement($messageDiv, options);
 
+  }
 
+
 
+  // Adds the visual chat typing message
 
+  function addChatTyping (data) {
 
+    data.typing = true;
 
+    data.message = 'is typing';
 
+    addChatMessage(data);
 
+  }
 
+
 
+  // Removes the visual chat typing message
 
+  function removeChatTyping (data) {
 
+    getTypingMessages(data).fadeOut(function () {
 
+      $(this).remove();
 
+    });
 
+  }
 
+
 
+  // Adds a message element to the messages and scrolls to the bottom
 
+  // el - The element to add as a message
 
+  // options.fade - If the element should fade-in (default = true)
 
+  // options.prepend - If the element should prepend
 
+  //   all other messages (default = false)
 
+  function addMessageElement (el, options) {
 
+    var $el = $(el);
 
+
 
+    // Setup default options
 
+    if (!options) {
 
+      options = {};
 
+    }
 
+    if (typeof options.fade === 'undefined') {
 
+      options.fade = true;
 
+    }
 
+    if (typeof options.prepend === 'undefined') {
 
+      options.prepend = false;
 
+    }
 
+
 
+    // Apply options
 
+    if (options.fade) {
 
+      $el.hide().fadeIn(FADE_TIME);
 
+    }
 
+    if (options.prepend) {
 
+      $messages.prepend($el);
 
+    } else {
 
+      $messages.append($el);
 
+    }
 
+    $messages[0].scrollTop = $messages[0].scrollHeight;
 
+  }
 
+
 
+  // Prevents input from having injected markup
 
+  function cleanInput (input) {
 
+    return $('<div/>').text(input).text();
 
+  }
 
+
 
+  // Updates the typing event
 
+  function updateTyping () {
 
+    if (connected) {
 
+      if (!typing) {
 
+        typing = true;
 
+        socket.emit('typing');
 
+      }
 
+      lastTypingTime = (new Date()).getTime();
 
+
 
+      setTimeout(function () {
 
+        var typingTimer = (new Date()).getTime();
 
+        var timeDiff = typingTimer - lastTypingTime;
 
+        if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
 
+          socket.emit('stop typing');
 
+          typing = false;
 
+        }
 
+      }, TYPING_TIMER_LENGTH);
 
+    }
 
+  }
 
+
 
+  // Gets the 'X is typing' messages of a user
 
+  function getTypingMessages (data) {
 
+    return $('.typing.message').filter(function (i) {
 
+      return $(this).data('username') === data.username;
 
+    });
 
+  }
 
+
 
+  // Gets the color of a username through our hash function
 
+  function getUsernameColor (username) {
 
+    // Compute hash code
 
+    var hash = 7;
 
+    for (var i = 0; i < username.length; i++) {
 
+       hash = username.charCodeAt(i) + (hash << 5) - hash;
 
+    }
 
+    // Calculate color
 
+    var index = Math.abs(hash % COLORS.length);
 
+    return COLORS[index];
 
+  }
 
+
 
+  // Keyboard events
 
+
 
+  $window.keydown(function (event) {
 
+    // Auto-focus the current input when a key is typed
 
+    if (!(event.ctrlKey || event.metaKey || event.altKey)) {
 
+      $currentInput.focus();
 
+    }
 
+    // When the client hits ENTER on their keyboard
 
+    if (event.which === 13) {
 
+      if (username) {
 
+        sendMessage();
 
+        socket.emit('stop typing');
 
+        typing = false;
 
+      } else {
 
+        setUsername();
 
+      }
 
+    }
 
+  });
 
+
 
+  $inputMessage.on('input', function() {
 
+    updateTyping();
 
+  });
 
+
 
+  // Click events
 
+
 
+  // Focus input when clicking anywhere on login page
 
+  $loginPage.click(function () {
 
+    $currentInput.focus();
 
+  });
 
+
 
+  // Focus input when clicking on the message input's border
 
+  $inputMessage.click(function () {
 
+    $inputMessage.focus();
 
+  });
 
+
 
+  // Socket events
 
+
 
+  // Whenever the server emits 'login', log the login message
 
+  socket.on('login', function (data) {
 
+    connected = true;
 
+    // Display the welcome message
 
+    var message = "Welcome – ";
 
+    log(message, {
 
+      prepend: true
 
+    });
 
+    addParticipantsMessage(data);
 
+  });
 
+
 
+  // Whenever the server emits 'new message', update the chat body
 
+  socket.on('new message', function (data) {
 
+    addChatMessage(data);
 
+  });
 
+
 
+  // Whenever the server emits 'user joined', log it in the chat body
 
+  socket.on('user joined', function (data) {
 
+    log(data.username + ' joined');
 
+    addParticipantsMessage(data);
 
+  });
 
+
 
+  // Whenever the server emits 'user left', log it in the chat body
 
+  socket.on('user left', function (data) {
 
+    log(data.username + ' left');
 
+    addParticipantsMessage(data);
 
+    removeChatTyping(data);
 
+  });
 
+
 
+  // Whenever the server emits 'typing', show the typing message
 
+  socket.on('typing', function (data) {
 
+    addChatTyping(data);
 
+  });
 
+
 
+  // Whenever the server emits 'stop typing', kill the typing message
 
+  socket.on('stop typing', function (data) {
 
+    removeChatTyping(data);
 
+  });
 
+});

+ 149 - 0
public/style.css
View File 

@@ -0,0 +1,149 @@
 
+/* Fix user-agent */
 
+
 
+* {
 
+  box-sizing: border-box;
 
+}
 
+
 
+html {
 
+  font-weight: 300;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+
 
+html, input {
 
+  font-family:
 
+    "HelveticaNeue-Light",
 
+    "Helvetica Neue Light",
 
+    "Helvetica Neue",
 
+    Helvetica,
 
+    Arial,
 
+    "Lucida Grande",
 
+    sans-serif;
 
+}
 
+
 
+html, body {
 
+  height: 100%;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+ul {
 
+  list-style: none;
 
+  word-wrap: break-word;
 
+}
 
+
 
+/* Pages */
 
+
 
+.pages {
 
+  height: 100%;
 
+  margin: 0;
 
+  padding: 0;
 
+  width: 100%;
 
+}
 
+
 
+.page {
 
+  height: 100%;
 
+  position: absolute;
 
+  width: 100%;
 
+}
 
+
 
+/* Login Page */
 
+
 
+.login.page {
 
+  background-color: #000;
 
+}
 
+
 
+.login.page .form {
 
+  height: 100px;
 
+  margin-top: -100px;
 
+  position: absolute;
 
+
 
+  text-align: center;
 
+  top: 50%;
 
+  width: 100%;
 
+}
 
+
 
+.login.page .form .usernameInput {
 
+  background-color: transparent;
 
+  border: none;
 
+  border-bottom: 2px solid #fff;
 
+  outline: none;
 
+  padding-bottom: 15px;
 
+  text-align: center;
 
+  width: 400px;
 
+}
 
+
 
+.login.page .title {
 
+  font-size: 200%;
 
+}
 
+
 
+.login.page .usernameInput {
 
+  font-size: 200%;
 
+  letter-spacing: 3px;
 
+}
 
+
 
+.login.page .title, .login.page .usernameInput {
 
+  color: #fff;
 
+  font-weight: 100;
 
+}
 
+
 
+/* Chat page */
 
+
 
+.chat.page {
 
+  display: none;
 
+}
 
+
 
+/* Font */
 
+
 
+.messages {
 
+  font-size: 150%;
 
+}
 
+
 
+.inputMessage {
 
+  font-size: 100%;
 
+}
 
+
 
+.log {
 
+  color: gray;
 
+  font-size: 70%;
 
+  margin: 5px;
 
+  text-align: center;
 
+}
 
+
 
+/* Messages */
 
+
 
+.chatArea {
 
+  height: 100%;
 
+  padding-bottom: 60px;
 
+}
 
+
 
+.messages {
 
+  height: 100%;
 
+  margin: 0;
 
+  overflow-y: scroll;
 
+  padding: 10px 20px 10px 20px;
 
+}
 
+
 
+.message.typing .messageBody {
 
+  color: gray;
 
+}
 
+
 
+.username {
 
+  font-weight: 700;
 
+  overflow: hidden;
 
+  padding-right: 15px;
 
+  text-align: right;
 
+}
 
+
 
+/* Input */
 
+
 
+.inputMessage {
 
+  border: 10px solid #000;
 
+  bottom: 0;
 
+  height: 60px;
 
+  left: 0;
 
+  outline: none;
 
+  padding-left: 10px;
 
+  position: absolute;
 
+  right: 0;
 
+  width: 100%;
 
+}

Some files were not shown because too many files changed in this diff