Last active
October 7, 2022 17:17
-
-
Save ShaunSHamilton/968dfffff2d8b41f0f5e4743f4eeec7e to your computer and use it in GitHub Desktop.
Advanced Node and Express - Send and Display Chat Messages
This file contains hidden or 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
$(document).ready(function () { | |
/*global io*/ | |
let socket = io(); | |
socket.on('user', data => { | |
$('#num-users').text(data.currentUsers + ' users online'); | |
let message = | |
data.username + | |
(data.connected ? ' has joined the chat.' : ' has left the chat.'); | |
$('#messages').append($('<li>').html('<b>' + message + '</b>')); | |
}); | |
socket.on('chat message', data => { | |
console.log('socket.on 1') | |
$('#messages').append($('<li>').text(`${data.username}: ${data.message}`)); | |
}) | |
// Form submittion with new message in field with id 'm' | |
$('form').submit(function () { | |
let messageToSend = $('#m').val(); | |
//send message to server here? | |
socket.emit('chat message', messageToSend); | |
$('#m').val(''); | |
return false; // prevent form submit from refreshing page | |
}); | |
}); |
This file contains hidden or 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
'use strict'; | |
require('dotenv').config(); | |
const express = require('express'); | |
const myDB = require('./connection'); | |
const fccTesting = require('./freeCodeCamp/fcctesting.js'); | |
const session = require('express-session'); | |
const passport = require('passport'); | |
const routes = require('./routes.js'); | |
const auth = require('./auth.js'); | |
const app = express(); | |
const http = require('http').createServer(app); | |
const io = require('socket.io')(http); | |
const passportSocketIo = require('passport.socketio'); | |
const cookieParser = require('cookie-parser'); | |
const MongoStore = require('connect-mongo')(session); | |
const URI = process.env.MONGO_URI; | |
const store = new MongoStore({ url: URI }); | |
app.set('view engine', 'pug'); | |
app.set('views', './views/pug'); | |
app.use(session({ | |
secret: process.env.SESSION_SECRET, | |
resave: true, | |
saveUninitialized: true, | |
cookie: { secure: false }, | |
key: 'express.sid', | |
store: store | |
})); | |
app.use(passport.initialize()); | |
app.use(passport.session()); | |
fccTesting(app); // For fCC testing purposes | |
app.use('/public', express.static(process.cwd() + '/public')); | |
app.use(express.json()); | |
app.use(express.urlencoded({ extended: true })); | |
io.use( | |
passportSocketIo.authorize({ | |
cookieParser: cookieParser, | |
key: 'express.sid', | |
secret: process.env.SESSION_SECRET, | |
store: store, | |
success: onAuthorizeSuccess, | |
fail: onAuthorizeFail | |
}) | |
); | |
myDB(async client => { | |
const myDataBase = await client.db('database').collection('users'); | |
routes(app, myDataBase); | |
auth(app, myDataBase); | |
let currentUsers = 0; | |
io.on('connection', (socket) => { | |
++currentUsers; | |
io.emit('user', { | |
username: socket.request.user.username, | |
currentUsers, | |
connected: true | |
}); | |
socket.on('chat message', (message) => { | |
io.emit('chat message', { username: socket.request.user.username, message }); | |
}); | |
console.log('A user has connected'); | |
socket.on('disconnect', () => { | |
console.log('A user has disconnected'); | |
--currentUsers; | |
io.emit('user', { | |
username: socket.request.user.username, | |
currentUsers, | |
connected: false | |
}); | |
}); | |
}); | |
}).catch(e => { | |
app.route('/').get((req, res) => { | |
res.render('index', { title: e, message: 'Unable to connect to database' }); | |
}); | |
}); | |
function onAuthorizeSuccess(data, accept) { | |
console.log('successful connection to socket.io'); | |
accept(null, true); | |
} | |
function onAuthorizeFail(data, message, error, accept) { | |
if (error) throw new Error(message); | |
console.log('failed connection to socket.io:', message); | |
accept(null, false); | |
} | |
const PORT = process.env.PORT || 3000; | |
http.listen(PORT, () => { | |
console.log(`Listening on port ${PORT}`); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment