Я решаю создать чат-сайт с SocketIO, и я решил сначала попробовать SocketIO.
Я написал код ниже:
Flask
import os
import requests
from flask import Flask, jsonify, render_template, request
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
socketio = SocketIO(app)
@app.route("/")
def index():
return render_template("index.html")
@socketio.on("send")
def vote(data):
print("received message.")
message = data['message']
emit("announce message", {"message": message}, broadcast=True)
if __name__ == '__main__':
app.run(debug=True)
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
<link rel = "stylesheet" src="{{ url_for("static", filename = "styles.css") }}">
<title>Messages</title>
</head>
<body>
<ul id="message">
</ul>
<hr>
<textarea id="textbox" placeholder="Message..."></textarea>
<button id="vote">Send</button>
</body>
</html>
Javascript (index. js):
document.addEventListener('DOMContentLoaded', () => {
// Connect to websocket
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
// When connected, configure buttons
socket.on('connect', () => {
// The button should emit the value of the textbox
document.getElementById('send').onclick = () => {
const message = document.getElementById('textbox').value;
socket.emit('send', {'message': message});
};
});
// When a new vote is announced, add to the unordered list
socket.on('announce message', data => {
const li = document.createElement('li');
li.innerHTML = `Message: ${data.message}`;
document.getElementById('message').append(li);
});
});
Приложение должно добавлять сообщение, указанное в текстовом поле, когда я нажимаю кнопку, но при этом ничего не происходит. Функция печати «полученное сообщение» не распечатала. Нет сообщений об ошибках в консоли python или js. Единственное, что там написано:
XHR finished loading: GET "<URL>".
socket.io.min.js:1 XHR finished loading: GET "http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=1592617159769-5&sid=367fef078db34477ba68465900a058b7".
i.create @ socket.io.min.js:1
i @ socket.io.min.js:1
o.request @ socket.io.min.js:1
o.doPoll @ socket.io.min.js:1
n.poll @ socket.io.min.js:2
n.onData @ socket.io.min.js:2
(anonymous) @ socket.io.min.js:1
n.emit @ socket.io.min.js:1
i.onData @ socket.io.min.js:1
i.onLoad @ socket.io.min.js:1
hasXDR.e.onreadystatechange @ socket.io.min.js:1
Кто-нибудь может мне помочь?