[크롬 익스텐션: 03] sockjs-client를 이용한 소켓 통신

크롬 익스텐션을 다루고 있는 가장 중요한 이유 중 하나였던 메인 기능, 소켓 통신을 이용한 채팅 구현... 

 

해당 기능을 구현하기 위해 최소한의 UI를 완성하고, 개발에 들어갔다!

 

아래는 저번 포스트에 이어 개발 된 UI의 모습...!

 

첫 렌더링 모습 -> 연결을 누른 후 모습

우선 왼쪽의 화면은 제외될 수 도 있다... 2가지의 경우에 따라 다르게 될텐데

 

1. URL을 직접 유저에게 입력받는다. 해당 서버로 연결한다.

2. 탭 혹은 페이지에 입력된 URL을 바탕으로 서버에 연결을 시도한다.

 

2가지의 경우 중 어떠한 경우가 더 좋을지, 기술적으로 가능할지를 아직 고려하고있다...

 

아무래도 단일 어플리케이션으로써의 가치가 빛나려면 2번이 맞고, 이렇게 될 경우 어플은 독립적으로 알맞은 세팅을 이룬 서버와는 자동 연결되게 한다.

 

하지만 그렇게되면, 다른 탭에서는 원하는 서버의 채팅창은 보지 못한다. 채팅창은 해당 사이트(URL)에서만 이루어질 수 있는 것이다. 이런 방면에서 볼 땐, 단일 어플리케이션으로써의 가치가 떨어진다...

 

일단 이 부분은 뒤로 미루어 두기로 하고...

 

socket 통신을 위한 기본적인 테스트를 위해서는 당연히? 서버가 필요했다!! 하지만 동기는 아직 Auth2.0을 구현 중이다... (백수는 웁니다...)

 

그래서 간단한 서버를 구현하고, 테스트 해보기로 하였다.

 

Node.js 서버와 Spring 서버에 따라 사용하는 나뉜다고 한다.

 

전자의 경우 https://socket.io/

Socket.IO

후자의 경우 https://github.com/sockjs 를 많이 쓴다고 한다.

 

구현 될 우리 서버의 경우 후자이기 때문에, sockjs-client를 활용하여 클라이언트 소켓 통신 테스트를 해보았다!

* Node.js 서버로 어차피 테스트 할 거라 socket.io로 구성하다가 socket의 connected 가 클라이언트에서 false 로 고정되서 화가났던건 안비밀

 

우선 서버는 https://github.com/sockjs/sockjs-node/tree/main/examples/echo 를 이용하였다. 메세지가 들어오면, 같은 메세지를 서버에서 반환해주는 코드이다.

 

친절하게 클라이언트딴도 구현해 놓았기 때문에 잘 사용해 볼 수 있었다!!

 

example/echo 클라이언트

그림에서 보이는것 과 같이 메세지 "hello~"를 보내면 sending으로 표기, message로 반환된다.

 

이제 직접 구현한 클라이언트 딴에 이어주고자 한다.

 

준비물

npm install sockjs-client 

npm install @stomp/stompjs 

stomp는 추후 서버가 개발 될 경우 쓰이게 될 것이다.

 

구현된 코드는 다음과 같다

 

import React, { useEffect, useState } from "react";
import './Chatting.css'
import * as SockJS from 'sockjs-client';
// import * as StompJs from '@stomp/stompjs';  

const Chatting = () => {
    // chatting 토클 상태
    const [live, setLive] = useState(false);
    // 메세지 유저 및 내용
    const [message, setMessage] = useState('');
    //서버 url
    const [serverUrl, setServerUrl] = useState('');
    // 서버로 부터 받아온 내용
    const [chat, setChat] = useState([]);

    const [sockjs, setSockjs] = useState();
    const [receivedData, setReceivedData] = useState('');

    useEffect(()=>{console.log(chat)},[chat])

    useEffect(()=>{
        if(receivedData === '') return;
        setChat([...chat, {name: "Server", message: receivedData}])
    },[receivedData])
    
    const onClickConnectBtn = () => {
        const sock = new SockJS('http:localhost:8080/echo');
        sock.onmessage = function (e){
            setReceivedData(e.data)
            console.log(e.data)
        }
        setSockjs(sock);
        setChat([...chat, {name: "testUser", message: "님이 입장하셨습니다."}])
        setLive(true);
    }
    const onClickDisconnectBtn = () => {
        setLive(false);
    }
    const inputMessage = (e) => {
        setMessage(e.target.value);
    }
    const onEnter = (e) => {
        if(e.keyCode === 13) {
            sendMessage();
        }
    }
    const sendMessage = () => {
        if(message === '') return;
        setChat([...chat, {name: "testUser", message: message}])
        console.log(message)
        console.log(sockjs)
        sockjs.send(message);
        setMessage('');
    }
    const setChatServerURL = (e) => {
        setServerUrl(e.target.value);
    }
    const renderChat = () => {
        console.log(chat)
        return chat.map(({name, message}, index) => (
            <div key={index}>
                <>{name}: <>{message}</></>
            </div>
        ));
    }
    return(
    <div className="chatting_container">
        { !live && 
            <>
                <>Chrome Extension Chatting Application</>
                <input className="chatting_urlInput" type='text' placeholder="URL을 입력해주세요" onChange={setChatServerURL} value={serverUrl} />
                <button className="chatting_connectBtn" onClick={onClickConnectBtn}>연결</button>
            </>
        }
        {
            live &&
            <>
                <div className="chatting_Room">
                    {renderChat()}
                </div>
                <input className="chatting_messageInput" type='text' placeholder='메세지를 입력해주세요' onChange={inputMessage} onKeyDown={onEnter} value={message}/>
                <button className="chatting_sendMessage" onClick={sendMessage}>전송</button>
                <br />
                <button className="chatting_disConnectBtn" onClick={onClickDisconnectBtn}>연결 끊기</button>
            </>
        }
    </div>)
}

export default Chatting

 

기본적으로 chat에 모든 채팅이 기록된다.

receivedData를 따로 또 정의한 이유는 sock.onmessage에서 chat을 불러오지 못해, receiveData에 저장 후, chat 배열에 append된다.

 

연결하기 버튼이 눌렀을 때, 새로운 sockjs 객체를 생성, 저장하고, 함께 onmessage를 등록했다.

 

메세지가 전송될 때 sockjs의 send 메소드를 통해 메세지를 보낸다. 

 

결과 창은 다음과 같다!

 

사실 클라이언트 부분은 소켓 통신 부분이 상당히? 쉽지만, socket.io 그리고 서버 구성, chrome extension에서 어느 곳에 해당 로직이 이루어져야 하는지 에 대한 깊은 삽질 때문에 상당히 애를 먹었다...

 

일단은... 당분간은 서버가 개발되기 전까지 css를 건들 것 같다...ㅎ