TypeScript Tutorial: Creating a Simple Chat Application

Written by

learnmodernjavascript

in

In today’s interconnected world, real-time communication is more crucial than ever. From instant messaging apps to collaborative tools, the ability to exchange information instantly has become a cornerstone of modern applications. This tutorial will guide you through building a simple, yet functional, chat application using TypeScript. We’ll cover the essential concepts, from setting up the project to handling real-time communication using WebSockets. Whether you’re a beginner or an intermediate developer, this tutorial will equip you with the knowledge and skills to create your own chat applications.

Why Build a Chat Application?

Building a chat application is an excellent way to learn and apply fundamental web development concepts. It involves dealing with real-time updates, user interfaces, and server-client communication. Here’s why you should consider building one:

  • Practical Application: Chat applications are widely used, providing a tangible project to showcase your skills.
  • Real-time Experience: You’ll learn how to handle real-time data, a valuable skill in modern web development.
  • Foundation for More Complex Projects: The concepts learned here can be extended to build more complex communication and collaboration tools.

Setting Up Your TypeScript Project

Before diving into the code, let’s set up our project environment. We’ll be using Node.js and npm (Node Package Manager) to manage our dependencies. If you don’t have them installed, download and install them from the official Node.js website.

Create a new directory for your project and navigate into it using your terminal:

mkdir chat-app
cd chat-app

Initialize a new Node.js project:

npm init -y

This command creates a package.json file, which will store your project’s dependencies and metadata.

Next, install TypeScript globally or locally. We’ll install it locally for this project:

npm install typescript --save-dev

Now, initialize a TypeScript configuration file (tsconfig.json):

npx tsc --init

This command generates a tsconfig.json file with various compiler options. You can customize these options to suit your project’s needs. For a basic setup, you can leave the default configuration as is. However, make sure to uncomment the outDir option and set it to ./dist. This specifies where the compiled JavaScript files will be stored.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Create a src directory and a file named index.ts inside it. This is where we’ll write our TypeScript code.

mkdir src
touch src/index.ts

Building the Server-Side with Node.js and WebSocket

For the server-side, we will use Node.js and the ws package, a lightweight WebSocket library. This will handle the real-time communication between clients.

Install the ws package:

npm install ws

Now, let’s write the server-side code (src/index.ts):

// src/index.ts
import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

interface Client extends WebSocket {
  id: string;
}

let nextClientId = 1;
const clients: Client[] = [];

wss.on('connection', (ws: WebSocket) => {
  const client = ws as Client;
  client.id = `user-${nextClientId++}`;
  clients.push(client);

  console.log(`Client connected: ${client.id}`);

  ws.on('message', (message: Buffer) => {
    const messageString = message.toString();
    console.log(`Received: ${messageString} from ${client.id}`);

    // Broadcast the message to all connected clients
    clients.forEach(c => {
      if (c !== client) {
        c.send(JSON.stringify({ type: 'message', sender: client.id, text: messageString }));
      }
    });
  });

  ws.on('close', () => {
    console.log(`Client disconnected: ${client.id}`);
    const index = clients.indexOf(client);
    if (index !== -1) {
      clients.splice(index, 1);
    }
  });

  ws.on('error', (error) => {
    console.error(`WebSocket error: ${error}`);
  });

  // Send a welcome message to the new client
  ws.send(JSON.stringify({ type: 'welcome', text: `Welcome to the chat, ${client.id}!` }));
});

console.log('WebSocket server started on port 8080');

Let’s break down the server-side code:

  • Importing the WebSocket Server: We import WebSocketServer and WebSocket from the ws module.
  • Creating the WebSocket Server: We create a new WebSocket server instance and listen on port 8080.
  • Client Interface and Client Storage: We define an interface Client to extend the WebSocket and add an ID. We store connected clients in an array.
  • Handling New Connections: The 'connection' event is triggered when a new client connects. We assign a unique ID to each client and add them to the clients array. We also send a welcome message to the new client.
  • Handling Incoming Messages: The 'message' event is triggered when a client sends a message. We log the message and broadcast it to all other connected clients.
  • Handling Disconnections: The 'close' event is triggered when a client disconnects. We remove the client from the clients array.
  • Handling Errors: The 'error' event is triggered when an error occurs. We log the error.

To compile and run the server, execute the following commands:

tsc
node dist/index.js

Building the Client-Side with HTML, CSS, and JavaScript

Now, let’s create the client-side code using HTML, CSS, and JavaScript. We’ll create a simple user interface for sending and receiving messages.

Create an index.html file:

<!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">
</head>
<body>
  <div class="container">
    <div id="chat-messages"></div>
    <div class="input-area">
      <input type="text" id="message-input" placeholder="Type your message...">
      <button id="send-button">Send</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Create a style.css file for basic styling:

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

.container {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

#chat-messages {
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
}

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

.message.received {
  background-color: #e9e9eb;
  align-self: flex-start;
}

.message.sent {
  background-color: #dcf8c6;
  align-self: flex-end;
}

.sender {
  font-weight: bold;
  margin-right: 5px;
}

.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 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

Finally, create a script.js file for the client-side JavaScript:

// script.js
const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

const ws = new WebSocket('ws://localhost:8080');

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

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  const messageElement = document.createElement('div');
  messageElement.classList.add('message');
  if (data.type === 'message') {
    messageElement.classList.add(data.sender === 'user-1' ? 'sent' : 'received');
    messageElement.innerHTML = `<span class="sender">${data.sender}:</span> ${data.text}`;
  } else if (data.type === 'welcome') {
    messageElement.classList.add('received');
    messageElement.textContent = data.text;
  }
  chatMessages.appendChild(messageElement);
  chatMessages.scrollTop = chatMessages.scrollHeight;
};

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

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

sendButton.addEventListener('click', () => {
  const message = messageInput.value;
  if (message) {
    ws.send(message);
    messageInput.value = '';
  }
});

Let’s break down the client-side code:

  • Connecting to the WebSocket Server: We establish a connection to the WebSocket server using the WebSocket constructor.
  • Handling the onopen Event: This event is triggered when the connection is successfully established.
  • Handling the onmessage Event: This event is triggered when a message is received from the server. We parse the JSON data, create a new message element, and append it to the chat messages area.
  • Handling the onclose Event: This event is triggered when the connection is closed.
  • Handling the onerror Event: This event is triggered when an error occurs.
  • Sending Messages: We add an event listener to the send button. When the button is clicked, we send the message to the server.

To run the client-side code, open index.html in your web browser. You can open multiple browser windows or tabs to simulate multiple users.

Understanding the Code

Let’s delve deeper into the key components and concepts of the chat application:

WebSocket Server

The WebSocket server is the heart of our chat application. It handles the following:

  • Listening for Connections: The server listens for incoming WebSocket connections from clients.
  • Managing Connections: The server keeps track of all connected clients.
  • Receiving Messages: The server receives messages from clients.
  • Broadcasting Messages: The server broadcasts messages to all connected clients.

Client-Side JavaScript

The client-side JavaScript handles the following:

  • Connecting to the Server: Clients connect to the WebSocket server using the WebSocket API.
  • Sending Messages: Clients send messages to the server.
  • Receiving Messages: Clients receive messages from the server.
  • Displaying Messages: Clients display messages in the chat interface.

HTML and CSS

The HTML and CSS provide the structure and styling for the chat interface. They include:

  • Chat Messages Area: Displays the chat messages.
  • Input Area: Allows users to type and send messages.
  • Basic Styling: Provides a clean and user-friendly interface.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect WebSocket URL: Make sure the WebSocket URL in your client-side JavaScript (ws://localhost:8080) matches the server’s address and port.
  • Firewall Issues: Ensure that your firewall allows connections on the port you’re using (port 8080 in this example).
  • Cross-Origin Errors: If you’re running the client and server on different domains, you might encounter cross-origin issues. Configure CORS (Cross-Origin Resource Sharing) on your server to allow connections from your client’s origin.
  • Not Handling Disconnections: Remember to handle the close event on both the client and server sides to gracefully manage disconnections.
  • Not Escaping User Input: Always sanitize and escape user input to prevent security vulnerabilities such as cross-site scripting (XSS) attacks.

Enhancements and Next Steps

This is a basic chat application, and there’s plenty of room for improvement. Here are some ideas for enhancements:

  • User Authentication: Implement user authentication to identify users.
  • Private Messaging: Allow users to send private messages to each other.
  • User Interface Improvements: Enhance the user interface with features like user avatars, timestamps, and message formatting.
  • Message History: Store and display a message history.
  • Error Handling: Implement more robust error handling.
  • Deployment: Deploy the application to a server.

Key Takeaways

  • Real-time Communication: You’ve learned how to implement real-time communication using WebSockets.
  • Server-Client Architecture: You’ve gained experience in building a server-client application.
  • TypeScript Fundamentals: You’ve practiced using TypeScript in a practical project.
  • Web Development Concepts: You’ve applied fundamental web development concepts like HTML, CSS, and JavaScript.

FAQ

Q: What is a WebSocket?
A: A WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. This allows for real-time data transfer between a client and a server.

Q: Why use WebSockets instead of HTTP?
A: WebSockets are more efficient for real-time communication because they maintain a persistent connection, reducing overhead. HTTP requires a new connection for each request, making it less suitable for real-time applications.

Q: What is the difference between ws and wss?
A: ws stands for WebSocket, and wss stands for WebSocket Secure. wss uses TLS/SSL encryption to secure the communication, making it more secure than ws.

Q: Can I use this chat application in a production environment?
A: The current application is a basic example and would need significant improvements before being used in a production environment. You would need to add features like user authentication, security, and scalability.

Conclusion

Building a chat application is a rewarding learning experience, offering a practical way to understand real-time web technologies. By following this tutorial, you’ve taken your first steps into creating interactive, real-time applications using TypeScript, Node.js, and WebSockets. Remember to experiment, explore the enhancements, and continue learning to master this exciting area of web development. The possibilities for creating engaging, interactive web experiences are vast, and with the skills you’ve gained, you’re well-equipped to explore them.

More posts