TypeScript Tutorial: Building a Simple Interactive Web-Based Chat Application

Written by

learnmodernjavascript

in

In the digital age, real-time communication is paramount. From instant messaging to customer support, chat applications have become indispensable tools for both personal and professional interactions. Building your own chat application can seem daunting, but with TypeScript, it becomes a manageable and rewarding project. This tutorial will guide you through the process of creating a simple, interactive web-based chat application, perfect for beginners and intermediate developers looking to hone their TypeScript skills. We’ll cover everything from setting up the project to handling real-time communication using WebSockets.

Why Build a Chat Application?

Creating a chat application offers a fantastic opportunity to learn and apply several key programming concepts:

  • Real-time Communication: You’ll gain hands-on experience with WebSockets, a crucial technology for building applications that require instant updates.
  • Frontend Development: You’ll work with HTML, CSS, and JavaScript (specifically, TypeScript) to create an interactive user interface.
  • Backend Integration (Simplified): While this tutorial focuses on the frontend, you’ll learn how to connect to a backend server (for simplicity, we’ll use a pre-built one or a mock server), a fundamental skill in web development.
  • State Management: You’ll learn how to manage the state of your application, ensuring that messages are displayed correctly and efficiently.
  • TypeScript Proficiency: You’ll solidify your understanding of TypeScript’s features, such as types, interfaces, and classes.

Furthermore, building a chat application allows you to create something tangible and useful, providing a sense of accomplishment and a valuable addition to your portfolio.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): You’ll need these to manage project dependencies.
  • A code editor: Visual Studio Code (VS Code) is highly recommended, but any editor will do.
  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with these technologies is essential.
  • TypeScript installed globally (optional): You can install TypeScript globally using npm install -g typescript. However, we’ll also install it locally for the project.

Project Setup

Let’s start by setting up our project:

  1. Create a project directory: Open your terminal and navigate to the directory where you want to create your project. Then, create a new directory for your chat application:
mkdir chat-app
cd chat-app
  1. Initialize a Node.js project: Run the following command to initialize a new Node.js project. This will create a package.json file, which will manage your project’s dependencies:
npm init -y
  1. Install TypeScript and related dependencies: Install TypeScript and any other necessary packages. We’ll need TypeScript, and possibly a bundler like Parcel or Webpack (we’ll use a simple approach for this tutorial; a bundler would be used in a production environment).
npm install typescript --save-dev
  1. Create a TypeScript configuration file: Generate a tsconfig.json file. This file tells the TypeScript compiler how to compile your code.
npx tsc --init

This command creates a tsconfig.json file in your project root. Open this file and configure it to your needs. For beginners, the default settings are often sufficient, but you might want to adjust the following:

  • target: Specifies the JavaScript version to compile to (e.g., “ES2015”, “ESNext”).
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: Specifies the output directory for the compiled JavaScript files (e.g., “dist”).
  • sourceMap: Generates source map files for debugging (set to true).
  1. Create project structure: Create the following directories and files in your project directory:
mkdir src
mkdir public
touch src/index.ts
touch public/index.html

This sets up the basic structure for our project. src/index.ts will hold our TypeScript code, and public/index.html will be our HTML file.

Writing the HTML

Let’s create the basic HTML structure for our chat application. Open public/index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Chat App</title>
  <link rel="stylesheet" href="style.css"> <!-- We'll create this later -->
</head>
<body>
  <div id="app">
    <div id="chat-container">
      <div id="messages">
        <!-- Messages will be displayed here -->
      </div>
      <div id="input-area">
        <input type="text" id="message-input" placeholder="Type your message...">
        <button id="send-button">Send</button>
      </div>
    </div>
  </div>
  <script src="index.js"></script> <!-- We'll compile our TypeScript to index.js -->
</body>
</html>

This HTML provides the basic structure for our chat application: a container for messages, an input field, and a send button. We’ve also included a placeholder for our CSS (style.css) and linked the compiled JavaScript file (index.js).

Writing the CSS (Basic Styling)

Create a file named public/style.css (in the same directory as index.html) and add some basic styling to make the chat application look presentable:

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

#app {
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

#chat-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

#messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: scroll;
}

#input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}

#message-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

#send-button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.message {
  margin-bottom: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  word-wrap: break-word;
}

.message-from-me {
  background-color: #d4edda;
  align-self: flex-end;
}

.message-from-other {
  background-color: #f8d7da;
  align-self: flex-start;
}

This CSS provides a basic layout and styling for the chat application. Feel free to customize the styles to your liking.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will bring our chat application to life. Open src/index.ts and add the following code:


// Define a Message interface
interface Message {
  sender: string;
  content: string;
  timestamp: string;
  isMe: boolean; // Indicates if the message was sent by the current user
}

// Get references to HTML elements
const messagesContainer = document.getElementById('messages') as HTMLDivElement;
const messageInput = document.getElementById('message-input') as HTMLInputElement;
const sendButton = document.getElementById('send-button') as HTMLButtonElement;

// Function to format the timestamp
const formatTimestamp = () => {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
};

// Function to display a message
const displayMessage = (message: Message) => {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message');
  if (message.isMe) {
    messageElement.classList.add('message-from-me');
  } else {
    messageElement.classList.add('message-from-other');
  }
  messageElement.textContent = `[${message.timestamp}] ${message.sender}: ${message.content}`;
  messagesContainer.appendChild(messageElement);
  messagesContainer.scrollTop = messagesContainer.scrollHeight; // Auto-scroll to the bottom
};

// Function to send a message (Placeholder for WebSocket interaction)
const sendMessage = () => {
  const messageText = messageInput.value.trim();
  if (messageText) {
    const timestamp = formatTimestamp();
    const message: Message = {
      sender: 'Me', // Replace with user's name or a more dynamic identifier
      content: messageText,
      timestamp: timestamp,
      isMe: true,
    };
    displayMessage(message);
    // Clear the input field
    messageInput.value = '';

    // Simulate receiving a message from another user (for testing)
    setTimeout(() => {
      const receivedMessage: Message = {
        sender: 'OtherUser', // Replace with the actual sender from the server
        content: `Hello from OtherUser!`,
        timestamp: formatTimestamp(),
        isMe: false,
      };
      displayMessage(receivedMessage);
    }, 1000); // Simulate a 1-second delay

    // In a real application, you'd send this message over a WebSocket
  }
};

// Event listener for the send button
sendButton.addEventListener('click', sendMessage);

// Event listener for pressing Enter in the input field
messageInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    sendMessage();
  }
});

console.log('Chat application loaded!');

Let’s break down this code:

  • Message Interface: Defines the structure of a message object, including sender, content, timestamp, and a boolean flag (isMe) to indicate if it was sent by the current user.
  • HTML Element References: Gets references to the necessary HTML elements using document.getElementById().
  • formatTimestamp() Function: Formats the current time into a human-readable string.
  • displayMessage() Function: Creates a new message element, adds the appropriate classes for styling (message-from-me or message-from-other), sets the message text, and appends it to the messages container. It also scrolls the container to the bottom to show the latest message.
  • sendMessage() Function: This is where the core logic resides. It retrieves the message text from the input field, creates a Message object, displays the message using displayMessage(), clears the input field, and, crucially, simulates receiving a message from another user. In a real application, you would replace the simulation with WebSocket communication.
  • Event Listeners: Adds event listeners to the send button and the input field (for the Enter key) to handle sending messages.

Compiling the TypeScript

Now, let’s compile the TypeScript code into JavaScript. Open your terminal and run the following command from your project directory:

tsc

This command uses the TypeScript compiler (tsc) to compile src/index.ts into index.js, placing the output in the directory specified by the outDir option in your tsconfig.json file (e.g., “dist” if you configured it as such). If you didn’t specify an outDir, the output will be in the same directory as the source file.

Running the Application (Simple Approach)

For this simple example, we’ll use a straightforward approach to run the application. You’ll need a simple web server to serve the HTML and JavaScript files. There are several ways to do this:

  1. Using a Browser Extension: Install a browser extension like “Web Server for Chrome” or “Live Server” (VS Code extension). These extensions allow you to serve files directly from your project directory.
  2. Using a Simple HTTP Server (Node.js): You can use Node.js’s built-in http-server package. First, install it globally:
npm install -g http-server

Then, navigate to your project’s public directory in the terminal and run:

http-server

This will start a local web server, and you can access your chat application by opening the provided URL in your browser (usually http://localhost:8080 or similar).

  1. Using a Development Server (more complex): For more advanced projects, you might use a development server provided by a bundler like Webpack or Parcel. This often includes features like hot module replacement (HMR), which automatically updates the browser when you make changes to your code. However, this is beyond the scope of this beginner tutorial.

Once the server is running, open your browser and navigate to the URL provided by the server. You should see your chat application. Type a message in the input field, click the send button, and you should see the message appear in the message area. The simulated “OtherUser” message will appear shortly after.

Connecting to a WebSocket Server (Real-time Communication)

The simulated “OtherUser” message is a placeholder. To enable real-time communication, you need to connect your frontend to a WebSocket server. WebSockets provide a persistent, two-way communication channel between a client (your web application) and a server. Here’s how you can integrate WebSockets into your chat application:

  1. Choose a WebSocket Server: You’ll need a WebSocket server to handle the real-time communication. For this tutorial, we’ll use a publicly available WebSocket server for testing purposes (you would typically set up your own server in a real-world application). A good option for testing is the “WebSockets Echo Server” at wss://echo.websocket.events. It’s a simple echo server that sends back any message you send to it. For a production application, you would create your own server, using Node.js with the `ws` package, for example.
  2. Modify the TypeScript Code: Update your src/index.ts file to include WebSocket functionality.

interface Message {
  sender: string;
  content: string;
  timestamp: string;
  isMe: boolean;
}

const messagesContainer = document.getElementById('messages') as HTMLDivElement;
const messageInput = document.getElementById('message-input') as HTMLInputElement;
const sendButton = document.getElementById('send-button') as HTMLButtonElement;

const formatTimestamp = () => {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
};

const displayMessage = (message: Message) => {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message');
  if (message.isMe) {
    messageElement.classList.add('message-from-me');
  } else {
    messageElement.classList.add('message-from-other');
  }
  messageElement.textContent = `[${message.timestamp}] ${message.sender}: ${message.content}`;
  messagesContainer.appendChild(messageElement);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
};

// WebSocket setup
const websocket = new WebSocket('wss://echo.websocket.events'); // Replace with your server URL

websocket.onopen = () => {
  console.log('Connected to WebSocket server');
};

websocket.onmessage = (event) => {
  const receivedMessage = JSON.parse(event.data);
  const message: Message = {
    sender: 'OtherUser', // Replace with dynamic sender information from the server
    content: receivedMessage.message, // Assuming the server sends a 'message' property
    timestamp: formatTimestamp(),
    isMe: false,
  };
  displayMessage(message);
};

websocket.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

websocket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

const sendMessage = () => {
  const messageText = messageInput.value.trim();
  if (messageText && websocket.readyState === WebSocket.OPEN) {
    const timestamp = formatTimestamp();
    const message: Message = {
      sender: 'Me', // Replace with user's name or a more dynamic identifier
      content: messageText,
      timestamp: timestamp,
      isMe: true,
    };
    displayMessage(message);
    messageInput.value = '';

    // Send the message to the WebSocket server
    websocket.send(JSON.stringify({ message: messageText }));
  }
};

sendButton.addEventListener('click', sendMessage);

messageInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    sendMessage();
  }
});

console.log('Chat application loaded!');

Key changes in this code:

  • WebSocket Instance: A new WebSocket instance is created, connecting to the WebSocket server. Replace 'wss://echo.websocket.events' with the URL of your chosen server.
  • Event Handlers: The code includes event handlers for onopen (when the connection is established), onmessage (when a message is received from the server), onclose (when the connection is closed), and onerror (for any errors).
  • Sending Messages: In the sendMessage() function, the message is now sent to the WebSocket server using websocket.send(JSON.stringify({ message: messageText })). The message is stringified into JSON before sending. The echo server will simply send the message back to the client.
  • Receiving Messages: The onmessage handler parses the incoming JSON data and displays the message. Note that the echo server will send back the exact message you sent, so you’ll see your own messages echoed back. In a real application, the server would handle the message and broadcast it to other clients.
  1. Recompile and Test: Compile your TypeScript code (tsc) and refresh your browser. Now, when you send a message, it should be echoed back to you by the server, demonstrating real-time communication.

This is a simplified example, but it demonstrates the fundamental principles of using WebSockets in a web application. For a fully functional chat application, you’d need a backend server to handle user authentication, message storage, and broadcasting messages to other users.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building chat applications in TypeScript, along with solutions:

  • Incorrect TypeScript Configuration: Make sure your tsconfig.json file is correctly configured. Pay attention to the target, module, and outDir options. Incorrect settings can lead to compilation errors or unexpected behavior.
  • HTML Element References Not Found: If you get errors like “Cannot read properties of null (reading ‘value’)”, it likely means that the JavaScript code is trying to access an HTML element before it has loaded. Make sure your <script> tag is placed at the end of the <body> or use the DOMContentLoaded event.
  • Incorrect WebSocket Server URL: Double-check the WebSocket server URL. A typo or an incorrect protocol (e.g., using http instead of wss) will prevent the connection from being established.
  • JSON Parsing Errors: When receiving data from the WebSocket server, ensure that you’re correctly parsing the JSON. Use JSON.parse(event.data) to convert the received data into a JavaScript object. If the server is sending data in an unexpected format, you’ll encounter parsing errors.
  • Cross-Origin Issues: If your frontend and backend are hosted on different domains, you might encounter Cross-Origin Resource Sharing (CORS) issues. You’ll need to configure your backend to allow requests from your frontend’s domain. For the echo server, this isn’t an issue.
  • Unclear Error Messages: Use the browser’s developer tools (usually accessed by pressing F12) to inspect the console for error messages. These messages can provide valuable clues about what’s going wrong.
  • Not Handling WebSocket Connection States: It’s crucial to check the WebSocket’s readyState before sending messages. If the connection isn’t open (WebSocket.OPEN), sending messages will fail. You can use the onopen event to ensure the connection is established before sending messages.

Key Takeaways

  • TypeScript is Powerful: TypeScript enhances JavaScript by adding static typing, making your code more robust and easier to maintain.
  • WebSockets Enable Real-time Communication: WebSockets are essential for building applications that require instant updates, such as chat applications, live dashboards, and online games.
  • Frontend Development is Interactive: Building a user interface involves working with HTML, CSS, and JavaScript (or TypeScript) to create an engaging experience.
  • Project Structure Matters: Organizing your project with clear directories and files improves readability and maintainability.
  • Error Handling is Critical: Always anticipate and handle potential errors to create a smooth user experience.

FAQ

  1. Can I use a different WebSocket server?
    Yes! You can use any WebSocket server. Just make sure to update the WebSocket URL in your code.
  2. How do I deploy this application?
    You’ll need a web server to host your HTML, CSS, and JavaScript files. You can use services like Netlify, Vercel, or AWS S3 to deploy your frontend. For a full-fledged application, you’d also need to deploy your backend server.
  3. How can I add user authentication?
    User authentication typically involves a backend server that handles user registration, login, and session management. Your frontend would communicate with this backend to authenticate users. You’d then store user information (e.g., username) and use it in your chat application to identify the sender of each message.
  4. How can I store the chat history?
    To store chat history, you’ll need a backend server with a database (e.g., PostgreSQL, MongoDB). When a message is sent, your frontend would send it to the backend, which would then save it in the database. When a user joins the chat, the backend would retrieve the chat history from the database and send it to the frontend.
  5. What are some alternatives to WebSockets?
    Alternatives to WebSockets include Server-Sent Events (SSE) and long polling. However, WebSockets are generally preferred for two-way communication, making them ideal for chat applications.

Building a web-based chat application with TypeScript is a fantastic way to deepen your understanding of frontend development, real-time communication, and the power of TypeScript. By following this tutorial, you’ve taken a significant step towards creating interactive and engaging web applications. Remember that this is a foundation upon which you can build. Explore more advanced features, such as user authentication, message storage, group chats, and more. With each new feature you add, you’ll not only enhance the application’s functionality but also expand your knowledge and skills in the ever-evolving world of web development. The possibilities are truly limitless, so keep experimenting, keep learning, and keep building!

More posts