Advanced Node and Express

Question 1

What is a template engine?

Answer 1

software tool that simplifies the process of generating dynamic content for web applications. It allows developers to create templates, which are essentially static HTML files with embedded placeholders for dynamic content. These placeholders can be replaced with actual data during runtime, enabling the creation of web pages that can adapt to different data sources or user inputs.

Question 2

What the first step in setting up a template engine?

Answer 2

npm install ‘template package’

Question 3

After installing the template engine, in your Express application, how would you configure it to use the template engine as the view engine?

Answer 3

// Set EJS as the view engine
app.set(‘view engine’, ‘ejs’);

Question 4

After setting the view engine, how do you set the directory for your views?

Answer 4

app.set(‘views’, ‘views’);

Question 5

Where do you create template engine files?

Answer 5

in the directory specified by ‘app.set(‘views’, ‘views’), depending where you’ve set it to look in ex. views, create a file it that directory.

Question 6

After creating the views, where and how do you render the views?

Answer 6

-inside the route handlers
-by using the res.render()

Question 7

What is res.render()

Answer 7

method in Express is used to render a view/template and send the rendered HTML to the client in response to an HTTP request.

Question 8

What is the syntax for res.render()?
and explain what each part does:

Answer 8

res.render(view, locals, callback)
-views= name of the view/template file to render
-locals= object containing local variables that will be passed to the view for rendering
-callback= callback function that will be called ionce the view rendering is complete

Question 9

Show an ex. on using res.render() for a ‘hello.ejs’ view, and also containing local variable ‘name’ being ‘John’:

Answer 9

app.get(‘/hello’, (req, res) => {
// Render the ‘hello.ejs’ view
res.render(‘hello’, { name: ‘John’ });
});

Question 10

What is passport.js?

Answer 10

is a popular authentication middleware for Node.js applications ,that supports various authentication strategies, such as username and password, OAuth, and OpenID.

Question 11

What various authentication strategies does passport.js support?

Answer 11

username and password, OAuth, and OpenID.

Question 12

What is the main passport.js module?

Answer 12

passport

Question 13

What is passport.js strategy for authenticating with a username and password?

Answer 13

passport-local

Question 14

What is express middleware formanaging sessions?

Answer 14

express-session

Question 15

What is library for hashing passwords securely?

Answer 15

bcrypt

Question 16

What is passport?

Answer 16

an authentication middleware for Node.js. It is designed to serve a singular purpose—authenticate requests—and it does so in a modular way that allows you to apply different authentication mechanisms, known as strategies.

Question 17

What is passport-local?

Answer 17

a module that implements a local authentication strategy for Passport. The “local” part means that it uses a username (or email) and password for authentication.

Question 18

What is express-session?

Answer 18

middleware for Express that handles sessions. It provides session management capabilities and is essential for maintaining a persistent state across multiple pages, which is useful for keeping a user logged in as they navigate your application.

Question 19

What is bcrypt?

Answer 19

a library used to hash passwords. bcrypt provides a way to safely store and compare hashed passwords.

Question 20

How do you configure express-session middleware?

Answer 20

app.use(session({
secret: process.env.SESSION_SECRET, // Change this to a random string
resave: false,
saveUninitialized: false
}));

Question 21

How do you inialize passportand session support?

Answer 21

app.use(passport.initialize());
app.use(passport.session());

Question 22

Show a middleware for parsing incoming bodies:

Answer 22

app.use(express.urlencoded({ extended: true }));

Question 23

What is serialization of a user object?

Answer 23

is an essential aspect of authentication systems, particularly in web applications. It involves converting a user object into a format suitable for storage or transmission, typically for the purpose of session management.

Question 24

What is often used to store user information in a session after successful authentication and retrieves it on a subsequent requests to identify the authenticated user?

Answer 24

serialization

Question 25

Explain how serialization typically works in such systems:

Answer 25

After a user is authenticated, their user object is serialized. This typically involves extracting a unique identifier (such as the user’s ID) from the user object and storing it in the session. The serialized user object is then stored in the session store (e.g., memory, database).

Question 26

Explain how deserialization typically wrks in such systems:

Answer 26

On subsequent requests, the session middleware retrieves the serialized user object from the session store using the unique identifier stored during serialization. This serialized user object is then deserialized, typically by fetching the complete user object from the database based on the unique identifier.

Question 27

What happens to the complete user object once it is deserialized?

Answer 27

its attached to the request object (often as req.user)

Question 28

Show an example on how you would serialize the user object:

Answer 28

passport.serializeUser((user, done) => {
done(null, user.id); // Serialize by user ID
});

Question 29

Show an exaple on how you would deserialize the user object:

Answer 29

passport.deserializeUser((id, done) => {
User.findById(id, (err, user) => {
done(err, user); // Deserialize by fetching user from database
});
});

Question 30

What does passport.serializeUser do?

Answer 30

serializes the user object by extracting and storing its ID.

Question 31

What does passport.deserializeUser do?

Answer 31

deserializes the user object by fetching the complete user object from the database using the stored ID.

Question 32

What methods do you need to ensure that your model contains, when using the serialization and deserialization process?

Answer 32

methods for finding users by ID (findById) and validating passwords (validPassword)

Question 33

To ensure that your ‘Model’ contains methods for finding users by ID and validating passwords, whats one thing you can do?

Answer 33

define these methods within your “Model”

Question 34

To ensure that your ‘Model’ contains methods for finding users by ID and validating passwords, show an example on how it would look like using mongoose:

Answer 34

const mongoose = require(‘mongoose’);
const bcrypt = require(‘bcrypt’);
const Schema = mongoose.Schema;

// Define the user schema
const userSchema = new Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true }
});

// Method to validate a password
userSchema.methods.validPassword = function (password) {
return bcrypt.compareSync(password, this.password);
};

// Export the User model
const User = mongoose.model(‘User’, userSchema);

module.exports = User;

Question 35

What is a way for authenticating a user?

Answer 35

strategies

Question 36

Set up local strategy for passport by requiring the strategy and defining a new instance of local strateghy where you specify the authentication logic:

Answer 36

const passport = require(‘passport’);
const LocalStrategy = require(‘passport-local’).Strategy;

passport.use(new LocalStrategy(
(username, password, done) => {
myDataBase.findOne({ username: username }, (err, user) => {
console.log(User ${username} attempted to log in.);
if (err) {
return done(err);
}
if (!user) {
return done(null, false, { message: ‘Incorrect username.’ });
}
// Use the validPassword method we defined in the userSchema to check the password
if (!user.validPassword(password)) {
return done(null, false, { message: ‘Incorrect password.’ });
}
return done(null, user);
});
}
));

Question 37

To set up routes that will use the Passport strategy to authenticate users, create an endpoint that handle login requests and utilize Passports’s authenticate method:

Answer 37

const express = require(‘express’);
const router = express.Router();

// Assuming you’re using express
router.post(‘/login’, passport.authenticate(‘local’, {
successRedirect: ‘/dashboard’, // redirect to the secure dashboard section
failureRedirect: ‘/login’, // redirect back to the login page if there is an error
failureFlash: true // allow flash messages
}));

module.exports = router;

Question 38

After setting up routes using Passport Strategies to authenticate users, show how you would use that route in your app.js/server.js:

Answer 38

const express = require(‘express’);
const session = require(‘express-session’);
const passport = require(‘passport’);
const authRoutes = require(‘./routes/authRoutes’); // Assuming your authentication routes are defined in a separate file
const app = express();

// Initialize session and passport middleware
app.use(session({ secret: ‘someSecret’, resave: false, saveUninitialized: false }));
app.use(passport.initialize());
app.use(passport.session());

// Mount the authentication routes at a specific path
app.use(‘/auth’, authRoutes);

// Other middleware and route handlers…
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server listening on port ${PORT});
});

Question 39

Create a middleware that checks if a user is authenticated before allowing access to certain routes:

Answer 39

function ensureAuthenticated(req, res, next) {
if (req.isAuthenticated()) { //checks if current user session is authenticated
return next();
}
res.redirect(‘/login’); //redirection occurs if not authenticated
}

Question 40

After creating a secure route middleware that checks if user is authentcated, show how you can use that on routes you want to protect:

Answer 40

app.get(‘/dashboard’, ensureAuthenticated, (req, res) => {
res.render(‘dashboard’, { user: req.user });
});

Question 41

Show how to render the profile view with the user’s username in the route handler for the profile page

Answer 41

app.get(‘/profile’, ensureAuthenticated, (req, res) => {
// Render the profile view and pass the user’s username
res.render(‘profile’, { username: req.user.username });
});

Question 42

What do you typically need to implement to log a user out using Passport.js?

Answer 42

need to provide a route that handles the logout operation

Question 43

Show how to implement logging a user out using Passport.js:

Answer 43

// Route for logging out
app.get(‘/logout’, (req, res) => {
req.logout(); // Passport.js provides a logout() method on the request object to clear the login session
res.redirect(‘/login’); // Redirect to the login page after logout
});

Question 44

What method provided by Passport.js is used to clear the login session and effectively log the user out?

Answer 44

req.logout()

Question 45

What redirects the user to the login page after they have been logged out?

Answer 45

res.redirect(‘/login)

Question 46

Create a error handler middleware, for missing pages (404), that catches any errors that occur during the request processing pipeline, sets the appropriate status code, and sends a simple ‘error’ message back to the client:

Answer 46

// Catch 404 and forward to error handler
app.use((req, res, next) => {
const err = new Error(‘Not Found’);
err.status = 404;
next(err);
});

// Error handler
app.use((err, req, res, next) => {
// Set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get(‘env’) === ‘development’ ? err : {};
// Render the error page
res.status(err.status || 500);
// For simplicity, sending text, but you could render a view
if (err.status === 404) {
res.send(‘404: Page Not Found’);
} else {
res.send(‘error’);
}
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server listening on port ${PORT});
});

Question 47

Implement registration of a new user with MongoDB in your express application making sure the folllowing is also included:
1. Set up MongoDB connection
2. Create user schema
3. Handle registration POST request

Answer 47

const express = require(‘express’);
const bcrypt = require(‘bcrypt’);
const mongoose = require(‘mongoose’);
const app = express();

// Connect to MongoDB
mongoose.connect(‘mongodb://localhost:27017/myapp’, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on(‘error’, console.error.bind(console, ‘MongoDB connection error:’));
db.once(‘open’, () => {
console.log(‘Connected to MongoDB’);
});

// Define User Schema
const userSchema = new mongoose.Schema({
username: { type: String, unique: true, required: true },
email: { type: String, unique: true, required: true },
password: { type: String, required: true }
});
const User = mongoose.model(‘User’, userSchema);

// Set up body parser middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// Registration form route (GET)
app.get(‘/register’, (req, res) => {
res.render(‘register’); // Assuming your EJS file is named register.ejs
});

// Registration route (POST)
app.post(‘/register’, async (req, res) => {
const { username, email, password } = req.body;
try {
// Check if user already exists
const existingUser = await User.findOne({ $or: [{ username }, { email }] });
if (existingUser) {
return res.status(400).send(‘Username or email already exists’);
}
// Hash the password
const hashedPassword = await bcrypt.hash(password, 10);
// Create new user
const newUser = new User({
username,
email,
password: hashedPassword
});
// Save user to the database
await newUser.save();
// Redirect to login page
res.redirect(‘/login’);
} catch (error) {
console.error(error);
res.status(500).send(‘Internal Server Error’);
}
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server listening on port ${PORT});
});

Question 48

What is one thing you can do to enhance security, when working with user authentication?

Answer 48

hash passwords

Question 49

What are two key areas you should handle hashing passwords?

Answer 49

-registration /saving a new account
-when verifying passwords during login

Question 50

When auser registers and creates a new account, you should hash their password before storing it in the database. Show how you can do this:

Answer 50

const bcrypt = require(‘bcrypt’);

// Assume req.body contains username, email, and password from the registration form
// Hash password before saving user data
bcrypt.hash(req.body.password, 10, (err, hashedPassword) => {
if (err) {
// Handle error
} else {
// Save user data to the database, including hashedPassword
User.create({
username: req.body.username,
email: req.body.email,
password: hashedPassword
}, (err, newUser) => {
if (err) {
// Handle error
} else {
// User registered successfully
res.redirect(‘/login’);
}
});
}
});

Question 51

When a user attempts to login, you should compare the provided password stored in the database. Show how you can do this:

Answer 51

// Assume req.body contains username/email and password from the login form

User.findOne({ username: req.body.username }, (err, user) => {
if (err) {
// Handle error
} else if (!user) {
// User not found
// Handle accordingly (e.g., show error message)
} else {
// Compare provided password with hashed password in the database
bcrypt.compare(req.body.password, user.password, (err, result) => {
if (err) {
// Handle error
} else if (result === true) {
// Passwords match, user authenticated
// Redirect to authenticated route or set session
res.redirect(‘/dashboard’);
} else {
// Passwords don’t match
// Handle accordingly (e.g., show error message)
}
});
}
});

Question 52

What function can you use to hash passwords before saving it?

Answer 52

bcrypt.hash()

Question 53

What function can you use to verify the password during login?

Answer 53

bcrypt.compare()

Question 54

To implement password hashing in your authentication straegy, where whould you integrate it into?

Answer 54

strategy’s logic

Question 55

Show how you can modify the LocalStrategy authentication strategy to handle password hashing:

Answer 55

const LocalStrategy = require(‘passport-local’).Strategy;
const bcrypt = require(‘bcrypt’);

// Assuming User model is imported and available
passport.use(new LocalStrategy(
(username, password, done) => {
User.findOne({ username: username }, (err, user) => {
if (err) { return done(err); }
if (!user) { return done(null, false, { message: ‘Incorrect username.’ }); }
// Compare provided password with hashed password in the database
bcrypt.compare(password, user.password, (err, result) => {
if (err) { return done(err); }
if (result) {
return done(null, user);
} else {
return done(null, false, { message: ‘Incorrect password.’ });
}
});
});
}
));

Question 56

In Chat Intregation, when setting up the enviroment, how can you handle listening for a new connection from the client?

Answer 56

By using the on keyword. which listens for a specific event

Question 57

In chat intregation, what does the on keyword require?

Answer 57

requires 2 arguments: a string containing the title of the event that’s being emitted, and a function with which the data is passed through.

Question 58

What is a socket?

Answer 58

is an individual client who is connected

Question 59

In chat intregation, what would the server.js file look like when setting up the enviroment?
Hint:
//Create an Express app
//Create an HTTP server instance usinghttp.createServer()
//Initialize Socket.IO to work with the HTTP server instance
//Define the port number
//Start listening on the defined port
//Database initialization and route setup:
(//Pass Express app and datbase instance to the routes setup function
//Listen or socket connectons)

Answer 59

const express = require(‘express’);
const http = require(‘http’);
const socketIo = require(‘socket.io’);
const routes = require(‘./Routes’);

// Create an Express app
const app = express();

// Create an HTTP server instance using http.createServer()/This servercan then listen for imcoming HTTP requests and route them to the appropiate handlers within app for processing and response
const httpServer = http.createServer(app);

// Initialize Socket.IO to work with the HTTP server instance/Allowing biderectional communication b/w the server & connected clients using Websockets
const io = socketIo(httpServer);

// Define the port number
const PORT = process.env.PORT || 3000;

// Start listening on the defined port
httpServer.listen(PORT, () => {
console.log(Listening on port ${PORT});
});

// Database initialization and route setup
myDB(async client => {
const myDataBase = await client.db(‘database’).collection(‘users’);

// Pass Express app and database instance to the routes setup function
routes(app, myDataBase);

// Listen for socket connections
io.on('connection', socket => {
    console.log('A user has connected');
}); });

Question 60

In chat intregation, what would the routes.js file look like when setting up the enviroment?
HInt:
//Export a function that sets up application routes
(//Define routes using Express
//route initiates the authentication process)

Answer 60

const passport = require(‘passport’);

// Export a function that sets up application routes
module.exports = (app, myDataBase) => {
// Define routes using Express
//route inities the authentication process
app.route(‘/auth/github’).get(passport.authenticate(‘github’));

//Route handles the callback from Github and completes the authentication process
app.route('/auth/github/callback')
    .get(passport.authenticate('github', { failureRedirect: '/' }), (req, res) => {
        req.session.user_id = req.user.id;
        res.redirect('/chat');
    }); };

Question 61

In chat intregation, what would the client.js file look like when setting up the enviroment?
Hint:
//Establish WebSocket connection with the server
//Submit form handler
(//Prevent form submit from refreshing page)

Answer 61

$(document).ready(function () {
// Establish WebSocket connection with the server
let socket = io();

// Submit form handler
$('form').submit(function () {
    var messageToSend = $('#m').val();
    $('#m').val('');
    return false; // prevent form submit from refreshing page
}); });

Question 62

In chat intregation, what does the server-side do?

Answer 62

handles HTTP requests, WebSocket connections, and database operations

Question 63

In chat intregation, what does the client-side do?

Answer 63

establishes a WebSocket connection and handles user interactions

Question 64

In Socket.IO, what does communication by emitting refers to?

Answer 64

the process of sending data between the server and the connected clients

Question 65

What is a fundamental mechanism for real-time bidirectional commmunication in Socket.IO?

Answer 65

communication by emitting

Question 66

In Socket.IO, what are a few reasons for the purpose of emitting?

Answer 66

Real-time Communication
DataTransfer
Event-Driven Architecture

Question 67

What would the Server-side code look like for emitting the current count of connected users?

Answer 67

const express = require(‘express’);
const http = require(‘http’);
const socketIo = require(‘socket.io’);

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

let connectedUsersCount = 0;

io.on(‘connection’, socket => {
// Increment the count of connected users when a new user connects
connectedUsersCount++;

// Emit the updated count of connected users to all clients
io.emit('userCount', connectedUsersCount);

// Log the current count of connected users
console.log(`A user has connected. Total users: ${connectedUsersCount}`); });

server.listen(3000, () => {
console.log(‘Server running on port 3000’);
});

Question 68

What would the Client-side code look like for emitting the current count of connected users?

Answer 68

// Client-side code
socket.on(‘userCount’, count => {
console.log(‘Number of connected users:’, count);
});

Question 69

In Socket.IO for chat intregation, how do you implement Handle a Disconnect on the Server-side code?
Hint:
//Increment count of connected users
//Emit the updated count to all connected sockets
//Log a message indicating a new user connection
//Handle disconnection
(//Decrement count of connected users
//Emit the updated count to all connected sockets
//Log a message indicating a user disconnection)

Answer 69

const express = require(‘express’);
const http = require(‘http’);
const socketIo = require(‘socket.io’);
const app = express();
const server = http.createServer(app);
const io = socketIo(server);

let connectedUsersCount = 0;

io.on(‘connection’, socket => {
// Increment count of connected users
connectedUsersCount++;

// Emit the updated count to all connected sockets
io.emit('userCountUpdate', connectedUsersCount);

// Log a message indicating a new user connection
console.log('A user has connected');

// Handle disconnection
socket.on('disconnect', () => {
    // Decrement count of connected users
    connectedUsersCount--;

    // Emit the updated count to all connected sockets
    io.emit('userCountUpdate', connectedUsersCount);

    // Log a message indicating a user disconnection
    console.log('A user has disconnected');
}); });

Question 70

When it comes to managing WebSocket connections, particularly with Socket.IO, identifying the connected user can be challenging due to the lack of a traditional request-response cycle that you’d have with HTTP requests, What method can help bridge this gap?

Answer 70

parsing and decoding the cookie that contains the Passport session

Question 71

What does the method parsing and decoding the cookie that contains the Passport session technique do?

Answer 71

essentially replicates part of the authentication process that occurs in a typical HTTP request, but within the context of a WebSocket connection.

Question 72

What packages is a common setup for intregating Passport authentication with Socket.IO?

Answer 72

passport.socket.io
cookie-parser
session store like MongoStore

Question 73

What would the first step look like in the approach that enables you to authenticate WebSocket connections by accessing session information stored in MongoDB, thus identifying users connected through Socket.IO:
Hint:
Step 1: Setup Express, Passport, and Session Store

Answer 73

const express = require(‘express’);
const session = require(‘express-session’);
const MongoStore = require(‘connect-mongo’);
const passport = require(‘passport’);
const cookieParser = require(‘cookie-parser’);

const app = express();
const URI = “your_mongodb_connection_string”;

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

const sessionMiddleware = session({
secret: ‘yourSecret’,
resave: false,
saveUninitialized: true,
store: MongoStore.create({ mongoUrl: URI }),
cookie: {
// other cookie settings
},
key: ‘express.sid’ // This line explicitly sets the cookie name to ‘express.sid’
});

app.use(sessionMiddleware);
app.use(passport.initialize());
app.use(passport.session());

Question 74

In authenicating with Socket.IO, what would step 2 look like in code for Intregating Socket.IO with Passport and Session to configure Socket.IO to use the same session middleware, allowing it to access session data?

Answer 74

const server = require(‘http’).Server(app);
const io = require(‘socket.io’)(server);
const passportSocketIo = require(‘passport.socketio’);

// Then, when setting up passport.socketio, you make sure to use the same key:
io.use(passportSocketIo.authorize({
cookieParser: cookieParser, // the same middleware you register in express
key: ‘express.sid’, // the name of the cookie where express/connect stores its session_id, matching the session setup
secret: ‘yourSecret’, // the session_secret to parse the cookie
store: MongoStore.create({ mongoUrl: URI }), // using MongoStore as session store
success: onAuthorizeSuccess, // optional callback on success
fail: onAuthorizeFail, // optional callback on fail/error
}));

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);
}

io.on(‘connection’, function (socket) {
console.log(‘A user connected with sessionID:’, socket.request.user.logged_in);
// You can now access user data through socket.request.user
});

Question 75

In authenticating with Socket.IO, what would step 3 look like in code for running the server?

Answer 75

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(Server running on port ${PORT});
});

Question 76

Many chat rooms are able to announce when a user connects or disconnects and then display that to all of the connected users in the chat, what would this look like in the Server.js code?
Hint:
//Variable to store the count of connected users
//Handle new connection
Assuming you have access to the username authentication
//Increment the count of connected users
//Emit information about the new user
//Decrement the count of connected users when user disconnects
(//Emit information about the disconnected user)

Answer 76

let connectedUsersCount = 0; // Variable to store the count of connected users

io.on(‘connection’, function (socket) {
// Handle new connection
const username = socket.request.user.username; // Assuming you have access to the username after authentication

// Increment the count of connected users
connectedUsersCount++;

// Emit information about the new user
io.emit('userUpdate', {
    username: username,
    connectedUsers: connectedUsersCount,
    isConnected: true
});

// Decrement the count of connected users when user disconnects
socket.on('disconnect', function () {
    connectedUsersCount--;

    // Emit information about the disconnected user
    io.emit('userUpdate', {
        username: username,
        connectedUsers: connectedUsersCount,
        isConnected: false
    });
}); });

Question 77

In annoucing new users on the Client-side, how might you handle the ‘userUpdate’ event on the client-side in a chat room scenario?
Hint:
//Listen for ‘userUpdate’ event from the server
(//New user connected
//User disconnected)
//Update the count of connected users

Answer 77

// Listen for ‘userUpdate’ event from the server
socket.on(‘userUpdate’, function (data) {
if (data.isConnected) {
// New user connected
console.log(${data.username} has joined the chat.);
} else {
// User disconnected
console.log(${data.username} has left the chat.);
}

// Update the count of connected users
document.getElementById('connectedUsersCount').innerText = data.connectedUsers; });

Question 78

In chat intregation, to send and display chat messages both server-side and client-side, you’ll need to establish a communication flow between the server and clients using Socket.IO, Show how you can achieve this on the server-side(Node.js):

Answer 78

io.on(‘connection’, function (socket) {
// Handle new connection

// Listen for incoming messages from clients
socket.on('chatMessage', function (message) {
    // Broadcast the message to all connected clients, including the sender
    io.emit('chatMessage', { username: socket.request.user.username, message: message });
}); });

Question 79

In chat intregation, to send and display chat messages both server-side and client-side, you’ll need to establish a communication flow between the server and clients using Socket.IO, Show how you can achieve this on the Client-side(Browser):

Answer 79

<!DOCTYPE html>

<html>

<head>
<meta></meta>
<meta></meta>
<title>Chat Room</title>
</head>

<body>
<div></div>
<input></input>
<button>Send</button>

<script>
const socket = io();

        // Listen for incoming messages from the server
        socket.on('chatMessage', function (data) {
            // Display the message
            displayMessage(data.username, data.message);
        });

        function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();

            if (message !== '') {
                // Send the message to the server
                socket.emit('chatMessage', message);

                // Clear the input field
                messageInput.value = '';
            }
        }

        function displayMessage(username, message) {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.textContent = `${username}: ${message}`;
            messagesDiv.appendChild(messageElement);
        }
</script>

</body>

</html>