[javascirpt] Websocket

javascript에서 서버와 클라이언트 사이에 실시간 통신을 필요하다면 Websocket을 사용할 수 있다.

예시에서 Server Side에는 express.js를 Client Side에는 Vue.js를 사용하였다.

Server Side

const express = require('express');
const http = require('http');

const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server, {
    cors: {
        origin: 'http://localhost:8080',
        methods: ['GET', 'POST'],
        allowedHeaders: ['Content-Type'],
        credentials: true
    }
});

app.get('/', function (req, res) {
    res.send("DD");
});

io.on("connection", (socket) => {
    socket.on("message", (arg) => {
       console.log("received message => ",arg);
    });

    let num = Math.random();
    console.log(num);
    socket.emit("test", num);
});

server.listen(3000, () => {
    console.log("Socket IO server listening on port 3000");
});

Client Side

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import type { Ref } from 'vue';
import { io } from "socket.io-client";
import axios from "axios";

const msg: Ref<string | number> = ref("");
msg.value = "메세지입니다."

interface State {
  connected: boolean,
  fooEvents: string[],
  barEvents: string[]
}

const state: Ref<State> = ref({
  connected: false,
  fooEvents: [],
  barEvents: []
});

const socket = io("http://localhost:3000");
onMounted(async () => {
  connect();
  socket.on("test", (message) => {
    console.log(message);
    msg.value = message;
  })
});

const connect = () => {
  console.log("connet method");
  socket.connect();
  socket.emit("message", "message!!!!!")
}
const disconnect = () => {
  console.log("connet method");
  socket.disconnect();
}
onBeforeUnmount(async () => {
  disconnect();
});

</script>
<style scoped>
</style>

Client Side에서 onMounted 훅에 Websocket 서버에 connect 요청을 보낸 뒤에
그 후 message 이벤트로 message!!!!!라는 값을 보낸다.

onMounted(async () => {
  connect();
  socket.on("test", (message) => {
    console.log(message);
    msg.value = message;
  })
});

const connect = () => {
  console.log("connet method");
  socket.connect();
  socket.emit("message", "message!!!!!")
}

Server Side에서 connect 이벤트를 받으면 socket을 매개변수로 받아 콜백함수를 실행한다.
socket에 message 이벤트에 반응할 수 있게 아래와 같이 선언해주었다.

io.on("connection", (socket) => {
    socket.on("message", (arg) => {
       console.log("received message => ",arg);
    });
});

그리고 임의의 숫자를 구하여 Client Side에 test라는 이름의 이벤트를 보내준다.

 let num = Math.random();
 console.log(num);
 socket.emit("test", num);

Client Side에서는 test 이벤트를 받을 경우 다음과 같이 작동한다.

  socket.on("test", (message) => {
    console.log(message);
    msg.value = message;
  })