Flask 웹소켓
이 설명을 통해 WebSocket이 무엇이며 클라이언트와 서버 사이에서 어떻게 작동하는지 배울 것입니다. Flask의 flask_socketio 모듈을 사용하여 실시간 채팅 응용 프로그램을 만드는 방법도 배웁니다.
Flask의 flask_socketio WebSocket을 사용하여 실시간 애플리케이션 만들기
WebSocket은 클라이언트와 서버 간에 소켓을 여는 방법입니다. WebSocket을 사용하여 실시간으로 메시지를 보낼 수 있습니다.
웹의 일반적인 요청-응답 모델이 아닙니다. 열린 연결이 항상 존재하고 서버와 클라이언트가 서로 끊임없이 대화할 수 있는 것과 같습니다.
이제 채팅 앱을 빌드해 보겠습니다. 우리가 처리할 첫 번째 측면은 서버 측입니다. 두 가지 측면이 있습니다. 첫 번째는 Flask에서 처리되는 서버 측이고 두 번째는 JavaScript에서 처리되는 클라이언트 측입니다.
확장 flask_socketio를 사용하면 클라이언트가 서버에 연결할 수 있으므로 다음 명령을 사용하여 flask_socketio 모듈을 설치해야 합니다.
pip install Flask-SocketIO
필요한 종속성과 함께 flask_socketio를 설치합니다. flask_socketio는 일반적인 Flask 앱과 매우 유사하며 패턴은 동일하지만 사용하는 항목이 약간 다릅니다.
이 앱을 빌드하기 위해 일부 클래스와 send 기능을 가져올 것입니다. 그런 다음 앱 인스턴스를 만들고 모든 메시지가 암호화되므로 비밀 키가 필요합니다. 비밀 키를 config 값으로 정의합니다.
이제 SocketIO() 클래스에 대한 개체를 만들고 앱을 전달하여 인스턴스화합니다. 두 번째 인수는 모든 도메인을 허용하는 것입니다.
app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")
이제 우리는 경로 내에서 지정한 특정 이벤트를 수신할 경로를 정의한 다음 Text_MSG()라는 함수 이름으로 메시지를 보낼 때 언제든지 호출되는 함수를 만듭니다.
이 함수는 msg라는 매개변수를 사용하며 콘솔에서 모든 것이 작동하는지 확인하기 위해 인쇄합니다.
우리는 누군가로부터 오는 메시지를 그 순간에 서버에 연결된 모든 사람에게 보낼 것입니다. 두 개의 매개변수를 사용하는 send() 함수를 사용할 것입니다. 하나는 문자 메시지인 msg이고 두 번째 매개변수는 True와 동일한 broadcast입니다.
False를 broadcast에 전달하거나 이 인수를 전달하지 않으면 처음에 메시지를 받은 사람에게 기본적으로 메시지를 보내는 것으로 설정됩니다.
우리는 한 클라이언트로부터 받은 것과 동일한 메시지를 브로드캐스팅하고 보낼 것이므로 방금 받은 클라이언트를 포함하여 모든 클라이언트에게 다시 보낼 것입니다.
@socketio.on("message")
def Text_MSG(msg):
print("text-message: " + msg)
send(msg, broadcast=True)
app.run()을 사용하는 대신 실시간 환경에서 Flask 앱을 실행하는 추가 기능과 함께 socketio.run(app)을 사용합니다.
if __name__ == "__main__":
socketio.run(app)
HTML 페이지가 될 프론트 엔드의 건물로 들어가 보겠습니다. 클라이언트 측 socket.io 라이브러리에 대해 CDN에서 몇 가지 스크립트를 가져옵니다. 또한 jQuery를 사용하여 버튼의 클릭 이벤트를 처리합니다.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
body 태그에 JavaScript 코드를 작성합니다. jQuery를 사용하기 때문에 ready() 메서드를 사용해야 하며 이 $(document).ready() 내부에서 Flask 앱이 실행 중인 서버에 연결해야 합니다.
socket이라는 개체를 만들고 connect()를 사용하여 인스턴스화하고 Flask 서버의 URL을 전달합니다. 객체를 생성한 후에는 서버에 연결할 때 메시지를 보낼 수 있는지 확인해야 합니다.
$(document).ready(function() {
var socket = io.connect('http://127.0.0.1:5000');
socket.on('connect', function() {
socket.send('User has connected!');
});
});
그것은 우리가 특정 이벤트를 수신하고 있다는 것을 의미하며, 서버에 처음 연결할 때마다 연결 이벤트가 발생하고 일단 발생하면 이 socket.on() 콜백 함수를 호출합니다. 이 콜백 함수는 사용자가 연결한 서버로 보내고, 서버는 그것을 읽어서 모두에게 다시 보낼 것입니다.
서버로 전송된 모든 메시지를 미러링하는 코드를 추가하여 connect 대신 다른 이벤트를 수신하도록 하겠습니다. message 콜백 함수는 메시지를 메시지 목록에 추가하고 목록 항목을 메시지 텍스트와 함께 고정합니다.
socket.on('message', function(msg) {
$("#messages").append('<li>'+msg+'</li>');
console.log('Received message');
});
마지막으로 버튼을 사용하여 메시지를 보낼 수 있도록 허용합니다. 그래서 우리는 보내기 버튼에 클릭 이벤트를 넣고 myMessage id를 input 태그 id와 함께 첨부할 것입니다.
일단 보내면 val('') 메서드를 사용하여 새 메시지를 위한 공간을 만들기 위해 메시지를 지웁니다.
$('#sendbutton').on('click', function() {
socket.send($('#myMessage').val());
$('#myMessage').val('');
});
이제 저장하고 Flask 서버를 실행한 다음 두 개의 창에서 index.html 파일을 엽니다. 입력 필드에 텍스트를 입력하고 보내기 버튼을 누르면 동시에 다른 창에서 메시지를 수신합니다.
참고: 오류가 발생하면 터미널 내에서 다음 명령을 실행하십시오.
pip install --upgrade python-socketio==4.6.0
pip install --upgrade python-engineio==3.13.2
pip install --upgrade Flask-SocketIO==4.3.1
완전한 파이썬 코드:
from flask import Flask
from flask_socketio import SocketIO, send
app = Flask(__name__)
app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")
@socketio.on("message")
def Text_MSG(msg):
print("text-message: " + msg)
send(msg, broadcast=True)
if __name__ == "__main__":
socketio.run(app)
완전한 HTML 코드:
<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var socket = io.connect('http://127.0.0.1:5000');
socket.on('connect', function() {
socket.send('User has connected!');
});
socket.on('message', function(msg) {
$("#messages").append('<li>'+msg+'</li>');
console.log('Received message');
});
$('#sendbutton').on('click', function() {
socket.send($('#myMessage').val());
$('#myMessage').val('');
});
});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn