Next.js, Express 및 TypeScript와 함께 Socket.io를 사용하는 방법(요구문 대신 ES6 가져오기)

저는 현재 Socket.io를 사용하여 Next.js 프런트엔드와 사용자 지정 Express 서버 백엔드 간에 통신하는 TypeScript 프로젝트에서 작업하고 있습니다.

Socket.io를 설정하는 동안 import 대신 ES6require 구문을 사용하여 TypeScript 프로젝트에서 Socket.io를 설정하는 방법을 설명하는 문서를 찾기 위해 고군분투했습니다. Next.js와 함께 모든 것이 어떻게 맞아야 하는지 설명하는 것을 찾는 것은 훨씬 더 어려웠습니다.

그래서 탄생한 포스트...

처음부터 시작한다면...

TypeScript/Express 커스텀 서버 Next.js 프로젝트를 만들려면 Next.js 저장소에 있는 custom Express Server example과 custom TypeScript Server example을 조합하여 내 프로젝트를 생성했습니다.

먼저 사용자 정의 TypeScript 서버를 생성하기 위해 명령npx create-next-app --example custom-server-typescript을 사용하여 프로젝트를 생성했습니다. 그런 다음 맞춤형 Express 서버 예제를 살펴봄으로써 Express를 개조했습니다. 결과server.ts는 이 게시물의 맨 아래에 있습니다.

다른 예를 따르지 않은 이유는 무엇입니까?

내가 온라인에서 본 대부분의 예는 다음과 같은 작업을 수행하기를 원합니다.

import express from 'express';

const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

그러나 피할 수 있다고 생각한다면 TypeScript 코드에서 두 개 또는 임의의require 문을 원하지 않았습니다.

ES6 가져오기만 있는 내 server.ts

필요한 종속 항목(Next.js/React/TypeScript에 추가):

npm install -s express @types/express socket-io

기다리던 코드:

import express, { Express, Request, Response } from 'express';
import * as http from 'http';
import next, { NextApiHandler } from 'next';
import * as socketio from 'socket.io';

const port: number = parseInt(process.env.PORT || '3000', 10);
const dev: boolean = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });
const nextHandler: NextApiHandler = nextApp.getRequestHandler();

nextApp.prepare().then(async() => {
    const app: Express = express();
    const server: http.Server = http.createServer(app);
    const io: socketio.Server = new socketio.Server();
    io.attach(server);

    app.get('/hello', async (_: Request, res: Response) => {
        res.send('Hello World')
    });

    io.on('connection', (socket: socketio.Socket) => {
        console.log('connection');
        socket.emit('status', 'Hello from Socket.io');

        socket.on('disconnect', () => {
            console.log('client disconnected');
        })
    });

    app.all('*', (req: any, res: any) => nextHandler(req, res));

    server.listen(port, () => {
        console.log(`> Ready on http://localhost:${port}`);
    });
});

server.ts 설명

내server.ts와 Next.js 예제에서 생성된 것의 주요 차이점은 http 모듈을 사용하여 서버를 실행하는 반면 Express 전에는 서버를 실행한다는 것입니다. 이는 Socket.io가 설정되면 서버에 연결할 수 있도록 하는 데 필요합니다.

추가 변경 사항:

app를 nextApp로 변경하여 next 앱임을 더 명확하게 하고, 같은 이유로 handler를 nextHandler로 변경했습니다. 또한 Express에서는 app 변수를 사용하는 것이 관례입니다.

http.CreateServer()가 아닌 const server = require("http").Server(app);를 사용하여 HTTP 서버를 만듭니다.

require를 사용하는 대신 HTTP 서버에 연결하는 데 사용됩니다io.attach(). const io = require("socket.io")(server); .

요약

이 게시물은 import 대신 ES6require를 사용하는 Next.js 사용자 정의 서버에서 Socket.io를 사용하는 방법을 보여줍니다.

이 게시물이 저에게 반응을 떨어뜨리는 데 도움이 되었다면! 개선할 수 있는 것을 찾았습니까? 댓글로 알려주세요.

읽어 주셔서 감사합니다!