자바스크립트에서 'this' 키워드를 활용한 웹소켓을 이용한 채팅 기능 구현 방법

18 Sep 2023

javascript

웹소켓이란?

웹소켓은 웹 애플리케이션과 웹 서버간의 양방향 통신을 가능하게 해주는 프로토콜입니다. 이를 통해 실시간으로 데이터를 주고받을 수 있어, 채팅 기능과 같이 실시간으로 업데이트되어야 하는 기능을 구현할 수 있습니다.

‘this’ 키워드의 활용

웹소켓 채팅 기능을 구현할 때 ‘this’ 키워드를 활용하면 편리하게 코드를 작성할 수 있습니다. ‘this’ 키워드는 현재 컨텍스트에 있는 객체를 참조할 때 사용됩니다.

다음은 ‘this’ 키워드를 이용한 웹소켓 채팅 기능의 구현 방법 예시입니다.

// 웹소켓 연결 및 채팅 기능 구현
class Chat {
  constructor() {
    this.socket = null;
    this.username = null;
  }
  
  connect(username) {
    this.username = username;
    
    // 웹소켓 연결
    this.socket = new WebSocket('ws://localhost:8080');
    
    // 연결 성공 시 이벤트 핸들러
    this.socket.onopen = () => {
      console.log('웹소켓 연결 성공!');
      this.sendMessage(`${this.username} 님이 입장했습니다.`);
    };
    
    // 메시지 수신 시 이벤트 핸들러
    this.socket.onmessage = (event) => {
      const message = event.data;
      console.log(`수신: ${message}`);
    };
    
    // 연결 종료 시 이벤트 핸들러
    this.socket.onclose = () => {
      console.log('웹소켓 연결 종료!');
      this.socket = null;
    };
  }
  
  sendMessage(message) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(message);
      console.log(`송신: ${message}`);
    } else {
      console.log('웹소켓이 연결되어 있지 않습니다.');
    }
  }
}

// 채팅 기능 사용
const chat = new Chat();
chat.connect('John');
chat.sendMessage('안녕하세요!');

위의 예시 코드에서는 Chat 클래스를 정의하여 웹소켓 연결과 채팅 기능을 구현했습니다. ‘this’ 키워드를 이용해 현재 컨텍스트에 있는 속성을 참조하고, 메시지를 송수신하는 기능을 구현했습니다.

결론

자바스크립트의 ‘this’ 키워드를 활용하여 웹소켓을 이용한 채팅 기능을 구현할 수 있습니다. ‘this’ 키워드를 사용하여 현재 컨텍스트에 있는 객체를 참조하고, 웹소켓 연결 및 메시지 송수신 기능을 구현할 수 있습니다. 채팅 기능을 구현할 때 ‘this’ 키워드를 적절하게 활용하면 코드를 더욱 간결하게 작성할 수 있습니다.

#Websocket #채팅