SSE, mustache

Mar 14, 2024

Polling

클라이언트가 내부적으로 새로 고침을 계속 요청하는 것, 과부하 문제가 있음

Server Send Event

한번 서버와 연결하면 변경이 있을 때 마다 데이터를 전달 받는다. 단방향 통신

클라이언트는 데이터를 받을 수만 있음

User Controller


package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

// @RestController// 리턴시 그 문자 그대로 응답
@Controller // 리턴시 파일을 응답
public class UserController {

    @GetMapping("/joinForm")
    public String joinForm() {
        return "joinForm";
    }

    @PostMapping("/join")
    public String join(String username, String password, String email) {
//        String username = request.getParameter("username");
//        String password = request.getParameter("password");
//        String email = request.getParameter("email");

        System.out.println("username : " + username);
        System.out.println("password : " + password);
        System.out.println("email : " + email);

        if (username.length() > 10) {
            return "error-404";
        }
        return "main";
    }
}

Controller 어노테이션 : 스프링 컨트롤러로 만들어준다. http 요청을 처리

joinForm 메서드 : URL에 맨 끝에 /joinForm을 붙여 회원가입 화면으로 이동가능, joinForm.mustache템플릿을 불러옴

join 메서드 : username, password, email의 입력값을 콘솔에 소환함, if 조건문을 username이 10자 이상이면 404 error를 띄우고 그렇지 않으면 main을 불러온다.

Board Controller


package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BoardController {

    @GetMapping("/main")
    public String main() {
        return "redirect:/main";
    }
}

joinForm.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>회원가입 페이지</h1>
<hr>
<form action="/join" method="post">
    <input type="text" name="username" placeholder="username" required maxlength="10">
    <input type="password" name="password" placeholder="password" required>
    <input type="email" name="email" placeholder="email" required>

    <button>회원가입</button>
    <!--     액션요청 submit이 디폴트-->
</form>
</body>
</html>

required를 줘서 조건을 걸어줌(최대 길이 10자이상, 각 항목 필수 작성)

main.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>main page</h1>
<hr>
</body>
</html>

error-404.mustache


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>에러 : 잘못된 요청을 하셨어요</h1>
</body>
</html>

💡

유효성 검사는 프론트, 백엔드 양쪽에서 해야함

참조 : Spring에서 Server-Sent-Events 구현하기 (techcourse.co.kr)

package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; // @RestController// 리턴시 그 문자 그대로 응답 @Controller // 리턴시 파일을 응답 public class UserController { @GetMapping("/joinForm") public String joinForm() { return "joinForm"; } @PostMapping("/join") public String join(String username, String password, String email) { // String username = request.getParameter("username"); // String password = request.getParameter("password"); // String email = request.getParameter("email"); System.out.println("username : " + username); System.out.println("password : " + password); System.out.println("email : " + email); if (username.length() > 10) { return "error-404"; } return "main"; } }

package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class BoardController { @GetMapping("/main") public String main() { return "redirect:/main"; } }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>회원가입 페이지</h1> <hr> <form action="/join" method="post"> <input type="text" name="username" placeholder="username" required maxlength="10"> <input type="password" name="password" placeholder="password" required> <input type="email" name="email" placeholder="email" required> <button>회원가입</button>  </form> </body> </html>