cdez/CS460-Projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add markdown support to the webclient

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 21:08:56 -07:00
parent 88e58bb79c
commit 4b7fe624bb
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
chatserver/server.py
View file

@ -8,6 +8,7 @@ from flask import Flask, request, jsonify
from flask_socketio import SocketIO, emit, join_room, leave_room from flask_socketio import SocketIO, emit, join_room, leave_room
from flask_cors import CORS from flask_cors import CORS
from datetime import datetime # Import for timestamps from datetime import datetime # Import for timestamps
import markdown # Import the markdown library
# Flask app for REST API and WebSocket # Flask app for REST API and WebSocket
app = Flask(__name__) app = Flask(__name__)
@ -78,6 +79,9 @@ def handle_message(username, chat_room, message):
# Add a timestamp to the message # Add a timestamp to the message
timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S') timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
# Convert the message to HTML using Markdown
html_message = markdown.markdown(message)
# Store the message in the chat room's history # Store the message in the chat room's history
if chat_room not in message_history: if chat_room not in message_history:
message_history[chat_room] = [] message_history[chat_room] = []
@ -86,7 +90,7 @@ def handle_message(username, chat_room, message):
# Broadcast the message to WebSocket clients in the chat room # Broadcast the message to WebSocket clients in the chat room
socketio.emit('message', { socketio.emit('message', {
'username': username, 'username': username,
'message': message, 'message': html_message, # Send the HTML-rendered message
'timestamp': timestamp, 'timestamp': timestamp,
'chat_room': chat_room 'chat_room': chat_room
}, room=chat_room) }, room=chat_room)

12
chatserver/templates/index.html
View file

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Chat Client</title> <title>Web Chat Client</title>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script> <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<style> <style>
/* Light Mode Styles */ /* Light Mode Styles */
body.light-mode { body.light-mode {
@ -199,7 +201,15 @@
const messageElement = document.createElement('div'); const messageElement = document.createElement('div');
const timestamp = data.timestamp ? `[${data.timestamp}]` : ''; const timestamp = data.timestamp ? `[${data.timestamp}]` : '';
const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : ''; const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : '';
messageElement.textContent = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${data.message}`;
// Render the message as HTML using marked.js
const renderedMessage = marked.parse(data.message);
// Sanitize the HTML using DOMPurify
const sanitizedMessage = DOMPurify.sanitize(renderedMessage);
// Set the inner HTML of the message element
messageElement.innerHTML = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${sanitizedMessage}`;
chatDiv.appendChild(messageElement); chatDiv.appendChild(messageElement);
chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
}); });