[javascript] Socket.io를 사용하여 실시간 반응형 워드프레스 테마를 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 실시간 웹 애플리케이션 개발을 위해 사용되는 JavaScript 라이브러리입니다. 워드프레스 테마에 Socket.io를 통합함으로써 실시간 반응을 갖는 테마를 구현할 수 있습니다. 이를 위해 다음과 같은 단계를 따를 수 있습니다.

Node.js 및 Socket.io 설치하기
- Node.js를 설치합니다. https://nodejs.org/ko/ 에서 다운로드하고 설치할 수 있습니다.
- 설치가 완료되면 터미널 또는 명령 프롬프트에서 npm install socket.io 명령어를 입력하여 Socket.io를 설치합니다.
워드프레스 테마에 Socket.io 통합하기
- 워드프레스 테마 디렉터리로 이동합니다.
- 테마의 functions.php 파일을 엽니다.
- 다음 코드를 파일에 추가합니다.

// Socket.io 스크립트 로드
function load_socket_script() {
    wp_enqueue_script('socket.io', '//cdn.socket.io/socket.io-2.4.1.js');
}
add_action('wp_enqueue_scripts', 'load_socket_script');

// Socket.io 연결 및 실시간 이벤트 처리
function init_socket_io() {
    ?>
        <script type="text/javascript">
            var socket = io();

            // 연결된 Socket.io 서버에서 메시지를 받으면 처리하는 부분
            socket.on('message', function(data) {
                // 실시간으로 받은 데이터를 원하는 방식으로 처리
                console.log(data);
            });
        </script>
    <?php
}
add_action('wp_footer', 'init_socket_io');

Socket.io 서버 설정하기
- Socket.io를 사용하기 위해 서버를 설정해야 합니다.
- 서버의 index.js 파일에 다음 코드를 추가합니다.

const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('소켓 연결됨');

    // 클라이언트로부터 메시지를 받으면 처리하는 부분
    socket.on('message', (data) => {
        console.log('받은 데이터:', data);
        // 받은 데이터를 클라이언트에게 다시 전송
        io.emit('message', data);
    });
});

server.listen(3000, () => {
    console.log('Socket.io 서버 실행 중');
});

Socket.io 서버 실행하기
- 터미널 또는 명령 프롬프트에서 서버 디렉터리로 이동합니다.
- node index.js 명령어를 입력하여 Socket.io 서버를 실행합니다.

이제 워드프레스 테마에서 Socket.io를 사용하여 실시간 반응형 기능을 구현할 수 있습니다. 클라이언트에서 메시지를 보내면 Socket.io 서버에서 받은 후 클라이언트에게 다시 전송하는 방식으로 실시간 반응을 구현할 수 있습니다.

참고 문서: