안녕하세요? 만들오 입니다.
파이썬으로 Websocket(웹소켓) 서버를 만들어 통신하는 예제를 공유합니다.
1. 필요한 패키지 설치
pip install simple_websocket_server
2. 파이썬 서버 작성
#server.py
from simple_websocket_server import WebSocketServer, WebSocket
class SimpleEcho(WebSocket):
def handle(self):
self.send_message(self.data)
print(self.data)
def connected(self):
print(self.address, 'connected')
def handle_close(self):
print(self.address, 'closed')
server = WebSocketServer('localhost', 3000, SimpleEcho)
server.serve_forever()localhost:3000 주소로 웹소켓 서버를 만들고 돌립니다.
3. html 파일
<!DOCTYPE html>
<html>
<body>
<canvas id="joy" style="border:5px dashed #BDBDBD"></canvas>
<script>
let ws = new WebSocket("ws://localhost:3000"); //웹소켓 생성
ws.onopen = function(){
ws.send("Websocket is ready!");
}
var joy = document.getElementById("joy");
joy.width = 200;
joy.height = 200;
joy.addEventListener("touchstart", down);
joy.addEventListener("touchmove", move);
joy.addEventListener("touchend", up);
joy.addEventListener("mousedown", down);
joy.addEventListener("mousemove", move);
joy.addEventListener("mouseup", up);
joy.addEventListener("mouseleave", up);
var ctx = joy.getContext("2d");
ctx.lineWidth = 10;
clearBackground();
drawCircle(100, 100, 50, "rgb(255,000,051)");
var startX, startY, moveX, moveY;
var joyPos = joy.getBoundingClientRect();
var onTouch = false;
function down(event) {
try {
startX = Math.round(event.touches[0].clientX - joyPos.left);
startY = Math.round(event.touches[0].clientY - joyPos.top);
} catch{
startX = Math.round(event.clientX - joyPos.left);
startY = Math.round(event.clientY - joyPos.top);
}
onTouch = true;
}
var moveMax = 40;
var msgPrev = "s";
var msg = "s";
function move(event) {
if (onTouch) {
try {
moveX = Math.round(event.touches[0].clientX - joyPos.left) - startX;
moveY = Math.round(event.touches[0].clientY - joyPos.top) - startY;
} catch{
moveX = Math.round(event.clientX - joyPos.left) - startX;
moveY = Math.round(event.clientY - joyPos.top) - startY;
}
if (moveX > moveMax) moveX = moveMax;
else if (moveX < -moveMax) moveX = -moveMax;
if (moveY > moveMax) moveY = moveMax;
else if (moveY < -moveMax) moveY = -moveMax;
clearBackground();
drawCircle(100 + moveX, 100 + moveY, 50, "rgb(255,000,051)");
if (moveX >= 35) msg = "d";
else if (moveX <= -35) msg = "a";
else if (moveY <= -35) msg = "w";
else if (moveY >= 35) msg = "x";
if (msg != msgPrev) {
send(msg);
msgPrev = msg;
}
}
}
function up() {
clearBackground();
drawCircle(100, 100, 50, "rgb(255,000,051)");
msg = "s";
msgPrev = "s";
onTouch = false;
send(msg);
}
function send(msg) {
console.log(msg);
ws.send(msg);
}
function clearBackground() {
ctx.clearRect(0, 0, joy.width, joy.height);
ctx.beginPath();
ctx.strokeStyle = "rgb(153,000,051)";
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.stroke();
}
function drawCircle(x, y, r, c) {
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
}
</script>
</body>
</html>
4. 동작 설명
파이썬을 이용해 localhost:3000 포트에 웹소켓 서버를 띄웠습니다.
클라이언트는 html 파일이며, 실행 시 위 웹소켓 주소로 접속해 실시간 통신을 시작합니다.
조이스틱을 움직임에 따라 파이썬 콘솔창에 메시지가 찍히도록 코딩했습니다.
* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.
[끝].
728x90
'소프트웨어 > 파이썬' 카테고리의 다른 글
| [파이썬] Jupyter notebook 쉽게 암호 설정하기 (1) | 2021.01.23 |
|---|---|
| [파이썬] 윈도우 화면 선택영역 모니터링 (0) | 2021.01.23 |
| [파이썬] Opencv를 이용한 MNIST 숫자인식 확인하기#2 (0) | 2021.01.23 |
| [파이썬] Opencv를 이용한 MNIST 숫자인식 확인하기#1 (0) | 2021.01.23 |
| [파이썬] Websocket 으로 영상 송수신하기 (8) | 2021.01.23 |
댓글