TypeScript Tutorial: Building a Simple Web-Based Chat Application

Written by

learnmodernjavascript

in

In today’s interconnected world, instant communication is more critical than ever. Whether it’s for staying in touch with friends and family, collaborating on projects, or providing customer support, a web-based chat application offers a convenient and accessible solution. Building one from scratch might seem daunting, but with TypeScript, we can create a robust and scalable chat application that’s easy to understand and maintain. This tutorial will guide you through the process, providing clear explanations, practical examples, and step-by-step instructions to help you build your own web-based chat application.

Why TypeScript for a Chat Application?

TypeScript, a superset of JavaScript, brings several advantages to the table when building a chat application:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process, reducing the likelihood of runtime bugs and making debugging easier.
  • Code Maintainability: With type annotations, your code becomes more readable and easier to understand, especially as the application grows. This makes it simpler to refactor and maintain the codebase.
  • Enhanced Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which can significantly improve your development workflow.
  • Scalability: TypeScript’s features, such as interfaces and classes, allow you to structure your code in a way that promotes scalability and code reuse.

By using TypeScript, we can create a chat application that is not only functional but also well-structured, maintainable, and less prone to errors.

Project Setup

Before we dive into the code, let’s set up our development environment. We’ll need Node.js and npm (Node Package Manager) installed. If you don’t have them, download and install them from the official Node.js website. We’ll also use a code editor like Visual Studio Code, which offers excellent TypeScript support.

First, create a new project directory and navigate into it:

mkdir chat-app
cd chat-app

Next, initialize a new npm project:

npm init -y

This command creates a package.json file, which will manage our project’s dependencies.

Now, let’s install TypeScript and the necessary dependencies:

npm install typescript --save-dev
npm install socket.io express --save
  • typescript: The TypeScript compiler.
  • socket.io: A library for real-time, bidirectional communication.
  • express: A web application framework for Node.js.

Finally, create a tsconfig.json file to configure the TypeScript compiler. You can generate a basic configuration using the following command:

npx tsc --init --rootDir src --outDir dist

This command creates a tsconfig.json file in your project’s root directory. Modify this file as needed, for example, to set the target ECMAScript version or enable strict mode. Here’s a basic example:

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

Server-Side Implementation (Node.js with Express and Socket.IO)

Let’s start by creating the server-side code. We’ll use Node.js, Express, and Socket.IO to handle the real-time communication.

Create a directory named src and within it, create a file named server.ts. This is where our server-side logic will reside.

Here’s the basic structure of the server.ts file:

import express from 'express';
import { createServer } from 'http';
import { Server, Socket } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*", // Allow all origins (for development)
    methods: ["GET", "POST"]
  }
});

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

// Handle new socket connections
io.on('connection', (socket: Socket) => {
  console.log('a user connected');

  // Handle disconnects
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  // Handle messages
  socket.on('chat message', (msg: string) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg); // Broadcast to all clients
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Let’s break down this code:

  • Imports: We import necessary modules: express for creating the web server, http for creating the server, and socket.io for real-time communication.
  • Server Setup: We create an Express app and an HTTP server. Then, we initialize a Socket.IO server, allowing connections from any origin (for development purposes).
  • Connection Handling: The io.on('connection', ...) block handles new socket connections. When a client connects, a message is logged to the console.
  • Disconnection Handling: The socket.on('disconnect', ...) block handles client disconnections. A message is logged when a client disconnects.
  • Message Handling: The socket.on('chat message', ...) block handles incoming chat messages. When a client sends a message, it’s logged to the console, and then broadcast to all connected clients using io.emit('chat message', msg).
  • Route: We define a simple route at the root path (‘/’) to display a “Hello world” message.
  • Server Listening: The server starts listening on the specified port (3000 by default).

To run this server, you’ll need to compile the TypeScript code and then run the compiled JavaScript file. Add a script to your `package.json` file to make this easier. Add the following to your `package.json` file under the “scripts” section:

"scripts": {
  "build": "tsc",
  "start": "node dist/server.js"
},

Now, run the following commands in your terminal:

npm run build
npm run start

This will compile the TypeScript code and start the server. You should see “Server listening on port 3000” in your console.

Client-Side Implementation (HTML, CSS, and JavaScript)

Now, let’s create the client-side code to interact with our server. Create an `index.html` file in the root of your project directory. This file will contain the HTML structure, CSS styling, and JavaScript code for the chat application.

Here’s the HTML structure:

<!DOCTYPE html>
<html>
<head>
 <title>Simple Chat App</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <ul id="messages"></ul>
 <form id="form" action="">
 <input type="text" id="input" autocomplete="off" />
 <button>Send</button>
 </form>
 <script src="/socket.io/socket.io.js"></script>
 <script src="script.js"></script>
</body>
</html>

This HTML sets up the basic structure of the chat application:

  • A title for the page.
  • A link to an external CSS file (`style.css`) for styling.
  • An unordered list (`<ul id=”messages”>`) to display chat messages.
  • A form (`<form id=”form”>`) with an input field (`<input type=”text” id=”input”>`) for typing messages and a send button (`<button>`).
  • Includes the Socket.IO client library (`<script src=”/socket.io/socket.io.js”>`). This is crucial for connecting to the server.
  • Includes a JavaScript file (`script.js`) for the client-side logic.

Next, let’s add some basic styling in `style.css`:

body {
 margin: 0;
 padding-bottom: 3rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#form {
 background: rgba(0, 0, 0, 0.15);
 padding: 0.25rem;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 display: flex;
 box-sizing: border-box;
}

#input {
 border: none;
 padding: 0 1rem;
 flex-grow: 1;
 border-radius: 2rem;
 margin: 0.25rem;
}

#input:focus {
 outline: none;
}

#form > button {
 background: #333;
 border: none;
 padding: 0 1rem;
 margin: 0.25rem;
 border-radius: 3px;
 outline: none;
 color: #fff;
}

#messages {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#messages > li {
 padding: 0.5rem 1rem;
}

#messages > li:nth-child(odd) {
 background: #eee;
}

Finally, let’s implement the client-side JavaScript logic in `script.js`:

import { io } from "socket.io-client";

const socket = io();

const form = document.getElementById('form')! as HTMLFormElement;
const input = document.getElementById('input')! as HTMLInputElement;
const messages = document.getElementById('messages')! as HTMLUListElement;

form.addEventListener('submit', (e) => {
 e.preventDefault();
 if (input.value) {
 socket.emit('chat message', input.value);
 input.value = '';
 }
});

socket.on('chat message', (msg: string) => {
 const item = document.createElement('li');
 item.textContent = msg;
 messages.appendChild(item);
 window.scrollTo(0, document.body.scrollHeight);
});

Let’s break down the client-side JavaScript code:

  • Import Socket.IO client: We import the io function from the socket.io-client library.
  • Establish Connection: const socket = io(); establishes a connection to the Socket.IO server (which, by default, is running on the same host and port as the page).
  • Get DOM Elements: We get references to the form, input field, and messages list using document.getElementById(). The ! is a non-null assertion operator, which tells TypeScript that we are certain that these elements exist in the DOM.
  • Submit Event Listener: An event listener is added to the form to handle form submissions (when the user clicks the send button or presses Enter).
  • Emit Message: When the form is submitted and the input field has a value, socket.emit('chat message', input.value) sends the message to the server.
  • Clear Input: The input field is cleared after sending the message.
  • Receive Message: socket.on('chat message', (msg: string) => { ... }); listens for incoming ‘chat message’ events from the server. When a message is received, it creates a new list item (<li>), sets its text content to the message, and appends it to the messages list. The page then scrolls to the bottom to show the latest message.

To run the client-side code, you’ll need to serve the `index.html` file. One easy way to do this is to use a simple HTTP server. You can install a simple server using npm:

npm install -g serve

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

serve -p 8080

This will serve your application on port 8080. Open your web browser and go to `http://localhost:8080` to see your chat application. You can open multiple browser windows or tabs to simulate multiple users and test the real-time functionality.

Adding Usernames and Styling

Let’s enhance our chat application by adding usernames and improving the styling.

Adding Usernames

First, we’ll modify the server-side code to handle usernames. We’ll store the username on the socket object when a user connects. Modify the `server.ts` file:

import express from 'express';
import { createServer } from 'http';
import { Server, Socket } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*", // Allow all origins (for development)
    methods: ["GET", "POST"]
  }
});

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

// Store usernames
const userNames: { [key: string]: string } = {};

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

  // Get username from client
  socket.on('set username', (username: string) => {
    userNames[socket.id] = username;
    io.emit('user connected', { id: socket.id, username: username }); // Notify other users
  });

  // Handle disconnects
  socket.on('disconnect', () => {
    const username = userNames[socket.id];
    delete userNames[socket.id];
    console.log('user disconnected');
    io.emit('user disconnected', { id: socket.id, username: username });
  });

  // Handle messages
  socket.on('chat message', (msg: string) => {
    const username = userNames[socket.id] || 'Anonymous'; // Get username or default to Anonymous
    console.log('message: ' + msg);
    io.emit('chat message', { username: username, message: msg }); // Broadcast to all clients
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Changes in the server-side code:

  • `userNames` object: We create a `userNames` object to store usernames associated with socket IDs.
  • `set username` event: The server now listens for a ‘set username’ event. When received, it stores the username in the `userNames` object and emits a ‘user connected’ event to all connected clients, including the new user.
  • `user connected` event: The server emits a ‘user connected’ event when a user sets their username. This allows other clients to know about the new user.
  • `user disconnected` event: When a user disconnects, the server now emits a ‘user disconnected’ event, informing other users of the departure.
  • Message Sending: When a message is received, the server now retrieves the username associated with the socket ID (or defaults to “Anonymous”) and sends both the username and message to all clients.

Now, let’s modify the client-side code in `script.js` to handle usernames and display them in the chat.

import { io } from "socket.io-client";

const socket = io();

const form = document.getElementById('form')! as HTMLFormElement;
const input = document.getElementById('input')! as HTMLInputElement;
const messages = document.getElementById('messages')! as HTMLUListElement;
const usernameInput = document.createElement('input');
usernameInput.setAttribute('type', 'text');
usernameInput.setAttribute('placeholder', 'Enter your username');
const setUsernameButton = document.createElement('button');
setUsernameButton.textContent = 'Set Username';

const usernameForm = document.createElement('form');
usernameForm.appendChild(usernameInput);
usernameForm.appendChild(setUsernameButton);
document.body.insertBefore(usernameForm, form);

setUsernameButton.addEventListener('click', (e) => {
  e.preventDefault();
  const username = usernameInput.value.trim();
  if (username) {
    socket.emit('set username', username);
    usernameForm.style.display = 'none';
  }
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

socket.on('chat message', (data: { username: string; message: string }) => {
  const item = document.createElement('li');
  item.textContent = `${data.username}: ${data.message}`;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

socket.on('user connected', (data: { id: string; username: string }) => {
  const item = document.createElement('li');
  item.textContent = `${data.username} joined the chat.`;
  item.classList.add('join-leave-message');
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

socket.on('user disconnected', (data: { id: string; username: string }) => {
  const item = document.createElement('li');
  item.textContent = `${data.username} left the chat.`;
  item.classList.add('join-leave-message');
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

Changes in the client-side code:

  • Username Input: We create an input field and a button for entering a username.
  • Username Form: We create a form to wrap the username input and button, and insert it before the chat form in the `body`.
  • `set username` Event: When the “Set Username” button is clicked, the client emits a ‘set username’ event to the server with the entered username. The username form is hidden.
  • `chat message` Event: The ‘chat message’ event now receives an object containing both the username and the message. The message is displayed with the username.
  • `user connected` and `user disconnected` Events: The client now listens for ‘user connected’ and ‘user disconnected’ events, displaying messages when users join and leave the chat. The messages are styled with the class ‘join-leave-message’.

Styling Enhancements

Let’s add some CSS to `style.css` to improve the appearance of our chat application:

body {
 margin: 0;
 padding-bottom: 3rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#form {
 background: rgba(0, 0, 0, 0.15);
 padding: 0.25rem;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 display: flex;
 box-sizing: border-box;
}

#input {
 border: none;
 padding: 0 1rem;
 flex-grow: 1;
 border-radius: 2rem;
 margin: 0.25rem;
}

#input:focus {
 outline: none;
}

#form > button {
 background: #333;
 border: none;
 padding: 0 1rem;
 margin: 0.25rem;
 border-radius: 3px;
 outline: none;
 color: #fff;
}

#messages {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#messages > li {
 padding: 0.5rem 1rem;
 word-wrap: break-word; /* Allows long words to wrap */
}

#messages > li:nth-child(odd) {
 background: #eee;
}

.join-leave-message {
 font-style: italic;
 color: #777;
 text-align: center;
}

/* Style for the username input */
input[type="text"] {
 padding: 0.5rem;
 margin: 0.25rem;
 border: 1px solid #ccc;
 border-radius: 4px;
}

button {
 padding: 0.5rem 1rem;
 background-color: #4CAF50;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 margin: 0.25rem;
}

button:hover {
 background-color: #3e8e41;
}

These CSS enhancements include:

  • Improved font and spacing.
  • Styles for the username input and button.
  • Styling for join/leave messages.
  • Word-wrap for long messages.

With these additions, your chat application should now allow users to enter usernames and display messages with usernames and provide a better user experience.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them when building a web-based chat application:

  • CORS Issues: If you’re running your client and server on different ports or domains, you might encounter Cross-Origin Resource Sharing (CORS) errors. The server-side code shown earlier includes the line cors: { origin: "*" } which allows requests from any origin. For production, you should restrict this to your specific client origin for security reasons. If you are still running into issues, double-check your server configuration and ensure that CORS is correctly enabled.
  • Socket.IO Client Version Mismatch: Make sure the version of the Socket.IO client library (in your HTML) matches the version of the Socket.IO server library. Version mismatches can cause connection problems.
  • Typographical Errors: Carefully check your code for any typos, especially in event names and variable names. TypeScript’s type checking should help catch many of these errors, but some might slip through.
  • Incorrect Paths: Double-check the paths to your CSS and JavaScript files in your HTML. Incorrect paths can prevent your styles and scripts from loading. Use your browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect”) to check for any errors in the console or network requests.
  • Server Not Running: Ensure your server is running before attempting to connect from the client. If the server is not running, the client will not be able to establish a connection. Check the terminal where you started the server for any error messages.
  • Firewall Issues: In some cases, a firewall might be blocking the connection between the client and the server. Make sure your firewall allows traffic on the port your server is using (usually port 3000 by default).
  • Incorrect imports: Ensure your imports are correct and that the necessary libraries are installed.

Key Takeaways

This tutorial has provided a comprehensive guide to building a simple web-based chat application using TypeScript, Node.js, Express, and Socket.IO. We covered the following key concepts:

  • Setting up a TypeScript project: We set up the project and installed necessary dependencies.
  • Server-side implementation: We created a server using Node.js, Express, and Socket.IO to handle real-time communication.
  • Client-side implementation: We built the client-side using HTML, CSS, and JavaScript to interact with the server.
  • Adding usernames: We enhanced the application by adding username functionality.
  • Styling and User Experience: We improved the user experience.
  • Troubleshooting: We discussed common mistakes and how to resolve them.

FAQ

  1. Can I deploy this chat application? Yes, you can deploy this application. You’ll need a server to host the Node.js backend and a way to serve the HTML, CSS, and JavaScript files to the client. Platforms like Heroku, Netlify, or AWS provide deployment options.
  2. How can I add more features? You can add features such as private messaging, user lists, message history, and more. You can also explore different styling options and frameworks.
  3. How can I improve the security of the application? Implement authentication and authorization to control user access. Use HTTPS for secure communication. Sanitize user input to prevent cross-site scripting (XSS) attacks. Regularly update your dependencies to address security vulnerabilities.
  4. Can I use a database to store messages? Yes, you can integrate a database (like MongoDB, PostgreSQL, or MySQL) to store chat messages persistently. This is crucial if you want to save messages beyond a single session.
  5. What are some good resources for learning more? The Socket.IO documentation (socket.io) is a great resource. You can also find many tutorials and examples online. Explore the Express.js documentation and TypeScript documentation.

This simple chat application is a starting point. From here, you can expand upon it and create a fully-featured chat platform. The use of TypeScript adds a layer of robustness and maintainability, making it easier to scale and add new features. By building this application, you have gained valuable experience in real-time communication, web development, and TypeScript, which are essential skills in today’s software landscape. As you continue to experiment and build, you’ll find that the possibilities are endless and that the ability to create dynamic and interactive web applications is within your reach.

More posts