WebSocket 강의 내용 정리하기

클라이언트 데모 소스 살펴보기

출처: https://ko.javascript.info/websocket

서버와 웹소켓 연결하기

new WebSocket(url)

let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

클라이언트 연결 접속

onopen

socket.onopen = function(e) {
  alert("[open] 커넥션이 만들어졌습니다.");
  alert("데이터를 서버에 전송해봅시다.");
  socket.send("My name is Bora");
  // 'My name is Bora'라는 메시지를 서버로 보냄 
};

서버로부터 데이터 전송 받기

onmessage

socket.onmessage = function(event) {
  alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`);
};

연결 끊기

onclose

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`);
  } else {
    // 예시: 프로세스가 죽거나 네트워크에 장애가 있는 경우
    // event.code가 1006이 됩니다.
    alert('[close] 커넥션이 죽었습니다.');
  }
};

에러 처리

onerror

socket.onerror = function(error) {
  alert(`[error]`);
};

간단한 메세지 데이터 전송 소스

클라이언트 코드 살펴보기

메시지 폼

<form name="publish">
    <input type="text" name="message">
    <input type="submit" value="send">
  </form>

웹소켓 연결하기

let url ='ws://localhost:8080/ws';
let socket = new WebSocket(url);

'localhost:8080/ws'라는 주소의 서버와 소켓을 연결한다.

form에 있는 메세지 보내기

    document.forms.publish.onsubmit = function() {

      let outgoingMessage = this.message.value;      
      const obj = { "type": "message" , "params": { "value": outgoingMessage }} 
      socket.send(JSON.stringify(obj));
      return false;
    };

form에 onsubmit 객체를 찾아서 함수를 실행한다.
name 속성이 message라는 input 태그에 담긴 값을 가져와서 변수(outgoingMessage)에 저장한다.
웹소켓으로 데이터를 보내기 위해 객체 형태에 params > value 값에 변수(obj)를 담는다.
변수를 JSON 문자열로 변환해서 웹소켓으로 보낸다.
false를 return한다.

onsubmit(): <form>태그의 submit을 제어할 수 있는 함수

대개는 form 안의 데이터 유효성을 검사하기 위해 쓰인다고 한다.
함수의 return 값으로는 true 또는 false를 반환할 수 있다.
지정해주지 않으면 무조건 submit으로 넘어가는 문제가 발생한다.

둘의 차이가 궁금해서 return true로 변경해봤더니 404 Not Found 에러가 발생했다.

submit 후에도 이동하지 않고 계속 같은 페이지에 머물기 위해 false를 설정해야 하는 것 같다.

JSON.stringfy() vs. JSON.parse()

• JSON.stringfy(): JS 객체를 JSON 문자열로 변환
• JSON.parse(): JSON 문자열을 JS 객체로 변환

서버로부터 받은 메시지 보여주기

// 들어오는 메세지 핸들링
    socket.onmessage = function(event) {

      let incomingMessage = event.data;
      showMessage(incomingMessage);
    };

showmessage 함수 정의

// dev에 메세지 더하기
function showMessage(message) {

  let messageElem = document.createElement('div');
  const obj = JSON.parse(message);
  messageElem.textContent = obj.params.value;
  document.getElementById('messages').prepend(messageElem);
}

div 태그를 생성해서 변수(messageElem)에 담고
message를 JS 객체로 변환하고 변수(obj)에 담는다.
div 태그에 obj > params > value 값을 텍스트로 담는다.
messages라는 id를 가진 div 요소 앞에 message를 추가한다.

연결 끊기

socket.onclose = event => console.log(`Closed ${event.code}`);

수신받을 메시지가 노출될 div

<div id="messages"></div>