title: How to save Flask-SocketIO messages with Flask-SQLAlchemy and Javascript without jQuery?
body: <p>I have followed this tutorial on YouTube: <a href="https://www.youtube.com/watch?v=zQDzNNt6xd4" rel="nofollow noreferrer">https://www.youtube.com/watch?v=zQDzNNt6xd4</a> for creating a chat application. I tried to save the messages but it does not work. 
  I also followed this tutorial for saving the chat history: <a href="https://www.youtube.com/watch?v=pigpDSOBNMc" rel="nofollow noreferrer">https://www.youtube.com/watch?v=pigpDSOBNMc</a> </p>
  
  <p><strong>Here is the Javascript code:</strong> </p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', () =&gt; {
      var socket = io.connect('http://' + document.domain + ':' + location.port);
      console.log('I am connected');
  
      //This sends the message I am now connected
      socket.on('connect', () =&gt; {
          socket.send("I am connected");
      });
  
      socket.on('message', data =&gt; {
          const p = document.createElement('p');
          const br = document.createElement('br');
          p.innerHTML = data;
          document.querySelector('#display-message-section').append(p);
          console.log(data);
      });
  
      socket.on('some-event', data =&gt; {
          console.log(data);
      });
  
      //Sending message to recipient
      document.querySelector('#send_message').onclick = () =&gt; {
          socket.send(document.querySelector('#user_message').value);
      }
  
  });
  
  </code></pre>
  
  <p><strong>Here is the application file:</strong></p>
  
  <pre><code>from flask import Flask, render_template
  from flask_socketio import SocketIO, send, emit
  from flask_sqlalchemy import SQLAlchemy
  
  
  app = Flask(__name__)
  app.config['SECRET_KEY'] = 'm\x13\x96\xe2\xce/\xc8\x1b\xc4\x93@\xf4%\x19\x12\xca]\x9b\xc8\xe3;\xd5\x96='
  socketio = SocketIO(app)
  
  app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
  db = SQLAlchemy(app)
  
  
  class History(db.Model):
      id = db.Column('id', db.Integer, primary_key=True)
      message = db.Column('message', db.String(500))
  
      def __repr__(self):
          return '&lt;History %r&gt;' % self.message
  
  @socketio.on('message')
  def message(p):
      print('Messages: ' + p)
      message = History(message=p)
      db.session.add(message)
      db.session.commit()
      send(p, broadcast=True)
  
  
  @app.route("/")
  def chat():
      messages = History.query.all()
      return render_template('chat.html', messages=messages)
  
  if __name__ == '__main__':
      socketio.run(app, debug=True)
  
  </code></pre>
  
  <p><strong>Here is the HTML file:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!-- Navigation bar --&gt;
      &lt;nav&gt;
      &lt;/nav&gt;
  
      &lt;div id="main-section"&gt;
        &lt;!-- Room selection --&gt;
        &lt;nav id="sidebar"&gt;
        &lt;/nav&gt;
        &lt;!-- Message area --&gt;
        &lt;div id="rightside-pannel"&gt;
          &lt;!-- Display message --&gt;
          &lt;div id="display-message-section"&gt;  
          &lt;/div&gt;
  
          &lt;form method="POST" action="/"&gt;
          &lt;div id="input-area"&gt;
  
            &lt;input type="text" id="user_message" placeholder="Type here..."
            autocomplete="off"&gt;
            &lt;button type="button" id="send_message"&gt;Send&lt;/button&gt;
           &lt;/form&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- Get username --&gt;
      &lt;!-- SocketIO JS --&gt;
    &lt;/body&gt;
      &lt;!-- Custom SocketIO KS --&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"&gt;&lt;/script&gt; 
      &lt;script src="{{ url_for('static', filename='scripts/socketio.js') }}"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>