This commit is contained in:
fingadumbledore 2023-01-30 07:41:29 +01:00
parent 4e745b0da9
commit d2ae3e5b47
6 changed files with 116 additions and 144 deletions

7
test/database.py Normal file
View File

@ -0,0 +1,7 @@
import sqlite3
conn = sqlite3.connect("chat.db")
c = conn.cursor()
c.execute("CREATE TABLE messages (username text, message text, timestamp text)")
conn.commit()
conn.close()

View File

@ -1,70 +0,0 @@
<!-- chat.html -->
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
// JavaScript-Code, um Nachrichten abzurufen und zu senden
// JavaScript-Code in chat.html
// Globale Variablen
let username;
// Senden einer Nachricht
function sendMessage() {
let message = document.getElementById("message").value;
fetch("/send_message", {
method: "POST",
body: JSON.stringify({
"username": username,
"message": message
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("message").value = "";
getMessages();
})
.catch(error => {
console.error("Error:", error);
});
}
// Abrufen von Nachrichten
function getMessages() {
fetch("/get_messages")
.then(response => response.json())
.then(data => {
let chatWindow = document.getElementById("chat-window");
chatWindow.innerHTML = "";
for (let message of data) {
chatWindow.innerHTML += `<p>${message.username}: ${message.message}</p>`;
}
})
.catch(error => {
console.error("Error:", error);
});
}
// Laden der Nachrichten beim Laden der Seite
window.onload = function() {
username = document.getElementById("username").value;
getMessages();
}
</script>
</head>
<body>
<div id="chat-window">
<!-- Nachrichten werden hier angezeigt -->
</div>
<form id="send-message-form">
<textarea id="message"></textarea>
<input type="button" value="Send" onclick="sendMessage()">
</form>
</body>
</html>

View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
</head>
<body>
<h1>Welcome to the Chat Room</h1>
<form method="POST" action="{{ url_for('enter_chat') }}">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="message">Message:</label>
<input type="text" id="message" name="message">
<br>
<input type="submit" value="Enter Chat">
</form>
</body>
</html>

View File

@ -1,15 +1,83 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<form action="/enter_chat" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Enter Chat">
</form>
</body>
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
background-color: lightblue;
}
#messages {
width: 50%;
height: 50%;
overflow-y: scroll;
border: 1px solid gray;
padding: 10px;
margin-bottom: 10px;
background-color: white;
border-radius: 10px;
}
.message {
margin-bottom: 10px;
}
.username {
font-weight: bold;
color: blue;
}
.timestamp {
font-size: 12px;
color: gray;
}
input[type="text"] {
width: 50%;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
border-radius: 10px;
border: none;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: lightgray;
border: none;
border-radius: 10px;
cursor: pointer;
}
</style>
<script>
function getMessages() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/get");
xhr.onload = function() {
document.getElementById("messages").innerHTML = xhr.responseText;
};
xhr.send();
}
function sendMessage() {
var message = document.getElementById("message").value;
var username = document.getElementById("username").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/send");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("message=" + message + "&username=" + username);
}
</script>
</head>
<body onload="getMessages(); setInterval(getMessages, 1000);">
<div id="messages"></div>
<input type="text" id="username" placeholder="Username">
<input type="text" id="message" placeholder="Message">
<button onclick="sendMessage();">Send</button>
</body>
</html>

View File

@ -0,0 +1,3 @@
{% for message in messages %}
<p>{{ message[0] }}: {{ message[1] }} ({{ message[2] }})</p>
{% endfor %}

View File

@ -1,52 +1,34 @@
from flask import Flask, render_template, request, jsonify
from flask import Flask, request, render_template
import sqlite3
app = Flask(__name__)
# Verbindung zur Datenbank herstellen
conn = sqlite3.connect('chat.db', check_same_thread=False)
cursor = conn.cursor()
# Tabelle erstellen, falls sie nicht existiert
cursor.execute('''CREATE TABLE IF NOT EXISTS messages
(id INTEGER PRIMARY KEY, username TEXT, message TEXT, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)''')
conn.commit()
@app.route('/')
@app.route("/")
def index():
return render_template('index.html')
return render_template("index.html")
@app.route("/enter_chat", methods=["GET", "POST"])
def enter_chat():
if request.method == "POST":
# Handle POST request
pass
elif request.method == "GET":
# Handle GET request
return render_template("enter_chat.html")
@app.route('/chat')
def chat():
return render_template('chat.html')
@app.route('/send_message', methods=['POST'])
def send_message():
username = request.form.get('username')
message = request.form.get('message')
# Nachricht in die Datenbank einfügen
cursor.execute("INSERT INTO messages (username, message) VALUES (?,?)", (username, message))
@app.route("/send", methods=["POST"])
def send():
message = request.form["message"]
username = request.form["username"]
conn = sqlite3.connect("chat.db")
c = conn.cursor()
c.execute("INSERT INTO messages (username, message) VALUES (?, ?)", (username, message))
conn.commit()
conn.close()
return render_template("index.html")
return jsonify({'status': 'OK'})
@app.route("/get")
def get():
conn = sqlite3.connect("chat.db")
c = conn.cursor()
c.execute("SELECT username, message, timestamp FROM messages")
messages = c.fetchall()
conn.close()
return render_template("messages.html", messages=messages)
@app.route('/get_messages')
def get_messages():
cursor.execute("SELECT * FROM messages ORDER BY timestamp ASC")
messages = cursor.fetchall()
return jsonify({'messages': messages})
if __name__ == '__main__':
app.run()
if __name__ == "__main__":
app.run()