SvelteKit 및 SocketIO를 사용한 라이브 채팅

안녕! 👋

오늘 우리는 Socket.IO를 살펴보고 이를 SvelteKit 프로젝트에 통합하는 방법을 살펴보겠습니다. 예를 들어 이 데모에서는 실시간 채팅 앱을 빌드합니다.

프로젝트 설정

먼저 SvelteKit 프로젝트가 필요합니다. 이미 프로젝트가 있는 경우 이 단계를 건너뛸 수 있습니다. 그렇지 않은 경우 다음 명령을 사용하여 간단히 만들 수 있습니다.

npm init svelte@next live-chat-app
cd live-chat-app
npm install
npm run dev -- --open

이 데모에서는 Tailwind CSS를 사용하고 있습니다. 나는 이미 how to add Tailwind CSS to SvelteKit 에 글을 썼습니다.

종속성 설치

필요한 것은 서버측 부분(수신 요청 및 연결 처리)을 위한 Socket.IO와 클라이언트측 부분(메시지 보내기 및 받기)을 위한 Socket.IO-Client 뿐입니다.

npm i socket.io socket.io-client

Socket.IO 서버 주입

SvelteKit 구성에서 Socket.IO 서버를 직접 주입할 수 있습니다.

// ... (other imports here)
import { Server } from 'socket.io'; // <-- Import the Socket.IO server

const config = {
    // ...

    kit: {
        adapter: adapter(),
        vite: {
            plugins: [
                {
                    name: 'sveltekit-socket-io',
                    configureServer(server) {
                        const io = new Server(server.httpServer);

                        // Socket.IO stuff goes here                

                        console.log('SocketIO injected');
                    }
                }
            ]
        }
    },

    // ...
};

export default config;

서버 측 부분

이 데모에서는 작업을 단순하게 유지하고 각 클라이언트에 대해 임의의 사용자 이름을 생성하고 사용자 이름 및 시간과 함께 수신 메시지를 브로드캐스트합니다.

// This is located in the svelte config (see above "Socket.IO stuff goes here")
io.on('connection', (socket) => {
    // Generate a random username and send it to the client to display it
    let username = `User ${Math.round(Math.random() * 999999)}`;
    socket.emit('name', username);

    // Receive incoming messages and broadcast them
    socket.on('message', (message) => {
        io.emit('message', {
            from: username,
            message: message,
            time: new Date().toLocaleString()
        });
    });
});

참고: 이 가이드는 전체 Socket.IO 가이드가 아닙니다. 이 예제는 매우 간단하며 SvelteKit에서 Socket.IO를 사용하는 방법만 보여줍니다.

클라이언트 측 부분

Socket.IO에 연결

여러 구성 요소 또는 페이지에서 Socket.IO 연결을 사용하고 싶을 수 있으므로 연결 항목을 분리하는 것이 좋습니다.

// src/lib/realtime.js
import ioClient from "socket.io-client";
const ENDPOINT = "http://localhost:3000";

const socket = ioClient(ENDPOINT)

export const io = socket

이제 프로젝트의 모든 곳에서 가져오고 사용할 수 있습니다io.

형세

클라이언트 측에 Socket.IO를 추가하기 전에 데모용 간단한 UI를 생성하겠습니다. 이것은 채팅일 뿐이므로 src/routes/index.svelte에서 직접 수행합니다.

<script>
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {

    }
</script>

<div class="h-screen w-screen bg-zinc-800">
    <div class="h-full w-full max-w-md mx-auto bg-zinc-500 flex flex-col">

        <header class="px-6 py-4 border-b border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center justify-between">
            <span class="font-bold text-xl">My Chat app</span>
            <span>{username}</span>
        </header>

        <div class="h-full w-full p-4">
            {#each messages as message}
                <div class="bg-zinc-300 rounded-xl rounded-tl-none px-4 py-3 my-4 w-fit">
                    <span class="flex items-center space-between gap-4">
                        <b>{message.from}</b>
                        <i>{message.time}</i>
                    </span>
                    {message.message}
                </div>
            {/each}
        </div>

        <form action="#" on:submit|preventDefault={sendMessage}
            class="px-6 py-4 border-t border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center"
        >
            <input type="text" bind:value={textfield} placeholder="Type something..." class="bg-transparent border-none px-4 py-3 w-full" />
            <button type="submit" class="shrink-0 border border-white rounded-lg px-4 py-3">Send</button>
        </form>

    </div>
</div>

보시다시피 모든 메시지를 messages 배열에 저장하고 each 루프 내부에 출력합니다.

메시지를 보내기 위해 sendMessage 형식에 리스너를 연결했습니다.

메시지 보내기

먼저 방금 만든 파일(realtime.js)에서 가져오기io가 필요합니다.
send 함수에서 다음 메시지와 함께 message 이벤트(서버 측 부분에서 호출한 방식)를 간단히 트리거할 수 있습니다.

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

메시지 수신

메시지를 수신하려면 message 이벤트를 수신해야 합니다(이것이 서버 측 부분에서 호출한 방식입니다). 우리가 받는 객체는 우리가 보낸 것과 동일한 객체(서버 측)이며 messages 배열에 추가할 수 있습니다.

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    onMount(() => {
        io.on("message", message => { // Listen to the message event
            messages = [...messages, message]
        })
        io.on("name", name => { // Another listener for the name:
            username = name // Update the name so it can be displayed
        })
    })

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

이제 npm run dev를 실행하고 테스트하십시오.




그게 다야 - 이제 서버와 클라이언트 간에 실시간으로 데이터를 보낼 수 있습니다! 🚀

읽어주셔서 감사하고 좋은 하루 되세요 🤗

이 글이 도움이 되셨나요? ⬇️