Last active
October 27, 2018 15:19
-
-
Save aditodkar/0328809b636aca142ffb8cffdc320b3b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react' | |
import './chat.css' | |
import io from "socket.io-client"; | |
export default class Chat extends Component { | |
constructor(props){ | |
super(props); | |
this.state = { | |
message: '', | |
date: '', | |
messages: [] | |
}; | |
const socket = io('localhost:5000'); | |
this.sendMessage = event => { | |
event.preventDefault(); | |
if(this.state.message !== ''){ | |
socket.emit('SEND_MESSAGE', { | |
message: this.state.message, | |
date: Date.now() | |
}); | |
this.setState({ message: '', date: '' }); | |
} | |
}; | |
socket.emit('RECEIVE_MESSAGE', data => { | |
addMessage(data); | |
}); | |
const addMessage = data => { | |
console.log(data); | |
this.setState({ | |
messages: [...this.state.messages, data], | |
}); | |
console.log(this.state.message); | |
console.log(this.state.messages); | |
}; | |
} | |
render() { | |
return ( | |
<div> | |
<div id="status"></div> | |
<div id="chat"> | |
<div className="card"> | |
<div id="messages" className="card-block"> | |
{this.state.messages.map((message, index) => { | |
return ( | |
<div key={index} className="msgBox"><p className="msgText">{message.message}</p></div> | |
) | |
})} | |
</div> | |
</div> | |
<div className="row"> | |
<div className="column"> | |
<input id="inputmsg" type="text" placeholder="Enter Message...." | |
value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/> | |
</div> | |
<div className="column2"> | |
<button id="send" className="button" onClick={this.sendMessage}>Send</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const express = require('express'); | |
const mongoose = require('mongoose'); | |
const socket = require('socket.io'); | |
const message = require('./model/message') | |
const app = express(); | |
const mongoURI = require('./config/keys').mongoURI; | |
mongoose.connect(mongoURI, {useNewUrlParser: true}) | |
.then() | |
.catch( err => console.log(err)); | |
let db = mongoose.connection; | |
const port = 5000; | |
let server = app.listen(5000, function(){ | |
console.log('server is running on port 5000') | |
}); | |
let io = socket(server); | |
io.on("connection", function(socket){ | |
console.log("Socket Connection Established with ID :"+ socket.id) | |
socket.on('disconnect', function(){ | |
console.log('User Disconnected'); | |
}); | |
let chat = db.collection('chat'); | |
socket.on('SEND_MESSAGE', function(data){ | |
let message = data.message; | |
let date = data.date; | |
// Check for name and message | |
if(message !== '' || date !== ''){ | |
// Insert message | |
chat.insert({message: message, date:date}, function(){ | |
socket.emit('RECEIVE_MESSAGE', [data]); | |
}); | |
} | |
}); | |
chat.find().limit(100).sort({_id:1}).toArray(function(err, res){ | |
if(err){ | |
throw err; | |
} | |
// Emit the messages | |
socket.emit('RECEIVE_MESSAGE', res); | |
}); | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment