[Postman] WebSocket Mock Server 사용법

Postman 설정

• Postman에 접속한다.
• 사이드바에서 Mock Servers에 접속한다. (없을 경우 Configure workspace sidebar에서 활성화시킨다.)

  

• New에서 WebSocket을 선택한다.

  

• 연결 테스트를 진행한다.

  

  
  
  • URL은 테스트용이기 때문에 wss://ws.postman-echo.com/raw를 사용해 주었다.
  • Mock Server이기 때문에 Message를 Send 했을 때 동일한 값이 넘어온다.

---

Vue에 연결하여 테스트

<template>
  <div class="search-result">
  	Postman Mock Servers Test
    <button @click="sendMessage">전송</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      webSocket: null,
    };
  },
  created() {
    this.initSocket();
  },
  methods: {
    initSocket() {
      if (this.webSocket === null) {
        this.webSocket = new WebSocket('wss://ws.postman-echo.com/raw');
        this.webSocket.onopen = () => {
          console.log('연결 성공');
        };
      }
    },
    sendMessage() {
      if (this.webSocket !== null && this.webSocket.readyState === WebSocket.OPEN) {
        this.webSocket.send('메세지 전송!');
        this.recieveMessage();
      } else {
        console.error('WebSocket 연결이 없거나 준비 상태가 아닙니다.');
      }
    },
    recieveMessage() {
      this.webSocket.onmessage = async (socketData) => {
        console.log(socketData.data);
      };
    },
  },
};
</script>