Improved chat.py and created a temporary chat.html to be transferred to react later
This commit is contained in:
white
171
package-lock.json
generated
Normal file
171
package-lock.json
generated
Normal file
@@ -0,0 +1,171 @@
|
||||
{
|
||||
"name": "Software Project",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
|
||||
"integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.3.tgz",
|
||||
"integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.9",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
|
||||
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
|
||||
"integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.25.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
|
||||
"integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3"
|
||||
}
|
||||
}
|
||||
@@ -4,36 +4,10 @@ from database.database import Database
|
||||
|
||||
chat_bp = Blueprint("chat", __name__)
|
||||
|
||||
@chat_bp.route("/send_chat", methods=["POST"])
|
||||
@login_required
|
||||
def send_chat():
|
||||
"""
|
||||
Works with react, takes the chat entered by a logged in user and stores in database
|
||||
"""
|
||||
# <---------------------- ROUTES NEEDS TO BE CHANGED TO VIDEO OR DELETED AS DEEMED APPROPRIATE ---------------------->
|
||||
# TODO: Add a route that deletes all chat logs when the stream is finished
|
||||
|
||||
# Take the message information from frontend
|
||||
data = request.get_json()
|
||||
chatter_id = data.get("chatter_id")
|
||||
stream_id = data.get("stream_id")
|
||||
message = data.get("message")
|
||||
|
||||
# Input validation - chatter is logged in, message is not empty, stream exists
|
||||
if not all(chatter_id, message, stream_id):
|
||||
return {"chat_sent": False}
|
||||
|
||||
# Save chat information to database so other users can see
|
||||
db = Database()
|
||||
cursor = db.create_connection()
|
||||
cursor.execute("""
|
||||
INSERT INTO chat (chatter_id, stream_id, message)
|
||||
VALUES (?, ?, ?);""", (chatter_id, stream_id, message))
|
||||
db.commit_data()
|
||||
|
||||
return {"chat_sent": True}
|
||||
|
||||
|
||||
# <---------------------- ROUTE NEEDS TO BE CHANGED TO VIDEO OR DELETED AS DEEMED APPROPRIATE ---------------------->
|
||||
@chat_bp.route("/chat/<int:stream_id>", methods=["GET"])
|
||||
@chat_bp.route("/chat/<int:stream_id>")
|
||||
def get_past_chat(stream_id):
|
||||
"""
|
||||
Returns a JSON object to be passed to the server.
|
||||
@@ -51,11 +25,11 @@ def get_past_chat(stream_id):
|
||||
all_chats = cursor.execute("""
|
||||
SELECT *
|
||||
FROM (
|
||||
SELECT chatter_id, message, time_sent
|
||||
FROM chat
|
||||
WHERE stream_id = ?
|
||||
ORDER BY time_sent DESC
|
||||
LIMIT 50
|
||||
SELECT chatter_id, message, time_sent
|
||||
FROM chat
|
||||
WHERE stream_id = ?
|
||||
ORDER BY time_sent DESC
|
||||
LIMIT 50
|
||||
)
|
||||
ORDER BY time_sent ASC;""", (stream_id,)).fetchall()
|
||||
db.close_connection()
|
||||
@@ -64,14 +38,48 @@ def get_past_chat(stream_id):
|
||||
chat_history = [{"chatter_id": chat[0], "message": chat[1], "time_sent": chat[2]} for chat in all_chats]
|
||||
|
||||
# Pass the chat history to the proxy
|
||||
return jsonify(chat_history)
|
||||
return jsonify({"chat_history": chat_history}), 200
|
||||
|
||||
@chat_bp.route("/send_chat", methods=["POST"])
|
||||
@login_required
|
||||
def send_chat():
|
||||
"""
|
||||
Works with react, takes the chat entered by a logged in user and stores in database
|
||||
"""
|
||||
|
||||
# Take the message information from frontend
|
||||
data = request.get_json()
|
||||
chatter_id = data.get("chatter_id")
|
||||
stream_id = data.get("stream_id")
|
||||
message = data.get("message")
|
||||
|
||||
# Input validation - chatter is logged in, message is not empty, stream exists
|
||||
if not all([chatter_id, message, stream_id]):
|
||||
return jsonify({"chat_sent": False}), 400
|
||||
|
||||
# Save chat information to database so other users can see
|
||||
db = Database()
|
||||
cursor = db.create_connection()
|
||||
cursor.execute("""
|
||||
INSERT INTO chat (chatter_id, stream_id, message)
|
||||
VALUES (?, ?, ?);""", (chatter_id, stream_id, message))
|
||||
db.commit_data()
|
||||
db.close_connection()
|
||||
|
||||
return jsonify({"chat_sent": True}), 200
|
||||
|
||||
|
||||
|
||||
|
||||
@chat_bp.route("/load_new_chat/<int:stream_id>", methods=["GET"])
|
||||
def get_recent_chat(stream_id):
|
||||
"""
|
||||
Fetch new chat messages on a stream a user has already loaded in to.
|
||||
"""
|
||||
# Get the last received chat to avoid repeating old chats
|
||||
last_received = request.args.get("last_received") # last_received is a time stamp
|
||||
if not last_received:
|
||||
return jsonify({"error": "last_received timestamp required"}), 400
|
||||
|
||||
# Get the most recent chats from the database
|
||||
db = Database()
|
||||
@@ -86,4 +94,5 @@ def get_recent_chat(stream_id):
|
||||
db.close_connection()
|
||||
|
||||
# Send the new chats to frontend
|
||||
return jsonify(new_chats)
|
||||
chat_data = [{"chatter_id": chat[0], "message": chat[1], "time_sent": chat[2]} for chat in new_chats]
|
||||
return jsonify(chat_data), 200
|
||||
83
web_server/blueprints/templates/chat.html
Normal file
83
web_server/blueprints/templates/chat.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chat Interface</title>
|
||||
|
||||
<script>
|
||||
|
||||
let last_received = "";
|
||||
const stream_id = "{{ stream_id }}";
|
||||
|
||||
function add_to_chat(data){
|
||||
const chat_container = document.getElementById("chat_container");
|
||||
|
||||
data.forEach(element => {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = `${element.time_sent} ${element.chatter_id}: ${element.message}`;
|
||||
chat_container.appendChild(div);
|
||||
last_received = element.time_sent;
|
||||
});
|
||||
}
|
||||
|
||||
function loadPrevChat() {
|
||||
const init_chat_logs = JSON.parse('{{ chat_history | tojson }}');
|
||||
add_to_chat(init_chat_logs);
|
||||
|
||||
}
|
||||
|
||||
function sendChat(){
|
||||
// Get the chat message sent by user
|
||||
const chat_message = document.getElementById("messageInput").value;
|
||||
document.getElementById("messageInput").value = "";
|
||||
|
||||
// Pass the chat message to python to store in chat log db
|
||||
const data = {"chatter_id": "{{ chatter_id }}", "stream_id": "{{ stream_id }}", "message":chat_message};
|
||||
const json_data = JSON.stringify(data);
|
||||
|
||||
fetch("/send_chat", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: json_data
|
||||
})
|
||||
|
||||
// Check if message has been sent
|
||||
.then(response => {
|
||||
if (response.ok){
|
||||
getRecentChats();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getRecentChats(){
|
||||
// Let the backend know the most recent chat message the user has
|
||||
fetch(`/recent_chat/${stream_id}?last_received=${last_received}`)
|
||||
.then(response => {
|
||||
if (!response.ok){
|
||||
throw new Error(`Failed to fetch chats`)
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
add_to_chat(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error fetching recent chats:", error);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', loadPrevChat);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Chat for Stream #{{ stream_id }}</h1>
|
||||
<div id="chat_container" style="max-height: 400px; overflow-y: auto;"></div>
|
||||
<input type="text" id="messageInput" placeholder="Type a message" />
|
||||
<button onclick="sendChat()">Send</button>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -52,7 +52,7 @@ CREATE TABLE follows
|
||||
DROP TABLE IF EXISTS chat;
|
||||
CREATE TABLE chat
|
||||
(
|
||||
message_id INTEGER,
|
||||
message_id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
stream_id INTEGER NOT NULL,
|
||||
chatter_id VARCHAR(50) NOT NULL,
|
||||
message VARCHAR(256) NOT NULL,
|
||||
|
||||
Reference in New Issue
Block a user