Python 网络连接问题_Python_Flask

Python 网络连接问题

python flask

Python 网络连接问题,python,flask,Python,Flask,我在使用Flask SocketIO时遇到问题每当我运行Flask服务器时单击给定的链接时，我希望我的HTML页面呈现“用户已连接客户端” 代码如下： application.py from flask import Flask from flask_socketio import SocketIO, emit, send from flask import render_template app = Flask(__name__) app.config["SECRET_KEY"] =

我在使用Flask SocketIO时遇到问题

每当我运行Flask服务器时单击给定的链接时，我希望我的HTML页面呈现“用户已连接客户端”

代码如下：

application.py


from flask import Flask
from flask_socketio import SocketIO, emit, send

from flask import render_template

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('connect')
def connect():
    print("An user has connected Server Side")


@socketio.on('joined')
def joined():
    emit('user-connect', {'msg': 'User has connected Client Side'})


@socketio.on('disconnect')
def disconnect():
    print('User disconnected')


if __name__ == '__main__':
    # app.run(host='127.0.0.1', port='8080', debug=True)
    socketio.run(app)

static/index.js

document.addEventListener("DOMContentLoaded", () => {


  // Connect to websocket
  var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

  // When connected, configure button
  socket.on('connect', () => {
    socket.emit('joined');
  });

  socket.on('user-connect', data => {
    const p = document.createElement('p')
    p.innerHTML = `${data.msg}`
    document.querySelector('#log').append(p);
  });

});

模板/index.html

<html>
  <head>
    <!-- Javascript -->
    <script src="{{ url_for('static', filename='index.js') }}"></script>

    <!-- SocketIO -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>


    <title>Chatroom</title>
    <meta charset="utf-8" />

  </head>
  <body>
    <h1>INDEX PAGE</h1>

    <h2>Receive:</h2>
    <div id="log"></div>




  </body>
</html>

这是我的文件的路径

project2/
├── application.py
├── requirements.txt
├── static
│   ├── index.js
│   └── index.js~
└── templates
    ├── index.html
    └── index.html~

project2/
├── application.py
├── requirements.txt
├── static
│   ├── index.js
│   └── index.js~
└── templates
    ├── index.html
    └── index.html~