LAPORAN AKHIR CSC

SIMPLE CHAT APPLICATION

Disusun Oleh:

Varada Dwi Cahya Putra 17.K1.0047

Kevin Darmawan 17.K1.0057

FAKULTAS ILMU KOMPUTER

TEKNIK INFORMATIKA

UNIVERSITAS KATOLIK SOEGIJAPRANATA SEMARANG

2020/2021
A. General Explanation
With the rapid advances in the technology the network communication
between different people has made much easier than one can expect. And the network
is the heart of communication. Socket Application program interface is the main
utilization and which plays important base for this purpose. The current application
allows multiple users to communicate with each other which is enhanced to allow the
socket application program interface. That’s make communication mechanism makes
much easier. The application will allow different type of users to have communication
mechanism by implementing a simple client to server communication for mutual
chatting application. The objective of the chat server is to transfer messages reliably
and efficiently.
before we use this application, we must enter a username as identification.
then select the available room and enter the room to start communication between
users. if you want to leave the room there is a button for that.

B. Table Protocol
No. Pengirim Penerima Pesan Subyek, Deskripsi, dan Aksi
1 C S Join Room C: Mengirim data username dan
room

S: Menerima data lalu

menambahkan client ke
database, memasukan client ke
room yang dipilih dan
mengirim pesan sambutan ke
client 'welcome to the club!'
dan ‘selamat berbincang!’ serta
memberitahu client lain yang
ada di room yang sama siapa
client yang baru masuk
2 S C Join Room S: Mengirim data nama room
dan siapa saja yang ada di
dalam room ke client

C: Menerima data lalu

mengatur dan menampilkan
nama room serta list client yang
ada di dalam room
3 C S Message C: Mengirim pesan yang
diinput

S: Mengirim pesan ke semua

client dalam room yang sama
4 S C Message S: Mengirim pesan yang
sebelumnya diatur formatnya
memakai fungsi formatMessage

C: Menampilkan pesan yang

dikirim
5 C S typing C: Memberitahu server bahwa
client sedang mengetik

S: Memberitahu semua client

dalam room kecuali client
pengirim bahwa client sedang
mengetik

6 S C typing S: Mengirim data client

C: Menampilkan nama client

yang sedang mengetik
7 C S Finished typing C: Memberitahu server bahwa
client sudah selesai mengetik

S: Mengirim pesan ‘finished

typing’
8 S C Finished typing S: Memberitahu ke semua
client dalam room bahwa client
sudah berhenti mengetik

C: Menghapus tampilan client

sedang mengetik
9 S C Leave room S: Mengirim perubahan data
client dalam room ke semua
client dalam room setelah
seorang client keluar dari room
 C: Menerima data daftar client
dalam room lalu memperbarui
tampilan di daftar client dalam
room

C. Application Screenshots
D. Code
i) Client
const chatMessageWrapper = document.querySelector('.chat-
messages');
const chatForm = document.getElementById('chat-form');
const roomNameElement = document.getElementById('room-name');
const usersListWrapper = document.getElementById('users');
const userTypingWrapper = document.querySelector('.typing-box');
const messageInput = document.getElementById('msg');

const socket = io();

socket.emit('join room', getUserDetails());

socket.on('join room', (room, usersList) => {

setRoomName(room);
showUsersInRoom(usersList);
});

socket.on('leave room', (usersList) => {

showUsersInRoom(usersList);
});

socket.on('message', (message) => {

displayMessage(message);

scrollScreenToNewMessage();
});

socket.on('typing', (user) => {

displayUserTyping(user.username);
});

socket.on('finished typing', () => {

removeUserTypingDisplay();
});

function displayMessage({ username, message, time }) {

const messageWrapper = createElementWithClass('div', 'message');
const senderInfoElement = createElementWithClass('p', 'meta');
const messageContentElement = createElementWithClass('p', 'text')
;
 senderInfoElement.innerHTML = `${username} <span>${time}</span>`;
messageContentElement.innerHTML = message;

messageWrapper.appendChild(senderInfoElement);
messageWrapper.appendChild(messageContentElement);

chatMessageWrapper.appendChild(messageWrapper);
}

function displayUserTyping(username) {
userTypingWrapper.innerText = `${username} is typing...`;
}

function removeUserTypingDisplay() {
userTypingWrapper.innerText = ``;
}

function createElementWithClass(tag, className) {

const element = document.createElement(tag);
element.classList.add(className);

return element;
}

function scrollScreenToNewMessage() {
chatMessageWrapper.scrollTop = chatMessageWrapper.scrollHeight;
}

function getUserDetails() {
const params = window.location.search;
const queries = new URLSearchParams(params);

const username = queries.get('username');

const room = queries.get('room');

console.log(username, room);

return { username, room };

}

function setRoomName(roomName) {
roomNameElement.innerText = roomName;
}
function showUsersInRoom(listOfUsers) {
usersListWrapper.innerHTML = '';

listOfUsers.map((user) => {
const listElement = document.createElement('li');
listElement.innerText = user.username;

usersListWrapper.appendChild(listElement);
});
}

chatForm.addEventListener('submit', (event) => {

event.preventDefault();

const isSuccess = sendMessage(event);

if (!isSuccess) return false;

clearFormInput(event);
});

messageInput.addEventListener('keydown', (event) => {

setTimeout(() => {
const text = event.target.value.trim();
console.log(text);

if (text !== '') {

socket.emit('typing');
} else {
socket.emit('finished typing');
}
}, 100);
});

function sendMessage(event) {
const userMessage = event.target.elements.msg.value;
userMessage.trim();

if (!userMessage) return false;

socket.emit('message', userMessage);
 return true;
}

function clearFormInput(event) {
event.target.elements.msg.value = '';
event.target.elements.msg.focus();
}

ii) Server
const express = require('express');
const socketio = require('socket.io');
const path = require('path');
const http = require('http');
const formatMessage = require('./utils/formatMessage.js');
const {
assignUserData,
getCurrentUser,
getLeavingUserAndUpdateUsersArray,
getUsersList,
} = require('./utils/usersHandlers.js');

const app = express();

const server = http.createServer(app);
const io = socketio(server);

const adminName = 'MSG Store';

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {

socket.on('join room', (queries) => {
const user = assignUserData(socket.id, queries);

socket.join(user.room);

io.to(user.room).emit('join room', user.room, getUsersList(user

.room));

socket.emit('message', formatMessage(adminName, 'welcome to the

club!'));
socket.emit('message', formatMessage(adminName, 'Silahkan berbi
ncang!'));
 socket.to(user.room).broadcast.emit('message', formatMessage(ad
minName, `${user.username} has joined the room`));
});

socket.on('message', (userMessage) => {

const user = getCurrentUser(socket.id);

io.to(user.room).emit('message', formatMessage(user.username, u
serMessage));
});

socket.on('typing', () => {
const user = getCurrentUser(socket.id);

if (user) {
socket.to(user.room).broadcast.emit('typing', user);
}
});

socket.on('finished typing', () => {

const user = getCurrentUser(socket.id);
if (user) {
socket.to(user.room).broadcast.emit('finished typing');
}
});

socket.on('disconnect', () => {
const user = getLeavingUserAndUpdateUsersArray(socket.id)[0];

if (user) {
io.to(user.room).emit('leave room', getUsersList(user.room));
io.to(user.room).emit('message', formatMessage(adminName, `${
user.username} has left the room`));
}
});
});

const port = process.env.PORT || 3000;

server.listen(port, console.log(`server is running at port ${port}`
));
Full Part Code :
https://drive.google.com/file/d/1eZ_cTsjIJi879YyblJvHVcgPbgseob6e/view?usp=shari
ng