Real-Time Chat with Node.js & Socket.io

1
REAL-TIME CHAT WITH NODE.JS SOCKET.IO
https//nareshit.com/courses/advanced-java-online-
training
2
INTRODUCTION
In today's digital era, real-time communication
is more important than ever. Whether it's a
simple messaging system or a collaborative
workspace, building a real-time chat app is a
valuable skill for any web developer. In this
article, we'll walk you through how to build a
real-time chat application using Node.js and
Socket.io. https//nareshit.com/courses/advanced-
java-online-training
3
WHAT IS SOCKET.IO?
Socket.io is a JavaScript library that enables
real-time, bidirectional communication between
web clients and servers. It works on every
platform, browser, and device, and it's ideal for
building chat applications, gaming servers, live
notifications, and collaborative
tools. PREREQUISITES Before we begin, make sure
you have the following Node.js and npm
installed Basic knowledge of JavaScript and
Node.js A text editor like VS Code
4
STEP 1 INITIALIZE THE PROJECT
Start by creating a new project folder and
initializing Node.js mkdir realtime-chat-app cd
realtime-chat-app npm init -y STEP 2 INSTALL
DEPENDENCIES Youll need Express for the server
and Socket.io for WebSocket communicationnpm
install express socket.io https//nareshit.com/co
urses/advanced-java-online-training
5
STEP 3 CREATE THE SERVER
Create a file named server.js 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) // Serve static
files app.use(express.static('public')) io.on('c
onnection', (socket) gt console.log('A user
connected') socket.on('chat message', (msg) gt
io.emit('chat message', msg) ) socket.on('dis
connect', () gt console.log('A user
disconnected') ) ) server.listen(3000, ()
gt console.log('Server running
on http//localhost3000') )
6
STEP 4 CREATE THE FRONTEND
Inside a public folder, create an
index.html lt!DOCTYPE htmlgt lthtml
lang"en"gt ltheadgt ltmeta charset"UTF-8"gt lttitlegtRe
al-Time Chat Applt/titlegt ltstylegt body
font-family Arial messages list-style
none padding 0 li padding 5px 10px
input padding 10px width 300px
lt/stylegt lt/headgt ltbodygt lth2gtReal-Time Chat
Applt/h2gt ltul id"messages"gtlt/ulgt ltform
id"form"gt ltinput id"input" autocomplete"off"
placeholder"Type your message..."
/gtltbuttongtSendlt/buttongt
7
lt/formgt ltscript src"/socket.io/socket.io.js"gtlt/s
criptgt ltscriptgt const socket io() const form
document.getElementById('form') const input
document.getElementById('input') const messages
document.getElementById('messages') form.addEv
entListener('submit', (e) gt e.preventDefault()
if (input.value) socket.emit('chat message',
input.value) input.value '' ) socket.on('
chat message', (msg) gt const li
document.createElement('li') li.textContent
msg messages.appendChild(li) ) lt/scriptgt lt/bod
ygt lt/htmlgt
8
STEP 5 RUN YOUR CHAT APP
Start your server node server.js Visit
http//localhost3000 in your browser. Open
multiple tabs or browsers to test real-time
communication.
KEY FEATURES YOU CAN ADD
Usernames and login system Private
messaging Chat rooms or channels Message
timestamps Storing messages in a database
(MongoDB, for example)
9
CONCLUSION

• Using Node.js and Socket.io, building a real-time
  chat application becomes straightforward and
  efficient. This foundational knowledge opens the
  door to more complex features and can be extended
  into scalable real-time systems for various use
  cases.
• Whether you're building a live support system or
  a multiplayer game lobby, mastering real-time
  communication is a must for modern developers.

https//nareshit.com/courses/advanced-java-online-
training
10
THANK YOU
CONTACT US
91 8179191999 sup port_at_ nareshit.com https//na
reshit.com/courses/advanced-java-online-training
2nd Floor, Durga Bhavani Plaza, Ameerpet,
Hyderabad, 500016.