Socket.IO 프로토콜 기반 서버 클라이언트 통신
| 클라이언트 측 * : | 서버측: |
|---|---|
| HTML, CSS, JS(SocketIO 프레임워크 포함) | Python 프레임워크: Flask, Flask SocketIO |
* Web Dev Simplified Tic Tac Toe 프로젝트에서 영감을 받은 Tic Tac Toe 보드의 프런트 엔드 요소 - 한쪽 2 플레이어 기능
온라인 멀티플레이어 Tic-Tac-Toe 게임에서 이동 처리, 플레이어 연결 처리, 플레이어 채팅 및 게임 룸 관리는 서버에서 제공됩니다(이 경우 Flask, Flask SocketIO 프레임워크의 도움으로). 틱택토 규칙에 따라 한 게임에는 두 명의 플레이어만 있습니다. 이는 서버가 게임 룸의 존재 여부와 새 게임 룸을 연결하기 전에 이미 두 명의 플레이어가 있는지 확인해야 함을 의미합니다.
1단계 - 연결
2단계 - 플레이어에게 알림
3단계 - 게임 시작
app.py
모든 재미가 시작되는 파일... 다음은 Flask 및 Flask 소켓 IO 프레임워크의 구성입니다. 일단 구성되면 Flask 경로는 @app.route() 로 장식 되고 Flask SocketIO 처리기는 @socketio.event 로 장식 됩니다. 파일 맨 아래에는 서버를 시작하는 socketio.run(app, debug=True) 이 있습니다. " socketio.run() 함수는 웹 서버의 시작을 캡슐화하고 app.run() 표준 Flask 개발 서버 시작을 대체합니다." 플라스크 소켓IO
oophelpers.py
Player() 및 GameRoom() 개체의 모델링이 있습니다. 클래스 자체 내에서 클래스는 동작과 필요한 속성을 정의합니다.
templates/
기본적으로 templates/index.html 은 페이지의 내용(보드 게임 및 로그 영역)을 설명하는 HTML 페이지일 뿐입니다. 페이지 상단에는 상태를 변경하는 모달 보기인 "인사말 보기"가 있습니다. display: show -> display: none 서버 이벤트가 발생하면 회의실 가용성이 표시됩니다.
static/styles/
페이지의 미학을 설명하는 데 사용되는 CSS 파일이 있는 곳입니다.
static/scripts/
main.js 파일에는 웹앱 상호 작용을 가능하게 하는 스크립트가 있습니다. 파일은 상단에 " VARIABLE DECLARATIONS "로 시작하고 이후에는 joinButton 의 addEventListener 익명 함수가 async 및 await 함수를 통해 roomAvailability() 를 확인합니다. 객실 이용 가능 여부가 확인되면 userConnectedHandlers() 호출됩니다. 채팅 및 게임 기능은 sendButton , startGameButton , restartButton 버튼에 연결된 EventListener 전체에서 제공됩니다.
requirements.txt
해당 파일은 단순히 이 웹앱의 종속성 패키지를 규정합니다.
이 애플리케이션을 실행하는 한 가지 방법은 다음과 같습니다.
python -m venv [directory]pip install -r requirements.txtpython app.py 실행하거나 flask run 하고 두 개의 별도 브라우저 탭에서 http://localhost:5000 방문하세요. python app.py또는
flask runDockerfile에서 이미지 빌드
docker build -t < img_name > . docker build -t flask-tictactoe . 백그라운드에서 컨테이너를 실행하고 컨테이너의 포트를 호스트에 게시합니다.
docker run -d -p < host_port > : < container_port > < image_name > docker run -d -p 80:5000 flask-tictactoe http://localhost 또는 http://127.0.0.1 사용하여 브라우저에서 컨테이너에 액세스합니다.
