Html template that dynamically updates with new data from changed file - html

Question

How to make html view/template that updates with new data from changed file
I am developing a chat messenger service and am storing messages in a SQL database i have made a similar file checking function like above question.
Is there anyway to add the output of this function into the html every time a new change to the database is detected?

Answer 1

You haven't gone in to much detail on what you're using to do this, but I'm going to answer and assume you're working with SocketIO.
Is there anyway to add the output of this function into the html every time a new change to the database is detected?
This is probaby the wrong way to think about this. The question you linked deals with tailing a file, and then acting appropriately. You shouldn't need to detect a database change, since your event function should be handling all the messages.
I created a gist of a very basic chat app which includes the functionality you desicribe. (Based on a tutorial which is linked in the README).
You should have a function which handles an incoming message from a user, then emits it on the socket, so other users on the system will see that message. This is where you want to update your database:
#socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
""" handle an incoming chat message, add to db, then emit to room """
# Unique ID for the session
json['sid'] = request.sid
print('received my event: ' + str(json)) # Just prints to server terminal
# Build the database entry and commit
new_db_entry = ChatHistory(sid = json['sid'],
message = json['message'],
username= json['user_name'])
db_session.add(new_db_entry)
db_session.commit()
# Escape nasty html. Do this for each var the user enters
json['user_name'] = su.escape(json['user_name'])
json['message'] = su.escape(json['message'])
socketio.emit('my response', json, callback=messageReceived)
You then have some corresponding Javascript which recieves this event in the frontend, and updates the HTML:
socket.on( 'my response', function( msg ) {
if( typeof msg.user_name !== 'undefined' ) {
$( 'div.message_holder' ).append( '<div><b style="color: #000">'+msg.user_name+'</b> '+msg.message+'</div>' )
}
})
However how do you render the history in a user's browser when they first connect? You could write some Javascript to do this, however my example simply queries the database when a user first renders the session.html template (the frontend):
#app.route('/')
def sessions():
history = ChatHistory.query.all()
return render_template('session.html', history=history)
And then in the corresponding template, builds the page at load time:
<div class="message_holder">
{% for chatItem in history %}
<div><b style="color: #000">{{ chatItem.username }}</b> {{ chatItem.message }}</div>
{% endfor %}
</div>
This is just a sample of what can be done.