Introduction
In today's world of fast-paced communication, real-time chat systems have become an essential part of our daily lives. Whether it's for personal or professional purposes, we all use chat systems to communicate with each other. With the increasing demand for real-time chat systems, developers are constantly looking for ways to build efficient and scalable systems. One such solution is Socket.IO and Node.js.
Socket.IO is a JavaScript library that enables real-time, bidirectional and event-based communication between the browser and the server. It provides an easy-to-use interface for building real-time applications, including chat systems. Node.js, on the other hand, is a powerful and scalable server-side platform that is widely used for building real-time applications.
In this blog post, we will discuss how to create a real-time chat system using Socket.IO and Node.js.
There are some important steps which are given below:
1. Create npm project ---
# npm init -y
2. Install nodemon, express, socket.io ---
# npm i nodemon
# npm i express
# npm i socket.io
3. Create a public folder. Then create client.js file and style.css and also connect style.css, client.js and also socket.io.js file with index.html ---
-->public-->client.js + style.css
<head>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
-------------
-------------
<script src="/socket.io/socket.io.js"></script>
<script src="/client.js"></script>
</body>
5. Create a express server like "server.js or index.js" file ---
Example:
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const PORT = process.env.PORT || 3000;
http.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
6.Create a relation between index.html, style.css and also client.js in
(server.js)---
Example:
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
7.Then create a socket.io serve ---
Example:
// Socket Server
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('message', (msg) => {
socket.broadcast.emit('message', msg);
});
});
8. Then create sendMessage() function, clear the input filed value after send the message in client.js file ---
function sendMessage(message) {
let msg = {
user: name,
message: message.trim()
};
// Append message to DOM
appendMessage(msg, 'outgoing');
textarea.value = '';
scrollToBottom();--->
// Send to server
socket.emit('message', msg);
}
9.Then create appendMessage() function ---
function appendMessage(msg, type) {
let messageArea = document.querySelector('.message-area');
let newDiv = document.createElement('div');
let className = type;
newDiv.classList.add(className, 'message');
let markup = `<h4>${msg.user}</h4><p>${msg.message}</p>`;
newDiv.innerHTML = markup;
messageArea.appendChild(newDiv);
}
10. Then receive message from server ---
// Receive message from server
socket.on('message', (msg) => {
appendMessage(msg, 'incoming');
scrollToBottom();
});
11. Create a scrollToBottom() function because after receive the new message then automatically scroll down ---
function scrollToBottom() {
let messages = document.querySelector('.message-area');
messages.scrollTop = messages.scrollHeight;
}
.png)
.png&description=How to create a real time chat system by using socket.io and node js? ){kind=link}
0 Comments