TIL-0203

목표

socket.io 공부하기

어제 서버를 만들어 보다가 오늘 socket.io에 대하여 공부를 하였다.

socket.io란 모듈을 이용해서 서버와 클라이언트를 지속적으로 통신하도록 만들어준다.

npm install --save socket.io 설치를 먼저 해야한다.

const express = require('express');
const http = require('http');
const path = require('path');
const socketIO = require('socket.io');

const app = express();
const publicPath = path.join(__dirname, '../client');

app.use(express.static(publicPath));

let server = http.createServer(app).listen(3000, () => {
  console.log('listening.....3000');
});

let io = socketIO(server);

io.on('connection', socket => {
  console.log('새로운 사람이 접속했습니다.');
  socket.on('newMsg', msg => {
    console.log(msg);
    io.emit('serverMsg', msg);
  });
});

오늘 만든 코드이다. express를 통해서 서버를 만들고, socket.io를 서버에 연결한다. 서버의 접속함과 동시에 io에도 접속하게 되는것이다. on이라는 메소드와 emit이라는 메소드를 이용해서 데이터를 주고받을수가 있다.

connection은 기본으로 있는것인데 연결되었을때의 상태를 의미한다. 연결이 끊길때에는 disconnect를 사용하면된다.

on은 괄호안에 전달받을 메세지의 이름을 설정해주고, 뒤에 함수를 이용해 받은내용을 이용할수 있게 된다.

emit은 괄호안에 전달해줄 메세지의 이름을 설정해주고, 뒤에 객체를 이용해 전달해줄 내용을 입력할 수 있다.

ex ) 클라이언트에서 emit으로 메세지를 서버에 전송해주면 서버는 연결된 모든 클라이언트에게 on으로 메세지를 전달해준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div>hello world</div>
    <div id="sq"></div>
    <input id="msg" />
    <button id="btn">버튼</button>
    <script src="/socket.io/socket.io.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

매우간략하게 만든 html이다.

const socket = io();
const btn = document.getElementById('btn');
socket.on('connect', () => {
  console.log('환영합니다.');
});
btn.addEventListener('click', () => {
  const msg = document.getElementById('msg');
  const message = msg.value;
  socket.emit('newMsg', {
    user: '1번',
    msg: message
  });
  msg.value = '';
  console.log('전송되었습니다.');
});
socket.on('serverMsg', msg => {
  console.log(msg);
  const sq = document.getElementById('sq');
  const message = document.createElement('p');
  const chat = document.createElement('div');
  const user = document.createElement('h6');
  user.innerHTML = msg.user;
  message.innerHTML = msg.msg;
  chat.appendChild(user);
  chat.appendChild(message);
  sq.prepend(chat);
});

클라이언트에서는 html파일을 전달받는데 스크립트가 생각보다 길어져서 따로 빼두었다. 기본적으로 socket.io를 사용하기전에 <script src="/socket.io/socket.io.js"></script> 를 실행해줘야한다. 이건 socket.io모듈에 담겨있는 내용을 사용하겠다. 정도로 이해했다.

다음으로 const socket = io(); 로 실행을 해주고,

socket이라는 이름으로 전달을 해주게 되는 것이다. 위에 환영합니다 라는 console.log는 브라우저에서 확인을 할 수가 있다. 이후에 미리 만들어둔 버튼을 클릭하면 input안에 담겨있는 내용이 emit을 통해 같은 이름을 가진 on으로 전송된다. 전송 받은 내용을 다시 서버는 모든 클라이언트의 메세지로 뿌려주고, 사용자는 그걸 받아서 화면에 출력하게 해준다.

목표#

socket.io 공부하기#

socket.io 공부하기#

목표

socket.io 공부하기

socket.io 공부하기