Created by useiconic.comfrom the Noun Project JH'Lab

TIL-8주차 코드

 
  • 2023년 01월 16일



1. 웹소켓 : 23.01.18

1) 웹 소켓이란?

  • 소켓이라는 것은 송신부와 수신부에서 최소한의 정보 2가지를 묶어서 보내준다.(IP, 버퍼에 붙여지는 식별해주는 Port)

  • 이 2가지가 있어야 데이터의 송수신을 식별할 수 있고 이를 소켓이라고 부른다.

  • 마지막으로 URL이 필요하다.(리소스에 해당하는 식별자) 이제는 URL을 통해서 데이터를 주고 받는다.

  • uri도 접속자의 식별자로 사용된다.

  • 하지만, 나중에 서버쪽에서 데이터를 분배하는 것이 어려울 수도 있다.***


2) 소켓 예제

  • 소켓은 TCP/IP에 의해서 설정이 되어서 즉, 사서함이 따로 준비된다.

  • 모든 클라이언트들이 개별적인 사서함(전용 포트들)들을 가지고 있다.

  • TCP/IP는 연결이 끊어지면, 사서함이 사라진다.(전용 포트이면서 전용 사서함)

  • UDP는 공용 포트인 공용 사서함을 의미한다.

  • 서버 포트라는 것도 추가적으로 존재한다.

  • 예시 :


window.addEventListener("load",function(){
    let inputSend = this.document.querySelector(".input-send");
    let btnSend = this.document.querySelector(".btn-send");
    let btnConn = this.document.querySelector(".btn-conn");

    
    btnConn.onclick = function(e){

        // WebSocket 연결 생성
        let username = 'newlec';
        const socket = new WebSocket(`ws://localhost:8080/chat/${username}`);

        // 연결이 열리면
        socket.addEventListener('open', function (event) {
            socket.send('Hello Server!');
        });

        // 메시지 수신
        socket.addEventListener('message', function (event) {
            console.log('Message from server ', event.data);
        });

        console.log("connect ...");
    }

    btnSend.onclick = function(e){
        let msg = inputSend.value;
        console.log(msg);
    }

});


3) 소켓 예제 : 이클립스와 연동

  • 실행 순서 :

    • 이클립스에서 톰캣 서버 실행하고 vscode도 서버 실행한다

    • 실행된 vscode의 html url에서 서버 연결 버튼 클릭 후 메세지 입력 후 전송 버튼을 누르면, 이클립스에서 메세지가 출력된다.

window.addEventListener("load",function(){
    let inputSend = this.document.querySelector(".input-send");
    let btnSend = this.document.querySelector(".btn-send");
    let btnConn = this.document.querySelector(".btn-conn");

    let socket = null;  // 전체 범위에서 사용
    
    btnConn.onclick = function(e){

        // WebSocket 연결 생성
        let username = 'newlec';                        // localhost, 80, chat만 설정!
        socket = new WebSocket(`ws://ict.newlecture.com/chat`);  // 변수 초기화 삭제!!

        // 연결이 열리면
        socket.addEventListener('open', function (event) {
            socket.send('Hello Server!');
        });

        // 메시지 수신
        socket.addEventListener('message', function (event) {
            //console.log('Message from server ', event.data);
            console.log(event.data); // 데이터가 바로 추력
        });

        // console.log("connect ...");
    }

    btnSend.onclick = function(e){
        let msg = inputSend.value;
        console.log(msg);

        if(socket)
            socket.send(msg);       // 메세지를 받는 경우!
    }

});

  • 다른 ip로 웹 소켓을 연결하는 과정 :

    • 메세지를 모두에게 다 뿌리면 채팅이 된다. 메세지를 보낸 사람한테 보내면 에코 기능만 될 뿐이다. 이러한 데이터를 동기식으로 변경해주자!

    • 이미 들어온 사람이 있는데 나가버리면 그 자리를 지워줘야 한다!! 지우지 않으면, 서버가 끊어지는 일이 발생하고 다음사람이 못 들어 온다.

package com.newlecture.web;

import java.util.concurrent.CopyOnWriteArrayList;

import jakarta.websocket.OnClose;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import jakarta.websocket.server.ServerEndpoint;


// 왜 나는 슬래시를 빼야하는가??(vscode의 url과 eclipse의 url가 터진다.)
											//웹프로젝트에서 만든다!
@ServerEndpoint("/chat")			//	ServerEndpoin라는 어노테이션으로 웹소켓입니다. , {}는 변수처럼 끌어다가 사용할 수 있다.
public class ChatServer {	
	// 클라이언트인 vscode에서 localhost, 80, chat만 설정!
	// 아무것도 여기에 안쓰면 에러가 발생한다!
	
	// ** 줄세워주는 동기화 기능!!
	static CopyOnWriteArrayList<Session> sessions = new CopyOnWriteArrayList<>();
	
	
	// ** OPEN : 서버 연결
	@OnOpen
	public void openHandler(Session session) {
		System.out.println("connected from ");	// 누구한테 연락이 왔는지 알 수가 없다.
		
	}
	
	// ** MESSAGE(session은 연결되었는지, message 메세지 내용까지)
	@OnMessage
	public void messageHandler(Session session, String message) {
		
		 System.out.println(message);		// 메세지를 모두에게 다 뿌리면 채팅이 된다.	
		 									// 메세지를 보낸 사람한테 보내면 에코 기능만 될 뿐이다.
		 
		 for(Session s : sessions) {
			 s.getAsyncRemote().sendText(message);	// 이미 들어온 사람이 있는데 나가버리면 그 자리를 지워줘야 한다!! 
			 										// 지우지 않으면, 서버가 끊어지는 일이 발생하고 다음사람이 못 들어 온다.
		 }
	}
	
	// ** CLOSE : 그 배열 자리를 지우는 부분!!
	@OnClose
	public void closeHandler(Session session) {
		sessions.remove(session);		// 채팅방에서 나가는 사람을 지우자!(이렇게 하면 더이상 서버 끊기는 일이 사라진다!)
	}
}



2. 23.01.18

1) 브라우저 디버깅 모드

  • 개발자 도구에서 네트워크 탭에서 캐시 사용 중지하면 새로고침 시, 새로고침 에러 없어짐.(캐시 쌓이는 것)

  • 네트워크탭의 응답탭에서 디버깅 가능!!

  • window 메서드 중에서 setInterval() 사용하여 계속 컴파일 시, 내용이 겹치는 경우가 생겨서 setTimeClear()로 없애주기!!(MDN 참고)

© JH'Lab 2021
검색