title: How to send message from server to client using Flask-Socket IO
body: <p>I'm trying to create a python app that can send message from server to client. Currently I'm using this sample code from <a href="https://github.com/j2kun/flask-sockets-example" rel="noreferrer">here</a>. It's a chat app and it's working fine. I tried to modified the app and add a new function in the server side python code that will print a message "Dummy" into the client but seems like it didn't work.</p>
  
  <p>Here's my html code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;ul id="messages"&gt;&lt;/ul&gt;
      &lt;ul id="output"&gt;&lt;/ul&gt;
      &lt;form action=""&gt;
        &lt;input id="m" autocomplete="off" /&gt;&lt;button&gt;Send&lt;/button&gt;
      &lt;/form&gt;
  
  &lt;script src="{{url_for('static', filename='assets/vendor/socket.io.min.js')}}"&gt;&lt;/script&gt;
  &lt;script src="{{url_for('static', filename='assets/vendor/jquery.js')}}"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    var socket = io.connect('http://127.0.0.1:5000/chat');
  
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  
    socket.on('chat message', function(msg){
      $('#messages').html($('&lt;li&gt;').text(msg));
    });
  
    socket.on('output', function(msg){
      alert(msg)
      $('#messages').html($('&lt;li&gt;').text(msg));
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my backend code:</p>
  
  <p><strong>web_app.py</strong></p>
  
  <pre><code>from flask import Flask
  from flask import render_template
  from flask_socketio import SocketIO
  from flask_socketio import emit
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'secret!'
  socketio = SocketIO(app)
  connected = False
  
  def socket_onload(json):
      socketio.emit('output', str(json), namespace='/chat')
      print('received message: ' + str(json))
  
  
  @socketio.on('chat message', namespace='/chat')
  def handle_chat_message(json):
      print('received message: ' + str(json))
      emit('chat message', str(json), broadcast=True)
  
  
  @socketio.on('connect')  # global namespace
  def handle_connect():
      global connected
      connected = True
      print('Client connected')
  
  @socketio.on('connect', namespace='/chat')
  def handle_chat_connect():
      print('Client connected to chat namespace')
      emit('chat message', 'welcome!')
  
  @socketio.on('disconnect', namespace='/chat')
  def test_disconnect():
      print('Client disconnected')
  
  
  @app.route('/')
  def index():
      return render_template('index.html')
  
  
  @app.route('/blah/')
  def blah():
      return render_template('blah.html')
  </code></pre>
  
  <p><strong>main.py</strong></p>
  
  <pre><code>import web_app
  import threading
  import time
  
  def main():
      import web_app
      webapp_thread = threading.Thread(target=run_web_app)
      webapp_thread.start()
      # webapp_thread = threading.Thread(target=run_web_app, args=(i,))
  
      while web_app.connected==False:
          print "waiting for client to connect"
          time.sleep(1)
          pass
  
      print "Connected..."
      time.sleep(3)
      print "Trying to print dummy message..."
      web_app.socket_onload("Dummy")
  
  def run_web_app():
      web_app.socketio.run(web_app.app)
  
  if __name__ == '__main__':
      main()
  </code></pre>
  
  <p>I can see "received message: Dummy" in the terminal but nothing's change on the web browser.</p>