Awesome Open Source
Awesome Open Source

chatroom

๐Ÿƒ Live chatroom built with Socket.io, React, MongoDB, Express and Node.js

  • Front-end Framework: React, React-dom
  • Front-end Ajax communication: axios, socket.io-client
  • Front-end Web RWD Design: Material-ui, livechat-ui
  • Back-end: Node.js, Express.js, Socket.io
  • Database: Mongoose, MongoDB
  • Bundle: Webpack, Babel

How-to

$ npm install 
$ npm run build
$ npm run start 

# demo page: http://localhost:3000/

Demo Version

  • For deploy-https branch:

    • HTTPS protocol (SSL certificate, listen on 8080 port)

    • nginx back-end server (reverse proxy, port forwarding from 8080 to 443)

  • For master branch:

    • HTTP protocol (no certificate, listen on 3000 port)

Directory Tree

$ tree
.
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public
โ”‚ย ย  โ”œโ”€โ”€ assets/
โ”‚ย ย  โ”œโ”€โ”€ chatroom.html
โ”‚ย ย  โ”œโ”€โ”€ login.html
โ”‚ย ย  โ””โ”€โ”€ signup.html
โ”œโ”€โ”€ server.js
โ”œโ”€โ”€ src
โ”‚ย ย  โ”œโ”€โ”€ app
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ButtonAppBar.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ChatGridLayout.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ChatRoomLayout.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ChatRoomPaper.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ ContactList.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ InputBox.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Login.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ SignUp.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index_chatroom.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index_login.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index_signup.js
โ”‚ย ย  โ”œโ”€โ”€ models
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ Message.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ User.js
โ”‚ย ย  โ””โ”€โ”€ socket
โ”‚ย ย      โ”œโ”€โ”€ MessageSocket.js
โ”‚ย ย      โ””โ”€โ”€ UserSocket.js
โ””โ”€โ”€ webpack.config.js

6 directories, 34 files

Required global packages

Since that some of my packages are installed globally, so you might need to install them yourselves.

$ npm install -g [email protected]
$ sudo yum install -y mongodb-org # version: 3.6

Screenshot

  1. Login Page: http://localhost:3000/login

login

  1. Sign Up Page: http://localhost:3000/signup

signup

  1. Chat room: http://localhost:3000/chatroom

chat

  1. Chat room (when someone send you messages)

chat

  1. RWD web design (compatible with iPhone 6/7 and android)
mobile_1.png mobile_2.png
  1. Server Logs
received msg: { _id: 5b017a061a6ce3730da9a0ab,
  from: '่จฑ็ง‰้ˆž', # I send messages
  to: 'a',
  msg: 'More than ever Hour after Our work is Never over',
  time: '21:37:10',
  timestamp: '1526823430410',
  __v: 0 }
received msg: { _id: 5b017a721a6ce3730da9a0ac,
  from: 'b', # someone send me messages
  to: '่จฑ็ง‰้ˆž',
  msg: 'Socket io ็œŸ็š„ๅคชๅŽฒๅฎณ (ยดใƒปฯ‰ใƒป`)',
  time: '21:38:58',
  timestamp: '1526823538640',
  __v: 0 }

Dependencies

  • Front-end Framework: React, React-dom
  • Front-end Ajax communication: axios, socket.io-client
  • Front-end Web RWD Design: Material-ui, livechat-ui
  • Back-end: Node.js, Express.js, Socket.io
  • Database: Mongoose, MongoDB
  • Bundle: Webpack, Babel
"dependencies": {
    "@babel/cli": "^7.0.0-beta.47",
    "@babel/core": "^7.0.0-beta.47",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    "@babel/preset-react": "^7.0.0-beta.47",
    "@livechat/ui-kit": "^0.1.0",
    "@material-ui/core": "^1.0.0-rc.1",
    "@material-ui/icons": "^1.0.0-rc.0",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.0-beta.2",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "material-ui": "^0.20.1",
    "mongo": "^0.1.0",
    "mongoose": "^5.1.1",
    "mongoose-unique-validator": "^2.0.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1",
    "typeface-roboto": "0.0.54",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3"
  }

Database

  • MongoDB + Mongoose
  • mongoose-unique-validator to check if the username is already used
  • you can download the package through npm install -S mongoose-unique-validator

UserSchema

const userSchema = mongoose.Schema({
  username: { type: String, required: true, unique: true }, # ่จฑ็ง‰้ˆž
  password: { type: String, required: true }, # hihi
  icon: {type: String, required: true}, # './assets/default.png'
  updateTime: Date # ISODate("2018-05-20T08:41:18Z")
});
userSchema.plugin(uniqueValidator); # check username is unique

MessageSchema

const messageSchema = mongoose.Schema({
    from: String, # ่จฑ็ง‰้ˆž
    to: String, # ่จฑ็ง‰ๅ€ซ
    msg: String, # "How is your mid-term exam?"
    time: String, # "20:23:27" 
    timestamp: String # "1526819007387"
});

Known Issues

  1. When running the command npm run build it generates some warnings, as shown below (but they have no real effect on the compile process, so please just ignore them!)

build

  1. [IMPORTANT] I didn't encrypt the password, and it's very dangerous.

e

License

MIT License

Main Feature

  • Contact List
    • Show all the friends in the database who you could chat with
    • Once the particular user has been signed up, anyone could chat with him/her
    • highlight the friend who you're chatting with
  • Current friend you're chatting with
    • print the friend name and friend icon on the top bar
  • Chatroom Layout
    • sort the messages by their timestamp
    • the newest message will be put in the button
    • print out the message, time, and name
    • messages from yourself will be put on the right; messages from friends will be on the left
  • Input text box
    • send button
    • key press "enter" will be sent, too
    • prevent from sending empty message
  • show username on the top bar (pink color bar), and also the document title
  • support one-to-one messaging
    • open 2 pages in your browser, and you can use different users to chat to each other
  • sign up: username + password
    • username is unique, so the name and socket id are mapped 1-to-1
    • password is not encryted, see known issues
  • default user icon (yellow smile face)
  • Logout button
  • message notification (red badges)
    • When user A sending messages to user B, and user B is chatting with user C, for example, then the user B will get a notification from user A (red badges)
    • notification number will also be shown
  • MongoDB database: messagesdb
    • there are 2 collections in this database: User and Message
  • Supporting Front-end design frameworks:
  • Back-end logging
    • if someone are chatting, the server will print out those messages passing through
  • built-in Emoji

To-do

  1. upload images, videos
  2. upload user icons
  3. delete messages
  4. Chatbot
  5. search for messages
  6. showing that someone is texting
  7. Facebook or github login

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723)ย 
Reactjs (75,636)ย 
Nodejs (55,313)ย 
Mongodb (14,667)ย 
Express (11,599)ย 
Webpack (9,740)ย 
Material Ui (3,628)ย 
Axios (3,555)ย 
Socket Io (3,529)ย 
Babel (3,261)ย 
Chatroom (518)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194