Javascript socketio仅在函数中使用window.alert时有效
我遇到了一个很奇怪的问题。 我将使用flask和vanilla javascript进入Webdev。现在我正在尝试使用socketio编写一个简单的聊天。 它似乎只有在函数中使用window.alert时才起作用。 如果我删除它,网站只会重新加载。终端中没有输出,列表中没有添加的元素。我一放回去,一切都很好! 如果我这样做了,消息将显示在列表中,并且在终端中我可以看到flask应用程序的打印 蟒蛇/烧瓶Javascript socketio仅在函数中使用window.alert时有效,javascript,python,flask,socket.io,Javascript,Python,Flask,Socket.io,我遇到了一个很奇怪的问题。 我将使用flask和vanilla javascript进入Webdev。现在我正在尝试使用socketio编写一个简单的聊天。 它似乎只有在函数中使用window.alert时才起作用。 如果我删除它,网站只会重新加载。终端中没有输出,列表中没有添加的元素。我一放回去,一切都很好! 如果我这样做了,消息将显示在列表中,并且在终端中我可以看到flask应用程序的打印 蟒蛇/烧瓶 import os import requests from flask import
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("/", methods=['GET', 'POST'])
def index():
return render_template("index.html")
@socketio.on("submit")
def submit(text):
print("SUBMIT:", text['text'])
text = text['text']
emit("announce text", {'text': text}, broadcast=True)
Javascript
document.addEventListener('DOMContentLoaded', () => {
// Connect to websocket
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
// When connected, configure buttons
socket.on('connect', () => {
console.log("connected");
document.querySelector('#form').onsubmit = () => {
var text = document.querySelector('#text').value;
// window.alert(text)
socket.emit('submit', {'text': text});
window.alert(text); // <-- This line makes it work and not work!
};
});
socket.on('announce text', data => {
// window.alert(data)
var li = document.createElement('li');
li.innerHTML = `${data.text}`;
//window.alert(li);
document.querySelector('#messages').append(li);
});
document.addEventListener('DOMContentLoaded',()=>{
//连接到websocket
var socket=io.connect(location.protocol+'/'+document.domain+':'+location.port);
//连接后,配置按钮
socket.on('connect',()=>{
控制台日志(“已连接”);
document.querySelector(“#form”).onsubmit=()=>{
var text=document.querySelector('#text').value;
//窗口警报(文本)
emit('submit',{'text':text});
窗口。警报(文本);//{
//窗口警报(数据)
var li=document.createElement('li');
li.innerHTML=`${data.text}`;
//窗口警报(li);
document.querySelector(“#messages”).append(li);
});
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="/static/index.js"></script>
<title>Vote</title>
</head>
<body>
<ul id="messages">
</ul>
<hr>
<form class="" id="form" action="" method="post">
<input id="text" type="text" name="" value="">
<input id="submit" type="submit" name="" value="Send">
</form>
</body>
</html>
投票
您需要preventDefault
submit事件,因为表单是以默认行为执行的,所以它向实际路由发出POST请求(因为action
属性是空的)-这就是页面重新加载的原因-使用preventDefault()
您可以阻止表单这样做,就像那样
document.querySelector(“#form”).onsubmit=(e)=>{
e、 预防默认值();
var text=document.querySelector('#text').value;
emit('submit',{'text':text});
};
表单具有默认行为。在这种情况下,它将发送请求并重新加载页面。您需要这样做。就是这样。我在onsuit函数中添加了“return false”,它可以正常工作。