How to Use Link a Server to a flask app running on an exposed local host

Question

Right now I have a chatbox that uses socket.io and mongoDB to communicate with a server that allows the text to be sent to the chatbox. If need be i can do away with the mongoDB as long as it does not interfere with the displaying of the text. All of this runs on a localhost port 5000 which i have exposed using ngrok which allows me to access it through a domain. The issue is that when i access the app from a domain, all of the functionality of my server does not do what its supposed to,(I have a server.js, index.html, and a flask-app.py), the index.html and the flask-app work. I'll include the domain for reference.

https://143bd63a.ngrok.io

I think it may have somthing to deal with the fact that the server.js does not run in conjuction with the index and the flask-app that actually returns the render_template. I start the server using npm start.

I know I know the index.html is a mess and noob level please have mercy

Here is the server:

const mongo = require('mongodb').MongoClient;
const client = require('socket.io').listen(4000).sockets;
// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', function(err, db){
    if(err){
        throw err;
}

console.log('MongoDB connected...');


// Connect to Socket.io
client.on('connection', function(socket){
    let chat = db.collection('chats');

    // Create function to send status
    sendStatus = function(s){
        socket.emit('status', s);
    }

    // Get chats from mongo collection
    chat.find().limit(100).sort({_id:1}).toArray(function(err, res){
        if(err){
            throw err;
        }
        // Emit the messages
        socket.emit('output', res);

    });
  // Handle input events
    socket.on('input', function(data){
        let name = data.name;
        let message = data.message;
            // Insert message
            chat.insert({name: name, message: message}, function(){
                client.emit('output', [data]);
                // Send status object
                sendStatus({
                    message: '',
                    clear: true
                });
            });
    });

    // Handle clear
    socket.on('clear', function(data){
        // Remove all chats from collection
        chat.remove({}, function(){
            // Emit cleared
            socket.emit('cleared');
        });
    });
});// end of server
});

This is the index.html (sorry for the mess)

This is the flask-app:

import os
import time
from flask import Flask,render_template, request,json,jsonify
import chatbot
import pandas as pd
#pip install pandas
#pip install nltk
#pip install

app = Flask(__name__)
messagesList = [

]
#this basically just sets the excel file to a couple of empty cells
def reset_excel():
    cols = ['User TimeStamp', 'Bot TimeStamp', 'User Message', 'Bot Message', 'Status']
    empty_data = [['','','','','']]
    df = pd.DataFrame(empty_data, columns=cols)
    df.to_csv('database.csv', encoding='utf-8', index=False)

#this makes sure that the dict is in order for the excel file
def append_in_order(dictionary_list):
    the_data = [[dictionary_list[0]['user_time'], dictionary_list[2]['bot time'],
                dictionary_list[3]['user'],dictionary_list[1]['bot'],dictionary_list[4]['status']]]
    return the_data

#function that dumps the data to a panda then a csv
def dumpData(messagesList):
    cols = ['User TimeStamp', 'Bot TimeStamp', 'User Message', 'Bot Message', 'Status']
    the_data =  append_in_order(messagesList)
    df = pd.DataFrame(the_data, columns= cols)
    with open('database.csv', 'a') as file:
        df.to_csv(file, header=False, index = False)
    messagesList.clear()

#initialize the time variable
ts = time.gmtime()

def printmessage(txt):
    if txt == 'message list':
        print(messagesList)
    elif txt == 'bot fail':
        print('bot failed')
    print(txt)
def dummmybot(txt):
    msg = chatbot.bot(txt)

    return {'message': msg}

#this will lauch the html page
@app.route('/')
def chat():
    return render_template('index.html')

#this will collect the input from the user
@app.route('/sendToBot', methods=['POST'])
def sendToBot():
    messagesList.clear()
    message = request.form['message'] #this is a string that is returned from the ajax
    if message == 'reset_excel_database': #sec
        reset_excel()
    message_time = time.strftime("%m-%d %H:%M:%S") #grab the timestamp for the user message
    messagesList.append({'user_time':message_time})
    bot_message = chatbot.bot(message)

    item_summary = bot_message[0]
    autocorrect = bot_message[1]
    send_to_chat = {'summary': item_summary, 'autocorrect':autocorrect}#pass message into bot
    printmessage(bot_message[0])
    printmessage(bot_message[1])

    messagesList.append({'bot':send_to_chat['summary']})#append the bot message
    bot_message_time = time.strftime("%m-%d %H:%M:%S")
    messagesList.append({'bot time':bot_message_time}) #append the bot time

    new_message = {'user':message}
    messagesList.append(new_message)

    return jsonify(send_to_chat) #returns the message from the bot

@app.route('/correct', methods=['POST'])
def correct():
    ignore = request.form['message']#just a placeholder
    correct_id = {'status':'Correct'}
    messagesList.append(correct_id)
    #dump the message list to a csv file using pandas
    printmessage('message list')
    dumpData(messagesList)
    return jsonify(correct_id)

@app.route('/incorrect', methods= ['POST'])
def incorrect():
    ignore = request.form['message']#just a placeholder
    incorrect_id = {'status':'inc   orrect'}
    messagesList.append(incorrect_id)
    printmessage('message list')
    #dump the message list int a csv file using pandas
    dumpData(messagesList)
    return jsonify(incorrect_id)

if __name__=="__main__":
    app.run(port = 27017)

Solved

Turns out that I need to use Flask-socketio in conjunction with my existing flask. In the html I just need to have the line var socket = io.connect()

How to Use Link a Server to a flask app running on an exposed local host

Solved

Answers (1)

Related Questions