1 on 1 Chat with JavaScript: Build Real-Time Messaging Apps in 2025

1npm install express socket.io
2

1npm install pubnub
2

1<!-- index.html -->
2<div id="chat-container">
3  <div id="user-list"></div>
4  <div id="chatbox">
5    <div id="messages"></div>
6    <input id="messageInput" type="text" placeholder="Type a message..." />
7    <button id="sendBtn">Send</button>
8  </div>
9</div>
10

1/* styles.css */
2#chat-container { display: flex; width: 600px; border: 1px solid #ccc; }
3#user-list { width: 120px; background: #f4f4f4; padding: 10px; }
4#chatbox { flex: 1; display: flex; flex-direction: column; }
5#messages { flex: 1; padding: 10px; overflow-y: auto; }
6#messageInput { border: 1px solid #ddd; padding: 8px; width: 80%; }
7#sendBtn { padding: 8px 12px; }
8

1// chat.js
2const socket = io();
3document.getElementById("sendBtn").onclick = function() {
4  const input = document.getElementById("messageInput");
5  const message = input.value.trim();
6  if (message) {
7    socket.emit("message", message);
8    input.value = "";
9  }
10};
11socket.on("message", data => {
12  const messages = document.getElementById("messages");
13  const msgDiv = document.createElement("div");
14  msgDiv.textContent = data;
15  messages.appendChild(msgDiv);
16});
17

1// server.js
2const express = require("express");
3const http = require("http");
4const { Server } = require("socket.io");
5const app = express();
6const server = http.createServer(app);
7const io = new Server(server);
8
9const userSockets = {};
10
11io.on("connection", (socket) => {
12  socket.on("register", username => {
13    userSockets[username] = socket.id;
14  });
15  socket.on("private_message", ({ to, message }) => {
16    const recipientSocket = userSockets[to];
17    if (recipientSocket) {
18      io.to(recipientSocket).emit("message", message);
19    }
20  });
21});
22
23server.listen(3000, () => console.log("Server running"));
24

1// chat.js (continued)
2const username = prompt("Enter your username:");
3socket.emit("register", username);
4
5document.getElementById("sendBtn").onclick = function() {
6  const toUser = document.getElementById("toUser").value;
7  const message = document.getElementById("messageInput").value;
8  socket.emit("private_message", { to: toUser, message });
9};
10
11socket.on("message", data => {
12  // Display incoming message
13});
14

1// Typing indicator (client-side)
2document.getElementById("messageInput").addEventListener("input", () => {
3  socket.emit("typing", { to: toUser });
4});
5
6socket.on("typing", data => {
7  // Show 'User is typing...' in the UI
8});
9
10// Server-side
11socket.on("typing", ({ to }) => {
12  const recipientSocket = userSockets[to];
13  if (recipientSocket) {
14    io.to(recipientSocket).emit("typing", { from: username });
15  }
16});
17

1socket.on("disconnect", () => {
2  // Attempt reconnection or notify user
3});
4