Я следовал этому руководству на YouTube: https://www.youtube.com/watch?v=zQDzNNt6xd4 для создания приложения чата. Я пытался сохранить сообщения, но это не работает. Я также следовал этому руководству для сохранения истории чата: https://www.youtube.com/watch?v=pigpDSOBNMc
Вот код Javascript:
document.addEventListener('DOMContentLoaded', () => {
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', () => {
socket.send("I am connected");
});
socket.on('message', data => {
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 => {
console.log(data);
});
//Sending message to recipient
document.querySelector('#send_message').onclick = () => {
socket.send(document.querySelector('#user_message').value);
}
});
Вотфайл приложения:
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 '<History %r>' % 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)
Вот файл HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation bar -->
<nav>
</nav>
<div id="main-section">
<!-- Room selection -->
<nav id="sidebar">
</nav>
<!-- Message area -->
<div id="rightside-pannel">
<!-- Display message -->
<div id="display-message-section">
</div>
<form method="POST" action="/">
<div id="input-area">
<input type="text" id="user_message" placeholder="Type here..."
autocomplete="off">
<button type="button" id="send_message">Send</button>
</form>
</div>
</div>
</div>
<!-- Get username -->
<!-- SocketIO JS -->
</body>
<!-- Custom SocketIO KS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='scripts/socketio.js') }}"></script>
</html>