Catherine Looper Lab 41: Socket-io

lab-catherine/.eslintignore

@@ -0,0 +1,5 @@
+**/node_modules/*
+**/vendor/*
+**/*.min.js
+**/coverage/*
+**/build/*

lab-catherine/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "commonjs": true,
+    "jest": true,
+    "es6": true
+  },
+  "globals": {
+    "err": true,
+    "req": true,
+    "res": true,
+    "next": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "space-infix-ops": ["error", {"int32Hint": false}],
+    "comma-dangle": ["error", "always-multiline"],
+    "semi": [ "error", "always" ]
+  }
+}

lab-catherine/.gitignore

@@ -0,0 +1,105 @@
+
+# Created by https://www.gitignore.io/api/node,macos,visualstudiocode
+
+build
+
+db
+
+### macOS ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### VisualStudioCode ###
+.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history
+
+# End of https://www.gitignore.io/api/node,macos,visualstudiocode

lab-catherine/README.md

@@ -0,0 +1,60 @@
+# Code Fellows: Seattle 401 JavaScript - 401d19
+
+## Lab 41: Socket IO with Vanilla JS
+
+![Simple Chat Overview](./public/img/chat-overview.png)
+
+### Author: 
+Catherine Looper
+
+### Motivation
+
+This application is a simple chat website built with Vanilla JavaScript. Users can enter the chat, send messages, update their username and update their avatar.
+
+The messages display the users avatar, a timestamp (when the message was sent), the username, and the message itself.
+
+### Build
+
+The chat message model contains the following properties: 
+
+```
+class ChatMessage {
+  constructor(message) {
+    this.timestamp = message.timestamp;
+    this.username = message.username;
+    this.message = message.message;
+    this.avatar = message.avatar;
+  }
+}
+
+```
+
+### Limitations
+
+To use this app - it is assumed that the user has familiarity with the tech and frameworks listed below.
+
+### Code Style
+
+Standard JavaScript with ES6.
+
+### Tech/Framework Used
+
+* eslint
+* socket-io
+* express
+* faker
+
+### How to use?
+
+* Step 1. Fork and Clone the Repository.
+* Step 2. `npm install`
+* Step 3. Run `nodemon` 
+
+### Credits
+
+* Code Fellows
+
+### License
+
+MIT © Catherine Looper
+

lab-catherine/index.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const express = require('express');
+const app = express();
+const http = require('http').Server(app);
+const io = require('socket.io')(http);
+const faker = require('faker');
+
+app.use(express.static('./public'));
+
+const CHATMEMBERS = {};
+
+io.on('connection', (socket) => {
+  CHATMEMBERS[socket.id] = {};
+  CHATMEMBERS[socket.id].username = faker.fake('{{name.jobTitle}}');
+  CHATMEMBERS[socket.id].avatar = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/1859-Martinique.web.jpg/220px-1859-Martinique.web.jpg';
+
+  socket.emit('set-header', {username: CHATMEMBERS[socket.id].username});
+
+  socket.on('disconnect', () => {
+    delete CHATMEMBERS[socket.id];
+  });
+
+  socket.on('send-message', (data) => {
+    data.timestamp = new Date().toLocaleTimeString();
+    data.username = CHATMEMBERS[socket.id].username;
+    data.avatar = CHATMEMBERS[socket.id].avatar;
+    io.emit('receive-message', data);
+  });
+
+  socket.on('submit-username', (msg) => {
+    if(msg.username === '')
+      return;
+    CHATMEMBERS[socket.id].username = msg.username;
+  });
+
+  socket.on('submit-avatar', (data) => {
+    CHATMEMBERS[socket.id].avatar = data.avatar;
+  });
+
+});
+
+let port = 3000;
+http.listen(port, () => {
+  console.log('http://localhost:' + port);
+});