├── README.md
├── main.py
├── static
└── css
│ └── style.css
└── templates
├── base.html
├── home.html
└── room.html
/README.md:
--------------------------------------------------------------------------------
1 | # Python-Live-Chat-App
2 | Uses Flask Sockets to create a live chat room application.
3 |
--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, render_template, request, session, redirect, url_for
2 | from flask_socketio import join_room, leave_room, send, SocketIO
3 | import random
4 | from string import ascii_uppercase
5 |
6 | app = Flask(__name__)
7 | app.config["SECRET_KEY"] = "hjhjsdahhds"
8 | socketio = SocketIO(app)
9 |
10 | rooms = {}
11 |
12 | def generate_unique_code(length):
13 | while True:
14 | code = ""
15 | for _ in range(length):
16 | code += random.choice(ascii_uppercase)
17 |
18 | if code not in rooms:
19 | break
20 |
21 | return code
22 |
23 | @app.route("/", methods=["POST", "GET"])
24 | def home():
25 | session.clear()
26 | if request.method == "POST":
27 | name = request.form.get("name")
28 | code = request.form.get("code")
29 | join = request.form.get("join", False)
30 | create = request.form.get("create", False)
31 |
32 | if not name:
33 | return render_template("home.html", error="Please enter a name.", code=code, name=name)
34 |
35 | if join != False and not code:
36 | return render_template("home.html", error="Please enter a room code.", code=code, name=name)
37 |
38 | room = code
39 | if create != False:
40 | room = generate_unique_code(4)
41 | rooms[room] = {"members": 0, "messages": []}
42 | elif code not in rooms:
43 | return render_template("home.html", error="Room does not exist.", code=code, name=name)
44 |
45 | session["room"] = room
46 | session["name"] = name
47 | return redirect(url_for("room"))
48 |
49 | return render_template("home.html")
50 |
51 | @app.route("/room")
52 | def room():
53 | room = session.get("room")
54 | if room is None or session.get("name") is None or room not in rooms:
55 | return redirect(url_for("home"))
56 |
57 | return render_template("room.html", code=room, messages=rooms[room]["messages"])
58 |
59 | @socketio.on("message")
60 | def message(data):
61 | room = session.get("room")
62 | if room not in rooms:
63 | return
64 |
65 | content = {
66 | "name": session.get("name"),
67 | "message": data["data"]
68 | }
69 | send(content, to=room)
70 | rooms[room]["messages"].append(content)
71 | print(f"{session.get('name')} said: {data['data']}")
72 |
73 | @socketio.on("connect")
74 | def connect(auth):
75 | room = session.get("room")
76 | name = session.get("name")
77 | if not room or not name:
78 | return
79 | if room not in rooms:
80 | leave_room(room)
81 | return
82 |
83 | join_room(room)
84 | send({"name": name, "message": "has entered the room"}, to=room)
85 | rooms[room]["members"] += 1
86 | print(f"{name} joined room {room}")
87 |
88 | @socketio.on("disconnect")
89 | def disconnect():
90 | room = session.get("room")
91 | name = session.get("name")
92 | leave_room(room)
93 |
94 | if room in rooms:
95 | rooms[room]["members"] -= 1
96 | if rooms[room]["members"] <= 0:
97 | del rooms[room]
98 |
99 | send({"name": name, "message": "has left the room"}, to=room)
100 | print(f"{name} has left the room {room}")
101 |
102 | if __name__ == "__main__":
103 | socketio.run(app, debug=True)
--------------------------------------------------------------------------------
/static/css/style.css:
--------------------------------------------------------------------------------
1 | .content {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | }
6 |
7 | .buttons {
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | justify-content: center;
12 | gap: 10px;
13 | }
14 |
15 | .join {
16 | display: flex;
17 | flex-direction: row;
18 | width: 100%;
19 | }
20 |
21 | .create-btn {
22 | width: 100%;
23 | }
24 |
25 | .message-box {
26 | border-color: black;
27 | border-width: 2px;
28 | border-style: solid;
29 | border-radius: 10px;
30 | background-color: whitesmoke;
31 | height: 80vh;
32 | display: flex;
33 | flex-direction: column;
34 | width: 80vw;
35 | align-items: stretch;
36 | }
37 |
38 | .messages {
39 | overflow-y: scroll;
40 | flex: 1;
41 | width: 100%;
42 | }
43 |
44 | .inputs {
45 | padding: 10px;
46 | display: flex;
47 | }
48 |
49 | h2 {
50 | text-align: center;
51 | }
52 |
53 | #message {
54 | flex: 1;
55 | }
56 |
57 | .text {
58 | display: flex;
59 | flex-direction: row;
60 | align-items: center;
61 | justify-content: space-between;
62 | padding-left: 10px;
63 | padding-right: 10px;
64 | }
65 |
66 | .muted {
67 | font-size: 10px;
68 | color: darkgray;
69 | }
70 |
--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Chat App
6 |
10 |
15 |
16 |
17 | {% block content %} {% endblock %}
18 |
19 |
20 |
--------------------------------------------------------------------------------
/templates/home.html:
--------------------------------------------------------------------------------
1 | {% extends 'base.html' %} {% block content %}
2 |
24 | {% endblock %}
25 |
--------------------------------------------------------------------------------
/templates/room.html:
--------------------------------------------------------------------------------
1 | {% extends 'base.html' %} {% block content %}
2 |
3 |
Chat Room: {{code}}
4 |
5 |
6 |
13 |
16 |
17 |