チャットアプリで日本語が文字化けしてしまう

現在、PythonとFlaskを用いて以下のサイトを参考でチャットアプリを作成しているのですが
日本語でチャットを行うと、文字化けを起こしてしまいます。

おそらく、エンコードをしないといけないのですが、コード内でどの部分を書き換えなければいけないのかわかりません。
どうか、ご教示をお願いします。

参考コード:

main.py

python
1from flask import Flask, render_template
2from flask_socketio import SocketIO
3
4app = Flask(__name__)
5app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
6socketio = SocketIO(app)
7
8@app.route('/')
9def sessions():
10    return render_template('session.html')
11
12def messageReceived(methods=['GET', 'POST']):
13    print('message was received!!!')
14
15@socketio.on('my event')
16def handle_my_custom_event(json, methods=['GET', 'POST']):
17    print('received my event: ' + str(json))
18    socketio.emit('my response', json, callback=messageReceived)
19
20if __name__ == '__main__':
21    socketio.run(app, debug=True)
22

session.html

html
1<!DOCTYPE html>
2  <html lang="en">
3  <head>
4    <title>Flask_Chat_App</title>
5  </head>
6  <body>
7
8    <h3 style='color: #ccc;font-size: 30px;'>No message yet..</h3>
9    <div class="message_holder"></div>
10
11    <form action="" method="POST">
12      <input type="text" class="username" placeholder="User Name"/>
13      <input type="text" class="message" placeholder="Messages"/>
14      <input type="submit"/>
15    </form>
16
17    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
18    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
19    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
20    <script type="text/javascript">
21      var socket = io.connect('http://' + document.domain + ':' + location.port);
22      socket.on( 'connect', function() {
23        socket.emit( 'my event', {
24          data: 'User Connected'
25        } )
26        var form = $( 'form' ).on( 'submit', function( e ) {
27          e.preventDefault()
28          let user_name = $( 'input.username' ).val()
29          let user_input = $( 'input.message' ).val()
30          socket.emit( 'my event', {
31            user_name : user_name,
32            message : user_input
33          } )
34          $( 'input.message' ).val( '' ).focus()
35        } )
36      } )
37      socket.on( 'my response', function( msg ) {
38        console.log( msg )
39        if( typeof msg.user_name !== 'undefined' ) {
40          $( 'h3' ).remove()
41          $( 'div.message_holder' ).append( '<div><b style="color: #000">'+msg.user_name+'</b> '+msg.message+'</div>' )
42        }
43      })
44    </script>
45
46  </body>
47  </html>