페이지를 새로 고침하지 않고 알림 같은 플래시 메시지 보내기

Question

페이지에 플래시 메시지를 구현하려고합니다. 사용자가 해당 페이지에 제출 한 내용에 대한 상태 업데이트처럼 작동합니다. 즉, 해당 페이지에 양식이 있으며 사용자가 제출을 누르면 처리를 처리하는 경로에 게시되지만 다소 시간이 걸립니다. 그 과정에서 항상 동일한 페이지에 상태 업데이트를 제공하고 싶습니다. 항상 페이지를 다시로드하지 않는 것이 좋습니다.

app.get('/index', function(req,res) { 
    for (var i = 0; i < 100; i++) { 
     //send a flash every 2 seconds 
     setTimeout(function(i) { 
      req.flash('This is ' + i); 
     }, 2 * 1000 * i, i); 
    }; 
    res.render('../views/index.ejs'); 
}) 

이 가능 :이 작품처럼 뭔가 수를 어떻게 극단적 인 예를 들어

? 나는 'express-flash-notification'을 보았습니다. 그 일을 할 수 있는지 확신 할 수 없었습니다.

Answer 1

일반적으로 플래시 알림을 사용하면 새 페이지를 템플릿으로 만들 때 약간의 추가 정보가 추가됩니다. express-flash-notification과 같은 라이브러리는 페이지를 새로 고침하지 않으려면별로 유용하지 않습니다.

이 시나리오의 일반적인 접근 방식은 자바 스크립트를 사용하여 브라우저에서 HTTP 호출을 만들고 반환 된 정보로 DOM을 동적으로 업데이트하는 것입니다. 이를 위해 AJAX (jQuery에서 발견)와 같은 것을 사용할 수도 있습니다.

일반적인 흐름이 될 수 있지만 특정 요구에 맞게 조정할 수 있습니다.

1. 프론트 엔드 JS에서 AJAX 호출을 사용하여 양식을 보내십시오 (이미지 처리 중).
2. 서버가 업로드가 성공했음을 나타내는 200 OK 응답을 되돌려 보냅니다.
3. 그러면 frontend는 상태 업데이트를 요청하기 위해 서버에 몇 초마다 HTTP 요청을합니다. 이것은 json (res.json({}))으로 반환됩니다. 프론트 엔드 JS는 필요한 경우이를 표시합니다.

이 상태 업데이트를 위해 웹 소켓과 같은 것을 사용할 수도 있지만, 프론트 엔드 AJAX 호출에 처음 접근하는 경우 폴링 (몇 초에 한 번 요청)을 제안합니다. .