Socket.io 이벤트를 순서대로 간단하게 처리하는 방법: 간단한 안내서

수신되는 모든 Socketio 이벤트는 도착 순서대로 처리를 시작합니다. 동기식 처리기 기능이 있는 항목은 동일한 순서로 처리를 완료하는 것이 보장됩니다. 그러나 어떤 순서로든 처리를 완료할 수 있는 비동기 처리기가 있는 이벤트의 경우에는 그렇지 않을 수 있습니다. 이 동작으로 인해 코드가 더 빨라지지만 어떤 경우에는 우리가 원하는 것이 아닐 수도 있습니다.

이 짧은 게시물에서는 비동기 작업이 포함된 이벤트가 서버에 도착하는 순서대로 처리를 시작하고 완료하도록 만드는 방법을 알아봅니다. 이를 달성하기 위해 간단한 맞춤형 대기열 시스템을 만들겠습니다.

자세히 살펴보겠습니다.

문제

두 개의 클라이언트가 Socketio 서버에 연결된 상황이 있다고 가정해 보겠습니다. 이벤트를 보내는 첫 번째 동작이 데이터베이스 테이블에 새 행을 생성하고 두 번째 동작이 동일한 행을 업데이트하는 동작을 원합니다. 코드는 다음과 같습니다.

io.on("connection", (socket) => {
    console.log("A user connected");

    socket.on("SOME_EVENT", async(param) => {
            //check whether the column already exists:
            const column = await db.select...

            //if column exists, update it:
            if(column){
                await db.update...
            }

            //else, create one
            await db.insert...
    })
}

이제 문제는 두 클라이언트가 동시에 "SOME_EVENT"를 발생시키면 둘 다 데이터베이스에 우리가 원하는 것이 아닌 새 행을 생성할 가능성이 있다는 것입니다.

대기열 시스템 문제 해결

socketio가 핸들러 기능을 실행하도록 허용하는 대신, 이를 가로채서 실행 시기를 결정합니다. 핸들러를 가로채면 이를 순서대로 구현하는 작업을 담당하는 큐잉 시스템으로 보냅니다.

시스템에는 대기열과 이벤트 루프라는 두 가지 주요 구성 요소가 있습니다.

대기열이란 무엇입니까?

컴퓨터 과학에서 큐는 데이터를 순차적으로 저장하고 관리할 수 있는 데이터 구조입니다. 이를 달성하기 위해 구조는 데이터가 한쪽 끝(테일)에만 추가되고 다른 쪽 끝(헤드)에서만 종료되도록 허용합니다. 이 특성을 흔히 FIFO라고 하는데, 이는 선입선출(First In First Out)을 의미합니다.

큐는 추상 데이터 유형(ADT)입니다. 다른 ADT와 마찬가지로 Javascript를 포함한 많은 프로그래밍 언어에는 기본적으로 ADT가 없습니다. 이 게시물에서는 Javascript 배열의 unshift 및 pop 메소드를 사용하여 대기열을 모델링하겠습니다.

이벤트 루프란 무엇입니까?

넓은 의미에서 이벤트 루프는 일정 간격으로 실행되고 조건에 따라 작업을 실행하는 구성입니다. 우리의 경우에는 대기열에 보류 중인 함수가 있는지 지속적으로 확인하고 이전 함수가 완료된 경우에만 다음 함수를 호출하는 setInterval을 사용할 것입니다.

대기열 시스템 구현

class QueuingSystem {
    //We're making the queue private so that it can only be 
    //modified only within the class
    #queue = [];
    constructor(interval) {
        this.interval = interval;
    }

    //returns last item of an array:
    lastItem(arr) {
        return arr[arr.length - 1];
    }

    //returns true if array is empty:
    isEmpty(arr) {
        return arr.length == 0;
    }

    //responsible for executing the function at the head of the queue:
    async run(arr) {
        //removing the function at the head of the queue:
        const func = arr.pop();

        //adding "false" placeholder at the head to indicate that 
        //a function is being executed:
        arr.push(false);

        //executing the function:
        await func();

        //removing the false placeholder at the head to indicate that 
        //the run function is ready to execute the next function: 
        arr.pop();
    }

    //function to add to the tail end of the queue:
    addToQueue(func) {
        this.#queue.unshift(func);
    }

    //function to start the event loop:
    start() {
        return setInterval(() => {
            //checking if the run method is free by checking if the item at the head is false.
            //and checking if the array isn't empty
            if (this.lastItem(this.#queue) !== false 
            && !this.isEmpty(this.#queue)) {
                this.run(this.#queue);
            }
        }, this.interval);
    }

    //stopping the event loop if no longer needed:
    stop() {
        clearInterval(this.start());
    }
}

이제 메시지 큐 클래스가 함수를 순차적으로 수신하고 실행할 준비가 되었습니다.

Socket.io에서 시스템 사용

대기열 시스템이 준비되어 있으면 이를 코드에서 사용해 보겠습니다.

//Create a socketQueue that loops after every half of a second:
const socketQueue = new QueuingSystem(500)

io.on("connection", (socket) => {
    console.log("A user connected");

    const handler = async(param) => {
            //check whether the column already exists:
            const column = await db.select...

            //if column exists, update it:
            if(column){
                await db.update...
            }

            //else, create one
            await db.insert...
    }

    socket.on("SOME_EVENT", (param) => {
        //Add the handler function to socketQueue queue
        socketQueue.addToQueue(hanlder.bind(null, param))
    })
}

server.listen(PORT, () => {
    //start the queuing system:
    socketQueue.start();
    console.log("App listening on port", PORT);
});

Javascript의 바인드 메소드는 함수와 해당 매개변수를 객체에 첨부하는 데 사용되지만 호출하지는 않습니다. 우리의 경우 함수를 어떤 객체에도 첨부하지 않기 때문에 첫 번째 인수가 null입니다.

결론

우리가 만든 메시지 대기열 클래스는 비동기 처리기를 사용하여 이벤트를 순차적으로 실행하는 데 도움이 될 수 있습니다. 더 복잡한 대기열 시스템이 필요한 경우 BullMQ 또는 기타 강력한 솔루션을 확인하세요. 즐거운 코딩하세요!

위 내용은 Socket.io 이벤트를 순서대로 간단하게 처리하는 방법: 간단한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!