웹 소켓 사용하기(1)

1. 임포트하기

import { getCurrentInstance } from '@vue/runtime-core';

2. 변수선언하기

const app = getCurrentInstance();
const socket = app.appContext.config.globalProperties.$socket;
console.log(socket);

3. 보내기

socket.emit('publish', {data: {userid: 'aaa', username:'insert'}})

4. 받기

socket.on('subscribe', (revc) =>{
                console.log(revc)
                if(revc.username === 'insert'){
                    handleData()
                }
            })

socket.on( 'subscribe')로 보낼 수 있었던 이유는

io.on('connection', (socket) =>{
    console.log("----------------");
    console.log("socket");

    // 클라이언트에서 메시지가 도착했을 때
    socket.on('publish', function(data){
        console.log(data);

        // 모든 클라이언트에 메시지를 전송함
        io.emit('subscribe', {
            userid : data.data.userid,
            username : data.data.username
        })
    } )
    
})

다음과 같이 chat.js에서 publish와 subscribe로 주고 받기 때문
데이타를 data.userid, data.username으로 보내는 이유 또한
data.data.userid 등으로 잡아놨기 때문.

• 1. A가 db에 인서트함.
• 2. b에게 알려줌
• 3. b가 db에게 가져옴

a가 b에게 이미지를 주는 게 아님 신호만 주는거임
b가 신호가 왔을 때 db에 가져오는거임
오는 데이터가 중요한 게 아님. 신호를 주고 받는 게 중요한거임.