Create a Secure Chat Application with JavaScript

In this tutorial, we will create a secure chat application using JavaScript, Node.js, and Socket.IO. By following this guide, you'll learn how to build an end-to-end encrypted chat app that ensures secure communication between users.

Prerequisites

To follow this guide, you should have a basic understanding of:

JavaScript (ES6)
Node.js
HTML & CSS

Tools and Libraries

We will be using the following tools and libraries:

Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
Socket.IO: A real-time, bidirectional communication library for the web.
CryptoJS: A JavaScript library of crypto standards.

Setting Up the Project

To start, create a new directory for your project and navigate to it:

mkdir secure-chat-app
cd secure-chat-app

Next, initialize the project and install the necessary dependencies:

npm init -y
npm install express socket.io crypto-js

Create the following files and folders:

touch server.js
mkdir public
cd public
touch index.html styles.css script.js

Creating the Server

Open server.js and set up the server using Express and Socket.IO:

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);

app.use(express.static("public"));

io.on("connection", (socket) => {
  console.log("a user connected");

  socket.on("disconnect", () => {
    console.log("user disconnected");
  });

  // Handle chat message events
  socket.on("chat message", (msg) => {
    io.emit("chat message", msg);
  });
});

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

http.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});

Creating the HTML Structure

Open public/index.html and create the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Secure Chat Application</title>
</head>
<body>
  <div id="chat-container">
    <h1>Secure Chat</h1>
    <div id="messages"></div>
    <form id="message-form">
      <input id="message-input" type="text" placeholder="Type your message...">
      <button type="submit">Send</button>
    </form>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Adding CSS Styles

Open public/styles.css and add the following CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

#chat-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

#messages {
  overflow: auto;
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

#message-form {
  display: flex;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  font-size: 16px;
}

Implementing the Client-side JavaScript

Open public/script.js and add the following code:

const socket = io();
const messages = document.getElementById("messages");
const messageForm = document.getElementById("message-form");
const messageInput = document.getElementById("message-input");

// Handle incoming chat messages
socket.on("chat message", (encryptedMsg) => {
  const decryptedMsg = CryptoJS.AES.decrypt(encryptedMsg, "secret key").toString(CryptoJS.enc.Utf8);
  const messageElement = document.createElement("li");
  messageElement.innerText = decryptedMsg;
  messages.appendChild(messageElement);
  messages.scrollTop = messages.scrollHeight;
});

// Send chat messages
messageForm.addEventListener("submit", (e) => {
  e.preventDefault();

  const message = messageInput.value;
  const encryptedMsg = CryptoJS.AES.encrypt(message, "secret key").toString();

  socket.emit("chat message", encryptedMsg);
  messageInput.value = "";
});

Here, we're using the CryptoJS library to encrypt and decrypt messages. Replace "secret key" with your own key.

Testing the Application

You're now ready to test your secure chat application. Run the server using the following command:

node server.js

Open your browser and visit http://localhost:3000. You should now see the chat application. Open another browser window or use a different device to test the chat functionality.

Conclusion

You've now created a secure chat application using JavaScript, Node.js, and Socket.IO. This example demonstrated how to encrypt and decrypt messages to ensure secure communication between users. Keep in mind that this is a basic example, and there are many ways to improve and expand upon this application.