WebSocket을 활용한 PHP 라라벨 실시간 채팅 - 2. 자바스크립트에서 웹소켓과 통신하기

 

 

생각보다 빠릿하게 동작하는 모습

 

감격

 

 

웹소켓 서버 연결을 위한 자바스크립트 코드 작성

 

우선 자바스크립트단에 웹소켓 객체부터 생성해줍니다

var socket  = new WebSocket('wss://도메인 이름/websocket');

 -- nginx로 웹소켓 서버를 연 경우

또는

var socket  = new WebSocket('wss://도메인 이름:포트번호');

 -- 테스트 환경 및 로컬 구동

 

 

그리고 연결이 완료된 경우 실행되는 onopen 함수도 작성해주면 테스트 시나 특정 이벤트를 연출하기 좋습니다

 

socket.onopen = function(e) {
        console.log("웹소켓 연결 성공");
    };

 

 

 

이번엔 웹소켓서버로부터 메시지를 받았을 때 실행된 함수를 작성해줍니다

 

socket.onmessage = function(e) {
        if(fetching){
            return;
        }
        else{
            fetching = true;
            reload_message_list(remain_chat_seq);
        }
    }

 

저는 메시지가 도착할 때마다 서버로부터 메시지들을 새로 받아오도록 설계해뒀기 때문에

 

너무 빠르게 다수의 메시지가 도착했을 때 중복으로 메시지가 생성되는 에러가 있었습니다

 

그래서 fetching 이라는 boolean타입 변수로 중복 클릭을 방지하듯 짜두었습니다

 

 

reload_message_list 함수가 제가 따로 작성한 메시지를 가져오는 함수입니다

 

 

여기에서 제가 짠 채팅 로직을 간단히 정리하자면

 

 

 

1. 채팅방을 들어간다

 

2. 페이지에 진입하며 컨트롤러로부터 메시지들을 전부 혹은 일정량을 최신 메시지까지 받아온다

 

3. 웹소켓 서버에 방 번호를 파라미터로 전달하며 연결 한다

 

4. 웹소켓에서는 방 번호를 기준으로 커넥션들을 해시맵으로 관리한다

 

5. 클라이언트로부터 메시지 (신호)가 오면 해당 클라이언트가 속한 방의 커넥션들에게 신호를 보낸다

 

6. 웹소켓 서버로부터 신호를 받은 클라이언트들은 기존에 있던

 

    가장 최근에 주고받은 메시지의 키값이나 특정 값을 기준으로 메시지들을 웹서버로부터 받아와서 출력한다

 

 

 

 

 

그리고 마지막으로 채팅 메시지를 보냈을 때입니다

 

 

try {
            const response = await fetch(post_url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: JSON.stringify(data),
                keepalive: true
            })
    
            const responseData = await response.json();
    
            if(responseData.result == 'success'){
                console.log('등록');
            }
            else if(responseData.result == 'fail'){
                alert('등록실패');
            }

            if(socket){
                socket.send('new_message');
            }


        } catch (error) {
            console.error('Error:', error);
        }
    })

 

 

 

여기에서 중요한 부분은 역시

 

if(socket){
	socket.send('new_message');
 }

 

 

이 부분 이겠죠

 

소켓으로 클라이언트가 신호를 보내는 장면입니다

 

그럼 아래의 코드에서 클라이언트로 메시지를 보내줍니다

 

 

public function onMessage(ConnectionInterface $from, $msg) {

        $path = $from->httpRequest->getUri()->getPath();
        $parts = explode('/', $path);
        $chatRoom = $parts[2];

        foreach ($this->chatRooms[$chatRoom] as $client) {
            $client->send($msg);
        }
    }

 

 

어때요

 

웹소켓 재밌죠?

 

 

고수분들은 삼류코드를 보고 즐거우실 것이고

 

저와 같거나 조금 그 이상인 분들은

 

아주 재미있는 경험이리라 생각됩니다

 

 

글을 여럿 쓰다보니 느끼는 건데

 

저는 진짜 글을 이쁘게 쓰는 재능은 없나봐용 ㅎㅎ

 

 

뭔가 궁금한 점이 있으시다면 댓글 부탁드립니다!

 

 

 

 

 

 

 

아래는 제가 직접 손수 수작업으로 하나부터 열까지 전부 직접 작성한 커뮤니티사이트 입니다

 

신생커뮤니티라서 많이 삭막하지만 들려주시면 고마울 것 같아요!

 

https://tamoim.com

타모임