생산 중인 SocketIO가 포함된 SvelteKit

다음과 같은 경우에 읽으십시오:

SvelteKit과 함께 SocketIO를 사용하는 방법을 배우고 싶습니다.

자원:

SvelteKit: Docs

소켓 Io: Docs

비테: ​​Docs

확장 가이드: Live-Chat with SvelteKit and SocketIO

비디오 가이드:

소개

이것은 시리즈가 될 것입니다. 이것은 시리즈의 첫 번째 부분이며 지금부터 2일마다 이 시리즈의 새로운 부분을 발표할 것입니다. SvelteKit, socketIO, Express 및 아마도 redis를 사용하여 본격적인 채팅 앱을 만들 것입니다. 이 채팅 앱에는 다음과 같은 몇 가지 기능이 있습니다. 채팅을 위한 그룹 만들기, 단일 채팅 및 초대를 사용하여 비공개 그룹 링크에 가입할 수 있습니다.

여기에서는 SvelteKit에 WebSocket에 대한 기본 제공 지원이 없고 개발 및 생산을 위해 프로젝트에서 SocketIO를 사용할 방법을 찾아야 하기 때문에 SvelteKit에 SocketIO를 통합하는 방법에 대해 설명하겠습니다.

프로젝트 설정

먼저 init를 사용하여 SvelteKit 프로젝트를 설정합니다.

npm init svelte@latest anonChatApp
cd anonChatApp
npm install
npm run dev -- --open

이 데모에서는 Tailwind CSS를 사용하고 있습니다. 에 대해 이미 글을 쓴 적이 있습니다.

여기서는 SvelteKit에 WebSocket 지원 기능이 내장되어 있지 않기 때문에 node 어댑터를 사용할 것입니다. 따라서 이제 범위를 벗어난 vercel에 배포하는 데 도움이 되는 어댑터auto를 사용할 수 없으므로 서버에 배포해야 합니다.

프로젝트에 adapter-node를 설치할 예정입니다.

npm i -D @sveltejs/adapter-node

svelte.config.js 파일에서 어댑터를 변경합니다.

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        preprocess({
            postcss: true
        })
    ],
    kit: {
        adapter: adapter()
    }
};

export default config;

SocketIO 서버 추가

서버용 socket.io, 클라이언트용 socket.io-client에 대한 종속성을 설치하고 익스프레스도 필요합니다.

npm i socket.io socket.io-client express

여기서 우리는 개발 버전에서 WebSocket에 도움이 되는 vite 플러그인을 만들 것입니다.

// webSocketPluginVite.js 
import injectSocketIO from './socketIoHandler.js';

export const webSocketServer = {
    name: 'webSocketServer',
    configureServer(server) {
        injectSocketIO(server.httpServer);
    }
};

위에서 injectSocketIO에서 socketIoHandler.js를 가져오고 있습니다. 이 파일 핸들은 모두 socketIO 이벤트입니다. 연결, 메시지, 오류.

// socketIoHandler.js
import { Server } from 'socket.io';

export default function injectSocketIO(server) {
    const io = new Server(server);

    io.on('connection', (socket) => {
        let username = `User ${Math.round(Math.random() * 999999)}`;
        socket.emit('name', username);

        socket.on('message', (message) => {
            io.emit('message', {
                from: username,
                message: message,
                time: new Date().toLocaleString()
            });
        });
    });

    console.log('SocketIO injected');
}

이제 우리는 vite.config.js에 플러그인을 추가했습니다. 그래서 우리는 개발에 websocket을 사용할 수 있습니다.

import { sveltekit } from '@sveltejs/kit/vite';
import { webSocketServer } from './webSocket.js';

/** @type {import('vite').UserConfig} */
const config = {
    server: {
        port: 3000
    },
    preview: {
        port: 3000
    },
    plugins: [sveltekit(), webSocketServer]
};

export default config;

위의 플러그인을 가져오고 이제 개발 모드에서 WebSocket을 실행할 vite 플러그인 구성에 추가했습니다.

하지만 프로덕션 환경에서 작동하려면 더 추가해야 합니다. 따라서 처음에 구성한 node adapter를 사용하여 빌드해야 합니다.

npm run build

이렇게 하면 프로젝트에 대한 빌드가 생성됩니다. 이제 SvelteKit 서버에서 WebSocket을 사용하도록 확장해야 합니다. 그래서 SvelteKit의 기본 서버를 확장하는 데 도움이 되는 express가 필요했습니다.

// server.js

import http from 'http';
import express from 'express';
import injectSocketIO from '../socketIoHandler.js';
import { handler } from '../build/handler.js';

const app = express();
const server = http.createServer(app);

// Inject SocketIO
injectSocketIO(server);

// SvelteKit handlers
app.use(handler);

server.listen(3000, () => {
    console.log('Running on http://localhost:3000');
});

이제 빌드를 만들고 포트3000에서 실행 중인 프로덕션에서 실행할 수 있습니다.

클라이언트에 SocketIO 추가

우리는 이미 SocketIO의 클라이언트 측에 대한 종속성을 설치했습니다. lib 폴더webSocketConnection.js에 클라이언트용 소켓 연결을 처리할 파일을 추가합니다.

import ioClient from 'socket.io-client';
const ENDPOINT = 'http://localhost:3000';

const socket = ioClient(ENDPOINT);

export const io = socket;

여기에서 포트3000에서 실행 중인 끝점을 사용하는 소켓을 내보내고 있습니다.

이제 클라이언트에서 SocketIO를 사용하는 방법을 살펴보겠습니다.

<script lang="ts">
    import { io } from '$lib/webSocketConnection.js';
    import { onMount } from 'svelte';

    let textfield = '';
    let username = '';

    let messages = [];

    onMount(() => {
        io.on('message', (message) => {
            messages = [...messages, message];
        });
        io.on('name', (name) => {
            username = name;
        });
    });

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

        textfield = '';
        io.emit('message', message);
    }
</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>

위의 script 섹션에서와 같이 클라이언트측 소켓 연결을 가져오고 onMount 함수에서 이를 사용하여 모든 새 메시지와 서버에서 임의로 생성된 사용자 이름을 가져올 수 있습니다. 메시지를 보내기 위해 서버에서 메시지를 보내고 모든 사용자에게 브로드캐스트하기 위해 emit insendMessage 기능을 사용하고 있습니다.

이것은 SvelteKit에서 개발자 및 프로덕션의 SocketIO에 대한 기본 설정입니다. 여기서부터 2부에서 계속하겠습니다. 프로젝트에 추가 기능이나 기능을 제안하고 싶다면 댓글을 달아주세요.

Future me writing this, due to SvelteKit going to make some breaking changes in next update.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.