๐ 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
$ npm install
$ npm run build
$ npm run start
# demo page: http://localhost:3000/
-
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)
$ 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
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
- Login Page: http://localhost:3000/login
- Sign Up Page: http://localhost:3000/signup
- Chat room: http://localhost:3000/chatroom
- Chat room (when someone send you messages)
- RWD web design (compatible with iPhone 6/7 and android)
mobile_1.png | mobile_2.png |
---|---|
![]() |
![]() |
- 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 }
- 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"
}
- 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
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
const messageSchema = mongoose.Schema({
from: String, # ่จฑ็ง้
to: String, # ่จฑ็งๅซ
msg: String, # "How is your mid-term exam?"
time: String, # "20:23:27"
timestamp: String # "1526819007387"
});
- 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!)
- [IMPORTANT] I didn't encrypt the password, and it's very dangerous.
MIT License
- 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
andMessage
- there are 2 collections in this database:
- Supporting Front-end design frameworks:
- Back-end logging
- if someone are chatting, the server will print out those messages passing through
- built-in Emoji
- upload images, videos
- upload user icons
- delete messages
- Chatbot
- search for messages
- showing that someone is texting
- Facebook or github login