Socket) Web Socket으로 실시간 채팅 구현하기2

Web Socket - Client 환경 세팅

(1) 모듈 생성과 client socket 생성

<script>
  import {onMount} from 'svelte';
  import axios from 'axios';
  import io from 'socket.io-client';

  let messages = [];
  let newMessage = ''; 

라이브러리 설명

• {onMount} : svelte에서 페이지가 로딩되면 먼저 실행되는 함수
• axios : Promise 기반 HTTP 클라이언트 라이브러리
  https://velog.io/@eunbinn/Axios-vs-Fetch
  fetch vs axios 라이브러리 설명
  +) Promise : 통신 중 client에 response가 도착하기 전에 먼저 도착하는 가짜? response
  https://javascript.info/promise-basics
• io : socket.io(server의 socket라이브러리)를 client와 연결하기 위한 라이브러리

변수 설명

• messages : client간 전송될 메시지를 담을 배열
• newMessage : client가 전송할 메시지

(2) connection 📞

const socket = io("http://localhost:8000");

: server의 socket과 연결하는 부분

---

Web Socket - client 기능 구현

(1) 초기 메시지 목록 가져오기 - RestAPI 호출 💬

  onMount(async() =>{
    // 이 부분은 RestAPI 호출하는 부분
    const response = await axios('http://localhost:8000/messages');
    console.log(response.data[0]);
    messages = [...messages,...response.data];
})

1 → onMount : 아래의 내용들을 가장 먼저 실행
async ~ await → promise값이 아니라 response를 받을 때까지 기다린다.
2 → server의 /messages 엔드포인트를 호출해 response를 받는다.

// 서버의 /messages 엔드포인트
app.get('/messages',(req,res)=>{
    console.log("이전 메시지들을 불러옵니다.")
    res.json(messages);
})

3 → console에 json형태로 온 response안에서 데이터가 있는 영역 중 첫번째만 띄운다.
4 → client에 있던 messages 배열에 서버가 보낸 메시지 배열을 합친다.
+) 배열끼리 합칠 때 배열 = [... 배열, ...합칠 배열]을 이용하면 쉽게 배열을 합칠 수 있다.

(2) 서버에서 메시지 수신하기 📩

    //서버에서 호출하는 부분
    socket.on("message",(message)=>{
      messages =[...messages,message];
      newMessage = '';
      console.log(messages);
    })
  })  

1 → server에서 message 이벤트를 호출한다면
response로 message를 받고
2 → client에 있던 messages 배열에 서버에서 보낸 message를 넣는다.
3 → 사용자가 입력했었다면 newMessage변수를 초기화한다.
4 → console에 서버에서 보낸 message를 띄운다.

(3) 서버에 메시지 전송하기 💌

function sendMessage(){
    const message = {
      text:newMessage,
      timestamp : new Date().toISOString(),
    }

  //axios.post('http://localhost:8000/post_messages',message);    //RestAPI 호출
    socket.emit('message',message);     // socket.io 호출

  }
</script>

1 → sendMessage()함수 정의 (Js문법)
2 → message dictionary에 사용자가 입력한 newMessage 와 지금 시간을 저장한다. 이 message는 서버에 보낼 dictionary이다.
5 → ReatAPI를 통해 서버에 정의되어있는 post_message 엔드포인트를 호출한다.
6 → socket을 통해 서버에 정의되어있는 message 이벤트를 호출한다.

<input bind:value={newMessage} on:keydown="{e=> e.key==='Enter' && sendMessage()}"/>
<button on:click={sendMessage}>Send</button>

<ul>
{#each messages as message (message.timestamp)}
<li>{new Date(message.timestamp).toLocaleTimeString()}: {message.text}</li>
{/each}
</ul>

Send

1 → 사용자가 입력한 값을 newMessage에 저장한다.
2 → Send버튼을 클릭했을 때 위에서 정의한 sendMessage 함수를 호출한다.
3 → message 배열에 있는 모든 메시지와 시간을
4 → 화면에 출력

---

시현영상