웹소켓으로 채팅프로그램 만들기(js,python)

프로젝트

웹소켓으로 채팅프로그램 만들기(js,python)

뮻 2018. 3. 21. 11:15

※ 코드가 깨져 보기가 어려운 것 같아 구 블로그의 원본글 링크를 가져왔습니다.

https://byeongukchoi.github.io/TIL/6.PYTHON/1.%EC%9B%B9%EC%86%8C%EC%BC%93.html

웹소켓으로 채팅 프로그램 만들기 | TIL

웹소켓으로 채팅 프로그램 만들기 cilent : javascript server: python2 순서 소켓 준비 WebSocket Handshake (클라이언트 -> 서버 : 핸드쉐이킹 요청, 서버 -> 클라이언트 : 핸드 쉐이킹 응답) 데이터 프레임 교환

byeongukchoi.github.io

웹소켓으로 채팅 프로그램 만들기

cilent : javascript

server: python2

순서

0. 소켓 준비

WebSocket Handshake (클라이언트 -> 서버 : 핸드쉐이킹 요청, 서버 -> 클라이언트 : 핸드 쉐이킹 응답)
데이터 프레임 교환
Ping and Pong
Closing the connection

1. WebSocket Handshake

클라이언트 -> 서버 : 핸드쉐이킹 요청

GET /chat HTTP/1.1 Host: example.com:8000 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== ( 키 값 ) Sec-WebSocket-Version: 13

서버 -> 클라이언트 : 핸드 쉐이킹 응답

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= ( 변환된 키 값 )

키 값에 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"를 더해 준 후 SHA-1 hash 변환

2. 데이터 프레임 교환

웹소켓 데이터 프레임

+---------------------------------------------------------------+
0(byte)         1               2               3             
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
4               5               6               7             
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
8               9               10              11            
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
12              13              14              15
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

MSB (최상위 비트)

FIN : 마지막 메세지

FIN = 0 ( 마지막 메세지가 아님. 서버에서 뒤에 메세지들 까지 수신)

FIN = 1 ( 마지막 메세지. 전체 메세지 수신 완료 메세지 처리)

RSV1-3 : 0. 사용안함. 확장 프로토콜 또는 추후를 위해 할당

opcode : 뒤의 Payload 데이터의 포멧을 나타냄

0x0 denotes a continuation frame ( 연속 프레임. 데이터가 여러 조각으로 분리된 경우 )
0x1 denotes a text frame ( 문자열 데이터 )
0x2 denotes a binary frame ( 2진 데이터 )
0x3-7 are reserved for further non-control frames (아무런 의미 없음)
0x8 denotes a connection close ( 접속 종료 )
0x9 denotes a ping
0xA denotes a pong
0xB-F are reserved for further control frames (아무런 의미 없음)

MASK : 메세지 인코딩 여부.

클라이언트 -> 서버 : MASK = 1 ( 항상 마스킹 되어야 함. 아니면 연결 종료)

서버 -> 클라이언트 : MASK = 0 ( 항상 데이터는 마스킹 되지 않은 상태)

Payload len : 9-15bit를 unsigned integer로 읽음.

Payload len >= 125 : Payload의 길이 = 9-15bit의 unsigned integer 값 (Extended payload length 존재 X)

Payload len == 126 : Payload의 길이 = 16-31bit의 unsigned integer 값 (16bits)

Payload len == 127 : Payload의 길이 = 16-79bit의 unsigned integer 값 (64bits)

Extended payload length : Payload len 값 에 따라 존재하지 않거나 2bytes,8bytes를 가짐

Masging-key :

MASK가 1일때(클라이언트 -> 서버 전송 시 데이터가 마스킹 된 경우) 보내는 데이터를 마스크 할 때 사용하는 키.

(MASK가 0일 경우 존재하지 않음)

데이터를 마스크 처리 하거나 복원 할 때 사용

원본data-octet ^ 마스킹key-octet = 마스킹된data-octet

마스킹data-octet ^ 마스킹key-octet = 원본data-octet

j = i MOD 4

transformed-octet-i = original-octet-i XOR masking-key-octet-j

Payload Data : 보내는 데이터. Payload len 이나, Extended payload length 값에 해당하는 길이를 가짐

Server (python2) (select사용)

# -*- coding:utf-8-*-

import socket
import select
import re
import base64
import hashlib
import struct
import sys

from signal import signal, SIGPIPE, SIG_DFL
signal(SIGPIPE,SIG_DFL)

def send(input_list, msg):
    try:
        data = bytearray(msg.encode('utf-8'))
        # payload가 126일때 extended_payload_len을 2바이트 가지는데 이때 최대 값이 65535
        if len(data) > 65535 : frame = bytearray([b'\x81', 127]) + bytearray(struct.pack('>Q', len(data)))+ data
        elif len(data) > 125 : frame = bytearray([b'\x81', 126]) + bytearray(struct.pack('>H', len(data)))+ data
        else : frame = bytearray([b'\x81', len(data)]) + data
        # 클라이언트 리스트 모두에게 send ( 서버가 아니고 sys.stdin도 아닌 )
        for client in [sock for sock in input_list if not sock == server and not sock == sys.stdin] : client.sendall(frame)
    except Exception as e:
        print "send ERROR : " + str(e)

def recv(client):
    first_byte = bytearray(client.recv(1))[0]
    second_byte = bytearray(client.recv(1))[0]
    FIN = (0xFF & first_byte) >> 7
    opcode = (0x0F & first_byte)
    mask = (0xFF & second_byte) >> 7
    payload_len = (0x7F & second_byte)

    if opcode < 3:
        # payload_len 구하기
        if payload_len == 126 : payload_len = struct.unpack_from('>H', bytearray(client.recv(2)))[0]
        elif payload_len == 127 : payload_len = struct.unpack_from('>Q', bytearray(client.recv(8)))[0]
        # masking_key 구해서 masking된것 복구하기 ( mask가 1일 경우에만 존재 )
        if mask == 1:
            masking_key = bytearray(client.recv(4))
            masked_data = bytearray(client.recv(payload_len))
            data = [masked_data[i] ^ masking_key[i%4] for i in range(len(masked_data))]
        else: data = bytearray(client.recv(payload_len))
    else: return opcode, bytearray(b'\x00') # opcode 값을 넘김
    print bytearray(data).decode('utf-8', 'ignore')             # 받은거 콘솔에 출력용
    return opcode, bytearray(data)

def handshake(client):
    try:
        request = client.recv(2048)
        m = re.match('[\\w\\W]+Sec-WebSocket-Key: (.+)\r\n[\\w\\W]+\r\n\r\n', request)
        key = m.group(1)+'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
        response = "HTTP/1.1 101 Switching Protocols\r\n"+\
                "Upgrade: websocket\r\n"+\
                "Connection: Upgrade\r\n"+\
                "Sec-WebSocket-Accept: %s\r\n"+\
                "\r\n"
        r = response % ((base64.b64encode(hashlib.sha1(key).digest()),))
        client.send(r)
        print "---handshake end!---"
    except Exception as e:
        print "handshake ERROR : " + str(e)

def handler_client(client):
    try:
        opcode, data = recv(client)
        if opcode == 0x8:
            print 'close frame received'
            input_list.remove(client)
            return
        elif opcode == 0x1:
            if len(data) == 0:
                # input_list.remove(client)
                # return
                print "emty data"
            else:
                # msg = data.decode('utf-8', 'ignore')
                msg = [c[1][0]+":"+str(c[1][1]) for c in client_info if c[0] == client][0] + " :: " + data.decode('utf-8', 'ignore')
                # 클라이언트 리스트를 매개변수로 보냄
                send(input_list, msg)
        else : print 'frame not handled : opcode=' + str(opcode) + ' len=' + str(len(data))
    except Exception as e:
        print "handler ERROR : " + str(e)
        print "disconnected"
        input_list.remove(client)

def start_server(host,port):
    try:
        # host = 'localhost'
        # port = 8765
        global server
        global input_list
        global client_info
        server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        server.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        server.bind((host,port))
        server.listen(0)
        input_list = [server, sys.stdin]    # sys.stdin은 쉘창에서 입력받은것 때문에 넣어줌
        client_info = []

        print "Server : " + host + ":" + str(port)
        while True:
            # select 함수는 관찰될 read, write, except 리스트가 인수로 들어가며
            # 응답받은 read, write, except 리스트가 반환된다.
            # input_list 내에 있는 소켓들에 데이터가 들어오는지 감시한다.
            # 다르게 말하면 input_list 내에 읽을 준비가 된 소켓이 있는지 감시한다.
            input_ready, write_ready, except_ready = select.select(input_list, [], [],10)
            # 응답받은 read 리스트 처리
            for ir in input_ready:
                # 클라이언트가 접속했으면 처리함
                if ir == server:
                    client, addr = server.accept()
                    print "connected : " + str(addr)
                    handshake(client)
                    # input_list에 추가함으로써 데이터가 들어오는 것을 감시함
                    input_list.append(client)
                    client_info.append((client, addr))
                # 쉘 창 입력. 입력된 데이터 클라이언트에게 전송
                elif ir == sys.stdin : send(input_list, "Administrator :: " + sys.stdin.readline())
                # 클라이언트소켓에 데이터가 들어왔으면
                else : handler_client(ir)
    except Exception as e:
        print "start_server ERROR " + str(e)
        server.close()
        sys.exit()
    except KeyboardInterrupt:
        # 부드럽게 종료하기
        print "키보드 강제 종료"
        server.close()
        sys.exit()

start_server('192.168.10.1(아이피주소)',8765)

(multi thread 사용)

# -*- coding:utf-8-*-

import socket
import threading
import re
import base64
import hashlib
import struct
import sys

from signal import signal, SIGPIPE, SIG_DFL
signal(SIGPIPE,SIG_DFL)

def send(client_tuple, msg):
    try:
        data = bytearray(msg.encode('utf-8'))
        # payload가 126일때 extended_payload_len을 2바이트 가지는데 이때 최대 값이 65535
        if len(data) > 65535 : frame = bytearray([b'\x81', 127]) + bytearray(struct.pack('>Q', len(data)))+ data
        elif len(data) > 125 : frame = bytearray([b'\x81', 126]) + bytearray(struct.pack('>H', len(data)))+ data
        else : frame = bytearray([b'\x81', len(data)]) + data
        # 클라이언트 리스트 모두에게 send
        for client in client_tuple : client[0].sendall(frame)
        return 0
    except Exception as e:
        print "send ERROR : " + str(e)
        return -1

def recv(client):
    first_byte = bytearray(client.recv(1))[0]
    second_byte = bytearray(client.recv(1))[0]
    FIN = (0xFF & first_byte) >> 7
    opcode = (0x0F & first_byte)
    mask = (0xFF & second_byte) >> 7
    payload_len = (0x7F & second_byte)

    if opcode < 3:
        # payload_len 구하기
        if payload_len == 126 : payload_len = struct.unpack_from('>H', bytearray(client.recv(2)))[0]
        elif payload_len == 127 : payload_len = struct.unpack_from('>Q', bytearray(client.recv(8)))[0]
        # masking_key 구해서 masking된것 복구하기 ( mask가 1일 경우에만 존재 )
        if mask == 1:
            masking_key = bytearray(client.recv(4))
            masked_data = bytearray(client.recv(payload_len))
            data = [masked_data[i] ^ masking_key[i%4] for i in range(len(masked_data))]
        else: data = bytearray(client.recv(payload_len))
    else: return opcode, bytearray(b'\x00') # opcode 값을 넘김
    print bytearray(data).decode('utf-8', 'ignore')             # 받은거 콘솔에 출력용        
    return opcode, bytearray(data)

def handshake(client):
    request = client.recv(2048)
    m = re.match('[\\w\\W]+Sec-WebSocket-Key: (.+)\r\n[\\w\\W]+\r\n\r\n', request)
    key = m.group(1)+'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
    response = "HTTP/1.1 101 Switching Protocols\r\n"+\
            "Upgrade: websocket\r\n"+\
            "Connection: Upgrade\r\n"+\
            "Sec-WebSocket-Accept: %s\r\n"+\
            "\r\n"
    r = response % ((base64.b64encode(hashlib.sha1(key).digest()),))
    client.send(r)
    print "---handshake end!---"
    return 0

clients = []    # (클라이언트, addr) 리스트
threads = []    # (스레드 , addr) 리스트

def handler_client(client, addr):
    handshakestat = handshake(client)
    if not handshakestat == 0 : return
    try:
        while True:
            opcode, data = recv(client)
            if opcode == 0x8:
                clients.remove((client, addr))
                return
            elif opcode == 0x1:
                if len(data) == 0:
                    # return
                    print "emty data"
                    continue
                # msg = data.decode('utf-8', 'ignore')
                msg = addr[0] + ":" +str(addr[1]) + ' :: ' + data.decode('utf-8', 'ignore')
                # 클라이언트 리스트를 매개변수로 보냄
                sendstat = send(clients, msg)
                if not sendstat == 0 : print 'sendstat err'
            else : print 'frame not handled : opcode=' + str(opcode) + ' len=' + str(len(data))
    except Exception as e:
        print "handler ERROR : " + str(e)
    print "disconnected"
    client.close()

def start_server(host,port):
    try:
        server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)  # 기본값
        # SO_REUSEADDR 이미 사용된 주소를 재사용
        # 소켓이 종료 되도 커널단에서 해당 소켓을 바인딩해서 사용 중
        # SO_REUSEADDR 옵션을 이용하여 기존에 바인딩된 주소를 재사용
        server.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        server.bind((host,port))
        server.listen(0)

        print "Server : " + host + ":" + str(port)
        while True:
            # clients와 threads의 addr을 비교하여 thread를 죽임 새로운 접근이 있어야만 동작
            for t in [th for th in threads if not th[1] in [c[1] for c in clients]]:
                t[0].join()
                threads.remove(t)
            if len(threads) == 0: print "쓰레드 없음"
            client, addr = server.accept()
            print "connected : " + str(addr)
            thread = threading.Thread(target = handler_client, args = (client, addr))
            thread.start()
            clients.append((client, addr))
            threads.append((thread, addr))
    except Exception as e:
        print "start_server ERROR " + str(e)
    except KeyboardInterrupt:
        print "키보드 강제 종료"
        server.close()
        sys.exit(0)

start_server('192.168.0.1(아이피주소)',8765)

Client (javascript)

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>채팅</title>


<div class="container">
    <br>
    <div id="chatArea" style="overflow-y: auto; height: 379px;"></div>
    <div class="form-inline">
        <input type="text" class="form-control" id="msg" onkeypress="if( event.keyCode==13 ){sendMsg();}">
        <input type="button" class="btn btn-default" onclick="sendMsg()" value="전송">
    </div>
</div>

<script type="text/javascript">
    var ws = 0
    document.addEventListener("DOMContentLoaded", function(){
        if (ws != 0 && ws.readyState != 1) return;
        if ("WebSocket" in window) {
            // alert("WebSocket is supported by your Browser!");
            ws = new WebSocket("ws://192.168.10.1(아이피주소):8765");
            ws.onopen = function() {
                console.log("connected");
            };
            ws.onmessage = function(event) {
                var data = event.data.replace(/</gi, "<");
                data = data.replace(/>/gi, "> ");
                $("#chatArea").append(data + "<br />");
                $("#chatArea").scrollTop($("#chatArea")[0].scrollHeight);
            }
            window.onbeforeunload = function(event) {
                ws.close();
            };
        }
        else {
            console.log("WebSocket NOT supported by your Browser!");
        }
    });
    function sendMsg() {
        ws.send(document.getElementById("msg").value);
        document.getElementById("msg").value = '';
    }
    function ChatAreaResize() {
        var div2 = document.getElementById('chatArea');
        // div2.style.width = window.innerWidth - 200 + 'px';
        div2.style.height = window.innerHeight -200 + 'px';
    }
    window.onload = function() {
        ChatAreaResize();

        // 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우
        window.addEventListener('resize', ChatAreaResize);
    }
 </script>

구동 화면

출처 : 웹소켓 설명

참고: websocket 프레임, js , 파이썬 select 함수

'프로젝트' 카테고리의 다른 글

Just SNS 4일 간의 개발 회고 (0)	2020.11.13
vuepress 깃허브 블로그 (0)	2018.11.11

현재글웹소켓으로 채팅프로그램 만들기(js,python)

250x250

MAP, spring, 백준, 코드이그나이터4, 알고리즘, Package, gradle, 브루트포스, 카카오, 그리디 알고리즘, 브루트 포스, Codeigniter4, JPA, Java, 백준 알고리즘, php, 그리디, APC, github main branch, @Profiles,

그냥 블로그