내 프로젝트에서 RESTful API를 사용하여 React 프런트 엔드와 Flask 서버를 사용하고 있습니다. 기본 기능은 프런트 엔드가 서버의 데이터를 가져 와서 표시한다는 것입니다. 이것은 정상적으로 작동하지만 서버가 다른 곳에서 새로운 데이터를 수신 할 때마다 클라이언트가 자동으로 다시 가져 오도록하여 개선 할 것이라고 생각했습니다. 폴링을 사용하여 간격으로 가져 오기 요청을 실행할 수는 있지만 이는 웹 소켓의 완벽한 사용 사례처럼 보입니다. 따라서 특정 이벤트가 발생할 때 서버가 클라이언트에 메시지를 보내는 서버와 클라이언트 사이에 websocket 연결을 구현하려고합니다.WebSocket connection reacts Client와 flask-socketio 서버가 열리지 않습니다.
내 서버는 Flask와 함께 파이썬으로 작성되었으며, Flask와 관련된 websocket 라이브러리를 사용하는 것이 좋습니다. 내가 flask-socketio을 사용하는 것을 끝내었지만, 문제를 일으키고있다. 다음과 같이 내 서버의 관련 부분은 다음과 같습니다 프런트 엔드에 대한
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
... # Server functionality for receiving and storing data from elsewhere, not related to the websocket
# Handle the webapp connecting to the websocket
@socketio.on('connect')
def test_connect():
print('someone connected to websocket')
emit('responseMessage', {'data': 'Connected! ayy'})
# Handle the webapp connecting to the websocket, including namespace for testing
@socketio.on('connect', namespace='/devices')
def test_connect2():
print('someone connected to websocket!')
emit('responseMessage', {'data': 'Connected! ayy'})
# Handle the webapp sending a message to the websocket
@socketio.on('message')
def handle_message():
print('someone sent to the websocket')
# Handle the webapp sending a message to the websocket, including namespace for testing
@socketio.on('message', namespace='/devices')
def handle_message2():
print('someone sent to the websocket!')
@socketio.on_error_default # handles all namespaces without an explicit error handler
def default_error_handler(e):
print('An error occured:')
print(e)
if __name__ == '__main__':
socketio.run(app, debug=True, host='0.0.0.0')
<Websocket
url={'ws://localhost:5000'} // I also tried /devices at the end of this url
onMessage={() => console.log('Received message through websocket.')}
debug={true}
/>
그러나이 솔루션은 연결 직후 연결이 끊어져 잘못된 것이 있음을 나타냅니다. 정확히 무엇이 잘못되었는지 알아내는 것은 불가능 해 보였다. debug={true}에도 불구하고 로그에 아무런 표시가 없습니다. 이 솔루션 대신 프론트 엔드에 대한보다 맞춤화 된 WebSocket 솔루션으로 바 꾸었습니다.
componentDidMount() {
moment.locale('nb');
jsonRequest(irrelevant url).then(jsonResponse => {
... // Handle the results of the initial fetch
const socket = new WebSocket('ws://localhost:5000'); // I also tried /devices at the end of this url
socket.onopen =() => console.log('opened custom socket');
socket.onclose =() => console.log('closed custom socket');
socket.onmessage = e => console.log('got message');
socket.onerror = e => console.log('websocket error');
socket.addEventListener('open', function(event) {
console.log('sending');
socket.send('Hello Server!');
});
socket.addEventListener('message', function(event) {
console.log('Message from server ', event.data);
});
this.socket = socket;
this.setState(...);
});
}
이 솔루션에도 같은 문제가 있습니다. 내 콘솔 출력은 다음과 같습니다 : 
Rendering...은 내 렌더링 기능 맨 위에 놓은 콘솔 문입니다.
두 솔루션 모두에서 클라이언트는 연결 후 즉시 웹 소켓 연결을 끊습니다. 내 서버도 아무것도 알아 채지 못합니다. 어떤 이벤트 핸들러도 트리거하지 않습니다. @socketio.on('connect')이 아니라 @socketio.on('message')이 아니며 @socketio.on_error_default도 아닙니다. 따라서, 나는 스스로를 장애물로 생각합니다. 어떻게 여기서 디버깅합니까? 문제는 무엇이 될 수 있습니까? 나는 우분투 서버에서 똑같은 코드를 시도 했으므로 나는 그렇지 않다. localhost가 문제라고 생각한다.