[테스트 환경]
- windows 10
- 웹브라우저(chrome 84.0.4147.125)
[준비물]
* Python
* visual studio code
* .html 예제 파일
* .py 예제 파일
[Step]
[1] Python 설치 > Python 환경변수 설정 > Python WebSocket library 다운로드
[2] VSC(Visual Studio Code) 설치 > VSC python 플러그인 설치 > 기타 추가 플러그인 설치
[3] .py 예제파일 생성 vsc로 오픈 > ctrl+F5 코드실행 > 서버 오픈 완료
[4] .html 예제파일 생성 후 웹브라우저로 오픈 > 값 입력 > send 클릭 > vsc 에서 수신 및 송신 > .html 에서 수신확인 : 예제 끝
1. Python 설치
*설치할때 "Customize installation" 으로 경로를 직접 지정해서 설치해 주는 것이 좋다.
먼저 C:\ 에 새로운 폴더를 생성하는것이 좋다. 경로에 한글이 들어가있으면 오류가 생길수 있다.
ex) C:\PythonFolder
(위와 같이 직접 경로를 지정하고 다른부분은 수정하지 않고, 경로만 설정해주고 설치를 진행해준다. 완료가 되면 "close" 눌러 창을 닫는다.)
2. Python 환경변수 설정
* cmd 에서 바로 명령 할 수 있게 시스템 환경변수에 경로를 등록 시켜주어야한다.
내pc > 마우스 오른쪽 클릭 > "속성" > "고급시스템설정"(고급설정) > "환경변수" > 사용자 변수에 "Path" 를 클릭 > "편집" 클릭 > 새로만들기 > "C:\PythonFolder\Scripts" 경로추가해준다.
> 확인 > 확인 > 확인 눌러 설치를 완료 해 준다.
3. Python WebSocket library 다운로드
* cmd(명령프롬프트)창 오픈 >"pip install websockets" 입력 엔터 하여 설치한다.
4. VSC(Visual Studio Code) 설치
* 경로만 python 처럼 별도의 폴더를 생성하여 지정하고, 나머진 그대로 설치를 진행하여 설치를 완료해준다.
! 중간에 에러가 뜨면 그냥 "확인"을 눌러주고, 종료를 눌러 창을 닫는다.
5. VSC python 플러그인 설치
* VSC 실행한다 > 아래의 그림과 같이 플러그인을 검색하여 install 해준다.
6. .py 예제파일 생성
* VSC 에서 새파일(Ctrl+N) 생성하여 파일이름을 webServer.py 라고 저장하고, 내부의 코드는 아래와 같이 적어준다.
########################
# Server
import asyncio # 웹 소켓 모듈을 선언한다.
import websockets # 클라이언트 접속이 되면 호출된다.
async def accept(websocket, path):
while True:
data = await websocket.recv();# 클라이언트로부터 메시지를 대기한다.
print("receive : " + data);
await websocket.send("ws_srv send data = " + data);# 클라인언트로 echo를 붙여서 재 전송한다.
# "0.0.0.0" => 서버 pc에 ip 주소를 입력해준다.
# 0000 => 서버 pc에 포트를 입력 해 준다.
start_server = websockets.serve(accept, "0.0.0.0", 0000);
# 비동기로 서버를 대기한다.
asyncio.get_event_loop().run_until_complete(start_server);
asyncio.get_event_loop().run_forever();
########################
6-1. 위의 코드를 저장하고, Ctrl+F5 를 눌러 실행해준다.
(!이때 우측 하단에 메시지가 뜨면서 install 버튼 이 보이게 된다(에러문구가 뜨는부분은 따로 처리 해야함..)
6-2. install 눌러 설치가 되면 다시한번 Ctrl+F5 눌러준다.)
위의 작업을 진행후 파란글씨가 뜨면서 대기 상태가 되면 서버가 실행중인 상태가 된다.
이로써 테스트 할 서버는 준비가 된것이다.
(! 중지는 상단에 네모상자를 눌러주면 중지가 된다.)
7. .html 예제파일 생성
* VSC 에서 새파일(Ctrl+N) 생성하여 파일이름을 webClient 라고 저장하고 .html형식으로 생성한다.
내부의 코드는 아래와 같이 적어준다.
(! 파일 형식만 맞춘다면 메모장에서 생성해도 무관하다)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<!-- 서버로 메시지를 보낼 텍스트 박스 -->
<input id="textMessage" type="text">
<!-- 전송 버튼 -->
<input onclick="sendMessage()" value="Send" type="button">
<!-- 접속 종료 버튼 -->
<input onclick="disconnect()" value="Disconnect" type="button">
</form>
<br />
<!-- 출력 area -->
<textarea id="messageTextArea" rows="10" cols="50"></textarea>
<script type="text/javascript">
// 웹 서버를 접속한다.
<!-- "0.0.0.0" => 서버 pc에 ip 주소를 입력해준다. -->
<!-- 0000 => 서버 pc에 포트를 입력 해 준다.-->
var webSocket = new WebSocket("ws://0.0.0.0:0000");
// 웹 서버와의 통신을 주고 받은 결과를 출력할 오브젝트를 가져옵니다.
var messageTextArea = document.getElementById("messageTextArea");
// 소켓 접속이 되면 호출되는 함수
webSocket.onopen = function(message){
messageTextArea.value += "Server connect...\n";
};
// 소켓 접속이 끝나면 호출되는 함수
webSocket.onclose = function(message){
messageTextArea.value += "Server Disconnect...\n";
};
// 소켓 통신 중에 에러가 발생되면 호출되는 함수
webSocket.onerror = function(message){
messageTextArea.value += "error...\n";
};
// 소켓 서버로 부터 메시지가 오면 호출되는 함수.
webSocket.onmessage = function(message){
// 출력 area에 메시지를 표시한다.
messageTextArea.value += "Recieve From Server => "+message.data+"\n";
};
// 서버로 메시지를 전송하는 함수
function sendMessage(){
var message = document.getElementById("textMessage");
messageTextArea.value += "Send to Server => "+message.value+"\n";
//웹소켓으로 textMessage객체의 값을 보낸다.
webSocket.send(message.value);
//textMessage객체의 값 초기화
message.value = "";
}
function disconnect(){
webSocket.close();
}
</script>
</body>
</html>
8. 연결 테스트
8-1. .py 파일을 VSC 에서 Ctrl+F5 실행해준다.
8-2. .html 파일을 실행한다.
(!정상연결이 되었으면 네모 박스에 "Server Connect.." 가 출력된다.)
8-3. 입력창에 아무 메시지나 입력한 후("테스트입니다") send 버튼을 눌러준다.
8-4. "테스트 입니다" 문구가 VSC 에 출력되고, VSC에 실행중인 python 서버가 다시 "테스트 입니다"전송 한다.
- 끝 -
[Python] Websocket을 사용하는 방법
안녕하세요. 명월입니다. 이 글은 Python에서 Websocket을 사용하는 방법에 대한 글입니다. Websocket은 웹 브라우져에서 javascript로 TCP 동기 통신을 위한 통신 프로토콜입니다. 제가 이전에 Java로 websocke
nowonbun.tistory.com
- 끝 -
'Etc' 카테고리의 다른 글
| Fireabse Server 연동 (0) | 2022.05.16 |
|---|---|
| Etc - Study(이것저것) (0) | 2022.01.06 |
| Node 환경 셋팅 in VScode (0) | 2021.12.01 |
| Node > Firebase > ios App Push (Node코드만있음) (0) | 2021.07.08 |
| 출시된 앱 -> 게시취소 과정 (0) | 2020.03.09 |