Create a Simple Chat Application Using Socket.IO in Node.js
A detailed guide on how to create a simple chat application using Socket.IO in Node.js, allowing users to send and receive messages in real-time.
This article will guide you through creating a simple chat application using Socket.IO. You will learn how to set up a Node.js server, create a user interface using HTML, and utilize Socket.IO to handle real-time connections and messaging.
Node.js Code
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);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
function sendMessage() {
const msg = document.getElementById('message').value;
socket.emit('chat message', msg);
document.getElementById('message').value = '';
return false; // Prevent page reload
}
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form onsubmit="return sendMessage();">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
Detailed explanation:
server.js
-
import modules: Import necessary modules (
express,http,socket.io). - create server: Create the server and connect Socket.IO.
-
setup routes: Set up a route for the application to return the
index.htmlfile when accessing the main page. -
handle connections: When a user connects, log a message and listen for the
chat messageevent to broadcast messages to all users. - start server: Start the server on port 3000.
index.html
- load socket.io: Load the Socket.IO library from the server.
-
send message function: The
sendMessagefunction sends a message when the user clicks the send button. - receive messages: When a message is received from the server, create a new list item and append it to the message list.
System Requirements:
- Node.js version 12.x or higher
- NPM (Node Package Manager)
How to install the libraries needed to run the Node.js code above:
- Create a new folder and navigate to it.
- Run the following command to initialize a Node.js project:
npm init -y - Install the necessary libraries:
npm install express socket.io
Tips:
- Practice with Socket.IO to better understand how real-time communication works.
- You can extend the application by adding features such as notifications when users connect or disconnect, and saving chat history.