Building a Real-time Chat Application in Python

Table of Contents

  1. Introduction
  2. Prerequisites
  3. Setup
  4. Creating a Flask Application
  5. Building the Chat Interface
  6. Implementing Real-time Communication
  7. Conclusion

Introduction

In this tutorial, we will learn how to build a real-time chat application in Python using the Flask framework and the Socket.IO library. By the end of this tutorial, you will have a basic chat application that allows multiple users to communicate with each other in real-time.

Prerequisites

Before starting this tutorial, you should have a basic understanding of Python programming language and web development concepts. Familiarity with Flask framework and Socket.IO library will be helpful, but not required.

Setup

To get started, we need to set up our development environment. Follow the steps below:

  1. Install Python: If you don’t have Python installed, download and install the latest version from the official Python website.

  2. Install Flask: Open your terminal or command prompt and run the following command to install Flask: 
     pip install flask
  3. Install Socket.IO: Run the following command to install the Socket.IO library: 
     pip install flask-socketio

    Now that we have our development environment set up, let’s create a new Flask application.

Creating a Flask Application

  1. Open your favorite text editor or IDE and create a new directory for your project.

  2. Inside the project directory, create a new Python file called app.py.

  3. Open the app.py file and import the necessary modules: 
     from flask import Flask, render_template
 from flask_socketio import SocketIO
  4. Create a Flask app and configure it: 
     app = Flask(__name__)
 app.config['SECRET_KEY'] = 'your-secret-key'
 socketio = SocketIO(app)
  5. Define a route for the home page and render a template: 
     @app.route('/')
 def index():
     return render_template('index.html')
  6. Run the Flask application: 
     if __name__ == '__main__':
     socketio.run(app, debug=True)

    With this basic Flask application set up, let’s move on to building the chat interface.

Building the Chat Interface

  1. Create a new directory called templates inside your project directory.

  2. Inside the templates directory, create a new HTML file called index.html.

  3. Open the index.html file and add the following HTML code: 
    	
 <!DOCTYPE html>
 <html>
 <head>
     <title>Real-time Chat</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
     <div class="chat-container">
         <div class="chat-header">
             <h2>Real-time Chat</h2>
         </div>
         <div class="chat-messages"></div>
         <div class="chat-input">
             <input type="text" id="message-input" placeholder="Type your message...">
             <button id="send-button">Send</button>
         </div>
     </div>
	
     <script src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
 </html>

  4. Create a new directory called static inside your project directory.

  5. Inside the static directory, create a new CSS file called style.css.

  6. Open the style.css file and add the following CSS code: 
     .chat-container {
     width: 400px;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
	
 .chat-header {
     text-align: center;
     margin-bottom: 10px;
 }
	
 .chat-messages {
     height: 300px;
     overflow-y: scroll;
     border: 1px solid #ccc;
     padding: 10px;
 }
	
 .chat-input {
     margin-top: 10px;
 }
	
 #message-input {
     width: 80%;
     padding: 5px;
 }
	
 #send-button {
     padding: 5px 10px;
 }

    At this point, we have set up the basic chat interface. Now let’s implement real-time communication using Socket.IO.

Implementing Real-time Communication

  1. Add the following code to the app.py file to handle the socket connections: 
     @socketio.on('connect')
 def handle_connect():
     print('Client connected')
	
 @socketio.on('disconnect')
 def handle_disconnect():
     print('Client disconnected')
  2. Update the index function in app.py to include the Socket.IO script: 
     @app.route('/')
 def index():
     return render_template('index.html')
  3. Open the script.js file located in the static directory and add the following JavaScript code: 
     // Establish connection with the server
 var socket = io.connect();
	
 // Handle connection event
 socket.on('connect', function () {
     console.log('Connected to the server');
 });
	
 // Handle disconnection event
 socket.on('disconnect', function () {
     console.log('Disconnected from the server');
 });
  4. In the index.html file, add the following script tag just before the closing body tag: 
    	
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
 <script src="{{ url_for('static', filename='script.js') }}"></script>

    That’s it! We have successfully implemented a real-time chat application in Python using Flask and Socket.IO.

Conclusion

In this tutorial, we learned how to build a real-time chat application using Python, Flask, and Socket.IO. We started by setting up our development environment and creating a basic Flask application. Then, we built the chat interface using HTML and CSS. Finally, we implemented real-time communication using Socket.IO.

You can further enhance this application by adding features like user authentication, message persistence, and more. Experiment with different Socket.IO events to create a more interactive and dynamic chat experience.

Happy coding!

Published:

Related Articles