In this section, We'll dive into the client-side code implementation. The chat application provides users with the ability to register, log in, create chat rooms, join existing chat rooms, and exchange messages with other users. We will dissect the client code, examining the authentication logic, user registration and login functionalities, as well as the menu options for creating and joining chat rooms. Additionally, we will explore the user interface rendering and the event handling using the socket.io-client library.
Client Authentication
Starting from the client's /src folder, the /auth folder contains the client's authentication logic. It has three files: registerUser.js, loginUser.js, and getToken.js.
User Registration
// registerUser.js
const { prompt } = require('inquirer');
const axios = require('axios');
const loginUser = require('./loginUser');
const registerUser = async () => {
const questions = [
{
type: 'input',
name: 'username',
message: 'Enter your username:',
},
{
type: 'input',
name: 'email',
message: 'Enter your email:',
},
{
type: 'password',
name: 'password',
message: 'Enter your password:',
},
];
try {
const answers = await prompt(questions);
const { username, email, password } = answers;
const response = await axios.post('https://terminal-chat-app-production.up.railway.app/auth/register', {
username,
email,
password,
});
console.info(response.data.message); // Registration successful
console.info('-----------------------');
const token = loginUser(username, password, email);
return token;
} catch (error) {
if ( error.response.data.message === 'Username or email already exists') {
console.info(error.response.data.message);
registerUser();
} else {
console.error(error.response.data);
}
}
};
module.exports = registerUser;
registerUser.js prompts users with a list of questions asking for their details. The answers are then sent in a post request to the server's registration endpoint.
After successful registration, the user is logged in with the registered details (we'll take a look at that in the next heading). A token is then retrieved from the login operation, which is then returned from the function.
Also, if a user enters an existing email or password, they are prompted again to enter their registration details.
User Login
// loginUser.js
const axios = require('axios');
const { prompt } = require('inquirer');
const loginUser = async (username, password, email = null) => {
if (email) {
try {
const response = await axios.post('https://terminal-chat-app-production.up.railway.app/auth/login', {
username,
password,
});
const token = response.data.token;
console.log(response.data.message); // login successful
return token;
} catch (error) {
console.error(error.response.data); // login error
}
} else {
const questions = [
{
type: 'input',
name: 'username',
message: 'Enter your username:',
},
{
type: 'password',
name: 'password',
message: 'Enter your password:',
},
];
try {
const answers = await prompt(questions);
const { username, password } = answers;
const response = await axios.post('https://terminal-chat-app-production.up.railway.app/auth/login', {
username,
password,
});
const token = response.data.token;
console.log(response.data.message); // login successful
return token;
} catch (error) {
if (error.response.data.message === 'Invalid username or password') {
console.info(error.response.data.message);
loginUser(username, password);
} else {
console.error(error.response.data);
}
}
}
};
module.exports = loginUser;
loginUser.js exports a loginUser function that takes three parameters, with the email parameter initially set to null.
Since the user's email is available during registration, it is used to handle user login immediately after registration. The username and password parameters are then used to quickly make a request to the server's login endpoint.
However, when the email remains null during normal login, the user is prompted to enter their username and password, which are then used to make a request to the server's login endpoint.
The user is also prompted again to enter their login details when invalid credentials are entered.
User Token
// getToken.js
const axios = require('axios');
module.exports = async (username) => {
try {
const response = await axios.get(`https://terminal-chat-app-production.up.railway.app/auth/tokens/${username}`);
const token = response.data
return token;
} catch(error) {
console.error(error.response.data);
}
}
getToken.js simply gets the user token with their username from the server's running Redis database.
Home Menu
Next, we move into the /menu folder. It contains the logic for the home menu options. There are three folders in it: createChatRoom.js, joinChatRoom.js, and exitApp.js.
Creating Chat Rooms
// createChatRoom.js
const { prompt } = require('inquirer');
const joinChatRoom = require('./joinChatRoom');
const axios = require('axios');
const question = [
{
type: 'input',
name: 'roomName',
message: 'Enter Room Name'
}
]
module.exports = async function createChatRoom(client) {
try {
const answer = await prompt(question);
const roomName = answer.roomName;
const response = await axios.post('https://terminal-chat-app-production.up.railway.app/api/chatrooms', {
roomName
});
const chatRoom = response.data;
console.log(`${chatRoom} chat room created`);
joinChatRoom(client, chatRoom);
return chatRoom;
} catch (error) {
if (error.response.data.message) {
console.info(error.response.data.message);
createChatRoom(client); // Recursive call to prompt again
} else {
console.error(error);
}
}
};
createChatRoom.js exports a function that takes a single parameter, client.
It starts by prompting the user to enter a room name. The room name is then sent in a POST request to the server to store it in the database.
The user then joins the room created by passing client, which is a socket-client instance, and the room name to the joinChatRoom function (which will be explained later). The created chat room is then returned from the function.
If an error occurs, the user is prompted to create the chat room again.
Joining Chat Rooms
// joinChatRoom.js
const { prompt } = require('inquirer');
const axios = require('axios');
module.exports = async function joinChatRoom(client, chatRoom = null) {
if (chatRoom) {
client.emit('join', chatRoom);
} else {
const response = await axios.get('https://terminal-chat-app-production.up.railway.app/api/chatrooms');
const chatRooms = response.data;
const chatRoomsOption = [
{
type: 'list',
name: 'selectedRoom',
message: 'Choose a Chat Room:',
choices: chatRooms,
},
]
const { selectedRoom } = await prompt(chatRoomsOption);
client.emit('join', selectedRoom);
return selectedRoom;
}
}
joinChatRoom.js exports a function that takes two parameters: client, a socket.io-client instance, and chatRoom, which is set to null.
It triggers the join event immediately when the chatRoom is not null. This happens when a user finishes creating a new chat room in createChatRoom.js.
Also, if a user wants to join an existing room, the user is prompted to choose a room from the list of rooms retrieved from the server. The join event is then triggered, with the selected chat room sent to the socket.io server. The selected chat room is then returned from the function.
Exiting the App
// exitApp.js
module.exports = () => {
console.info('Exited Terminal Chat App Successfully!');
process.exit(0);
}
exitApp.js exports an anonymous function that simply performs a process termination operation. This terminates the app, and a message is logged on to the user's screen.
User Interface
Into the /views folder, there is the user interface logic. It consists of four files: getAuthOption.js, getMenuOption.js, renderInterface.js, and chatMessageInterface.js.
Authentication Display Options
// getAuthOptions.js
const { prompt } = require('inquirer');
function getAuthOption() {
const authOptions = [
{
type: 'list',
name: 'selectedOption',
message: 'Authentication',
choices: [
{ name: 'Register', value: 'Register', message: 'Create an account' },
{ name: 'Login', value: 'Login', message: 'Login to your account' },
{ name: 'Exit', value: 'Exit', message: 'Exit the App' },
]
},
];
return prompt(authOptions)
.then(answers => answers.selectedOption);
}
module.exports = getAuthOption;
getAuthOption.js exports a function that prompts users to select an authentication option of either Register, Login, or Exit. It then returns the selected option.
Home Display Options
// getMenuOption.js
const { prompt } = require('inquirer');
function getMenuOption() {
const menuOptions = [
{
type: 'list',
name: 'selectedOption',
message: 'Home',
choices: [
{ name: 'Create-Chat-Room', value: 'Create-Chat-Room', message: 'Create a Chat Room' },
{ name: 'Join-Chat-Room', value: 'Join-Chat-Room', message: 'Join a Chat Room' },
{ name: 'Exit', value: 'Exit', message: 'Exit the App' },
]
},
];
return prompt(menuOptions)
.then(answers => answers.selectedOption);
}
module.exports = getMenuOption;
getMenuOption.js exports a function that prompts users to select a home menu option of either Create-Chat-Room, Join-Chat-Room, or Exit. It then returns the selected option.
Interface Rendering
// renderInterface.js
const registerUser = require('../auth/registerUser');
const loginUser = require('../auth/loginUser');
const createChatRoom = require('../menu/createChatRoom');
const joinChatRoom = require('../menu/joinChatRoom');
const exitApp = require('../menu/exitApp');
const render = {
'Register': registerUser,
'Login': loginUser,
'Create-Chat-Room': createChatRoom,
'Join-Chat-Room': joinChatRoom,
'Exit': exitApp
};
module.exports = render;
renderInterface.js exports a render object that stores the authentication and home menu options functions.
Chat Message Interface
// chatMessageInterface.js
const readline = require('readline');
const io = require('socket.io-client');
const exitApp = require('../menu/exitApp');
const getMenuOption = require('./getMenuOption');
const render = require('./renderInterface');
const getToken = require('../auth/getToken');
const attachEvents = require('../../attachEvents');
function chatMessageInterface(client, chatRoom) {
console.info('----------------------------------------------');
console.info('Press -h to go Home.');
console.info('Press -e to Exit.');
console.info('----------------------------------------------');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
let clientUsername;
// Event listener for the 'username' event
client.on('username', (username) => {
clientUsername = username;
});
rl.on('line', async (input) => {
const message = input.trim();
if (message === '-e') {
rl.close(); // Close the readline interface
exitApp();
} else if (message === '-h') {
// Check if the clientUsername is defined
if (!clientUsername) {
console.log('Waiting for username...');
return;
}
const token = await getToken(clientUsername);
client.disconnect();
// create a new client connection
const newClient = io('https://terminal-chat-app-production.up.railway.app', {
auth: {
token
}
});
// Attach events to newClient
attachEvents(newClient);
// Display Home menu after successful authentication
const homeOption = await getMenuOption();
// Render menu interface according to what the user selects
const chatRoom = await render[homeOption](newClient);
// Start chat room messaging
chatMessageInterface(newClient, chatRoom);
}
client.emit('chat message', chatRoom, message);
});
}
module.exports = chatMessageInterface;
chatMessageInterface.js exports a function that takes two parameters: client, a socket.io-client instance, and chatRoom, the room where the chat is taking place.
It starts by logging some navigation information onto the user's terminal. It then creates a readline interface that allows for user inputs to be read.
The client listens for the username event and stores it in a clientUsername variable for later use.
The readline interface then listens for the line event which is triggered when a user enters a command-line input. The input is stored in a message variable, and this determines the next operation.
Next, the exitApp function is called when the message is -e.
If the message is -h, the client token is retrieved from the server before the client is disconnected from the socket.io server.
A new client connection is then created with the retrieved token to make sure the user is authenticated to create and join chat rooms. The other functions in the else if block will be explained later in the heading " The Node Script".
Also, if the message is neither -e nor -h, the chat message event is triggered and is used to send messages to other users in the chat room.
The Socket Client and Node Script
At the root of the client folder, there contains attachEvents.js, which attaches events to the socket.io-client instance, and commander.js, the client's interface node script.
Socket Client Events
// attachEvents.js
module.exports = (client) => {
client.on('connect', () => { });
// Handles 'chat message' event when another user sends a message
client.on('chat message', (message) => {
console.info(message);
});
client.on('joined', (info) => {
console.info(info);
});
client.on('user joined', (info) => {
console.info(info);
});
// // Handles 'user left' event when a user leaves a room
client.on('user left', (info) => {
console.info(info);
});
}
attachEvents.js exports a function that takes the socket.io-client instance as a parameter. It listens to various events and specifies what to do when they're triggered.
The Node Script
#!/usr/bin/env node // commander.js
const { Command } = require('commander');
const io = require('socket.io-client');
const getAuthOption = require('./src/views/getAuthOption');
const getMenuOption = require('./src/views/getMenuOption');
const chatMessageInterface = require('./src/views/chatMessageInterface');
const render = require('./src/views/renderInterface');
const attachEvents = require('./attachEvents');
const program = new Command();
program.version('1.0.0').description('Terminal Chat App');
// Start Terminal chat app
program
.description('Starts the Terminal chat app')
.command('start').action(async () => {
// Display Authentication menu
const authOption = await getAuthOption();
// Render authentication interface according to what the user selects
const token = await render[authOption]();
if (!token) {
console.info('Authentication Error!');
process.exit(1);
}
// connect to the socket server after authentication
const client = io('https://terminal-chat-app-production.up.railway.app', {
auth: {
token
}
});
// Attach events to client
attachEvents(client);
// Display Home menu after succesful authentication
const homeOption = await getMenuOption();
// Render menu interface according to what the user selects
const chatRoom = await render[homeOption](client);
// Start chat room messaging
chatMessageInterface(client, chatRoom);
}
);
program.parse(process.argv);
The above file is a node script that uses the commander library for handling command-line arguments. The script only allows for the start command-line argument. This argument starts the app.
On starting the app, the authentication menu is displayed. The render object is then used to render what the user selects from the menu, and the result of the operation is stored in a token variable.
If a token was not returned from the previous operation, which translates to an authentication failure, the app is terminated. Otherwise, the app keeps running.
A socket.io-client instance is then created, and it uses the returned token for authentication when connecting to the socket.io server.
The home menu is displayed after a successful connection with the server. Again, the render object is then used to render what the user chooses from the home menu option. A chatRoom is returned from the operation.
The socket.io-client instance, along with the chatRoom, is then used to start the chat message interface.
The user can now start chatting with other users in the chat room in real-time.
The client code was published on the NPM registry. This is for easy access and installation on the command line anywhere in the world. You can run npm install tarminal-chat-app on your terminal to install the app.
In the next section, I review the challenges, lessons learned, and potential future improvements for the project.
Top comments (0)