-
-
Save camperbot/d7af9864375207e254f73262976d2016 to your computer and use it in GitHub Desktop.
Advanced Node and Express - Send and Display Chat Messages
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
$(document).ready(function () { | |
/* Global io */ | |
let socket = io(); | |
socket.on('user', (data) => { | |
$('#num-users').text(data.currentUsers + ' users online'); | |
let message = data.name + (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.name}: ${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 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'); | |
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'); | |
fccTesting(app); //For FCC testing purposes | |
app.use('/public', express.static(process.cwd() + '/public')); | |
app.use(express.json()); | |
app.use(express.urlencoded({ extended: true })); | |
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()); | |
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', { | |
name: socket.request.user.name, | |
currentUsers, | |
connected: true | |
}); | |
socket.on('chat message', (message) => { | |
io.emit('chat message', { name: socket.request.user.name, message }); | |
}); | |
console.log('A user has connected'); | |
socket.on('disconnect', () => { | |
console.log('A user has disconnected'); | |
--currentUsers; | |
io.emit('user', { | |
name: socket.request.user.name, | |
currentUsers, | |
connected: false | |
}); | |
}); | |
}); | |
}).catch((e) => { | |
app.route('/').get((req, res) => { | |
res.render('pug', { title: e, message: 'Unable to login' }); | |
}); | |
}); | |
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); | |
} | |
http.listen(process.env.PORT || 3000, () => { | |
console.log('Listening on port ' + process.env.PORT); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi all, I am not getting a chat messages to display. I am seeing "John Doe has joined the chat." in the client. But I can't see any chats.
My code is identical to the code above. Any thoughts?