서버 메시지 전송 클래스 기능 실현 방법 비교

사람들이 네트워크에 대한 사용이 빈번해지면서 이전의 클라이언트 요청-> 서버가 처리하고 되돌아오는 통신 모델은 이미 사람들의 네트워크에 대한 수요를 만족시킬 수 없다.현재 매우 흔히 볼 수 있는 장면은 시스템이 개인에게 알림을 전송해야 한다는 것이다.모멘트, 웨이보, 네가 끊임없이 새로고침을 해야만 새로운 소식이 있는지 아닌지 알 수 있다는 것을 생각해 봐라.
이렇게 하면 서버가 클라이언트에게 주동적으로 데이터를 전송해야 한다.
호기심 때문에 나는 이런 몇 가지 방법을 실험했다.

1 ajax 폴링

실현 원리는 클라이언트가 끊임없이 서버에 요청을 한 다음에 서버가 데이터 변화가 있는지 조회하고 변화가 있으면 데이터를 클라이언트에게 되돌려주는 것이다.
예제

 window.setInterval(function ({
     $.get("url", 
          {"timed": new Date().getTime()}, 
          function (data) {
             $("#logs").append("[data: " + data + " ]
");
     });
 }, 3000);

그러면 뭐가 문제일까요?서버에 대량의 추가 비용을 초래할 수 있습니다. 매번 요청은 서버 처리가 필요하기 때문에 데이터 변화가 없을 때도 응답을 하여 서버에 큰 압력을 가합니다.

2 긴 폴링

긴 폴링은 폴링에 대한 개조로 서버는 더 이상 데이터 변화가 검출되었든 없든 처리해야 한다.데이터 변화가 없으면 연결 상태를 유지하고 되돌아오는 것을 알았을 때 되돌아오는 결과다.
긴 폴링 예제 코드
프런트엔드 코드

var postAjax = function(){
        $.ajax({
            url : 'url',
            type : 'GET',
            success : function(data) {
                console.log(data);
                postAjax();
            }
        });
}

//서버 코드

public function getTestData()
{
    while (1) {
        sleep(5);
        $c = rand(1, 100);
        if ($c > 90) {
            $this->ajaxReturn($c.'time = '.date('Y-m-d H:i:s'));
            break;
        }
    }
}

3 Server-Sent

Server-Sent 상세 내용은 완대신의
http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
이 블로그는 이미 매우 분명하게 말했다.나의 이해는 긴 윤문과 차이가 많지 않고 끊임없이 요청을 보내고 받는 것이다.
Server-Sent와 긴 폴링의 한 가지 질문은 서비스 단말기가 걸려 있을 때 제때에 응답하는 다른 요청이 들어오면 바로 돌아오지 않고 폴링 요청이 끝날 때까지 줄을 서서 돌아오는 것입니다.이것은 브라우저의 최대 병렬 연결 수로 인해 발생한 것이기 때문에 효율도 높지 않을 것이다.

4 webSocket

마지막 테스트는 웹소켓이 적당합니다.최대 연결 수에 문제가 없습니다.
예제 코드
프런트 엔드

var postAjaxJS = function(){
    var wsServer = 'ws://192.168.0.119:9501';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        console.log("Connected to WebSocket server.");
    };

    websocket.onclose = function (evt) {
        console.log("Disconnected");
    };

    websocket.onmessage = function (evt) {
        console.log('Retrieved data from server: ' + evt.data);
    };

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };
}

백엔드 (swoole 확장, swoole 문서의 상세한 사용법 사용)

$server = new swoole_websocket_server("0.0.0.0", 9501);

    $server->on('open', function (swoole_websocket_server $server, $request) {
        echo "server: handshake success with fd{$request->fd}
";

        while (1) {
            sleep(1);
            $server->push($request->fd, "this is server:".time());
        }
    });

    $server->on('message', function (swoole_websocket_server $server, $frame) {
        echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}
";
        $server->push($frame->fd, "this is server");
    });

    $server->on('close', function ($ser, $fd) {
        echo "client {$fd} closed
";
    });

    $server->start();