socket.io로 라이브 채팅 로직 구현하기
https://socket.io <= 공식문서
Socket.IO
Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect.
socket.io
필요한 세팅
- node.js 설치
Server API
1. 필요한 패키지 설치
npm init 후 express, socket.io 설치합니다. ( 글 올릴 당시 package version => express : 4.18.2 , socket.io : 4.5.4 )
npm i express socket.io
package.json에 start 명령어를 설정합니다.
"scripts": {
"start": "nodemon main.js" // or node main.js
},nodemon이 없다면 node 명령어로 설정하시면 됩니다.
그리고 import ~ from 을 사용하기 위해 package.json에 아래의 내용을 추가합니다.
{ "type": "module" }그리고 또 "main" : "index.js" 부분이 있는데, 이 부분은 main.js로 바꿔 주겠습니다.
package.json의 key name에 마우스를 올려두면 간단한 설명이 나오니 한 번씩 보는 것도 추천드립니다.
2. Constructor
main.js를 생성하여 아래의 내용을 추가합니다. 파일명은
import { createServer } from 'http';
import { Server } from 'socket.io';
import express from 'express';
const app = express();
const server = createServer(app);
const io = new Server(server, {
cors: {
origin: ['http://localhost:4000', 'http://10.58.52.96:4000'],
credentials: true,
},
});
- cors 옵션은 여기서 확인할 수 있습니다.
origin에 client ip주소 및 port를 맞춰서 입력해주면 됩니다.
3. Connect
io.on('connect', socket => {
socket.on('client', data => {
console.log(data);
});
socket.emit('server', '서버입니다');
});
io.listen(3001);이렇게 하면 Server에서 데이터를 받고 전달하는 간단한 동작을 구현 하였습니다.
npm start 하시고 일단 Client API 부분으로 넘어가서 Connect 부분까지 실습합니다.
4. 라이브 채팅을 위한 마지막 세팅
라이브 채팅을 구현하기 위해서는 Client에서 데이터를 Server로 보내면, Server에서 다시 다른 Client에 보내주는 로직이 필요합니다.
이를 위해 클라이언트끼리 또 하나의 약속된 키가 필요합니다.
io.on 안의 콜백 함수의 블록문에 아래 내용을 최하단에 추가합니다.
socket.on('join', key => {
socket.join(key);
socket.to(key).emit('welcome', `welcome ${key}를 통해 연결 하였습니다.`);
});쉽게 말하자면, key를 받아서 서버에서는 join이라는 메서드로 데이터를 전달받을 수 있는 통로를 만들어 주는 겁니다.
그다음에 to 메서드로 해당 통로를 통해 emit( 방출한다 )라고 일단 이해하면 도움이 될 것입니다.
( 꼭 공식 문서 보세요. 이해를 돋는 문장일 뿐입니다.)
마지막으로 아래의 내용을 더 추가해주세요. chat을 받아서 다른 Client로 넘겨주는 로직입니다.
socket.on('chat', (chat, key) => {
socket.to(key).emit('chat', chat);
});
그다음으로 Client 4. 라이브 채팅을 위한 마지막 세팅으로 넘어가겠습니다.
Client API
1. 필요한 패키지 설치
- npm init 후 socket.io-client 설치한다. ( 글 올릴 당시 package version => socket.io-client : 4.5.4 )
npm i socket.io-client
2. html을 port로 열기 위해 추가 세팅
만약 react, vue를 사용하여 localhost, ip주소로 프로젝트를 실행할 수 있으면 건너뛰면 됩니다.
실습을 위한 준비를 하지 않았으면 한번 실습해 보는 것을 추천합니다.
npm i -D webpack webpack-cli webpack-dev-server
다음으로 프로젝트 최상위 디렉토리에 webpack.config.js 파일을 만들고 아래 내용을 복사 붙여놓기 합니다.
const path = require('path');
module.exports = {
mode: 'development',
entry: {
app: path.join(__dirname, '/'),
},
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist',
},
devServer: {
static: {
directory: path.join(__dirname, '/'),
},
compress: true,
port: 4000,
},
};
그 후 index.html, main.js 파일을 만듭니다.
여기서 package.json에서 "main": "index.js" => "main": "main.js" 로 바꿔주지 않으면 컴파일 에러가 납니다.
그리고 index.html의 script 연결은 아래와 같이합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>websocket</title>
</head>
<body>
<script src="./dist/app.js"></script>
</body>
</html>
client 디렉토리 구조입니다.
📕 index.html
📕 main.js
📕 node_modules
📕 package-lock.json
📕 package.json
📕webpack.config.js
마지막으로 package.json 파일에 들어가서 scripts 부분에 'start' 명령어를 입력합니다.
"scripts": {
"start": "webpack-dev-server --hot"
},
여기까지 잘 따라오셨으면 해당 디렉토리에서 터미널에 npm start를 입력하면,
html, js 각 각 파일 하나로 개발 서버가 작동하는 것을 볼 수 있을 것입니다. ( 수정하면 바로 반영되는 !!)
2. Constructor
import { io } from 'socket.io-client';
const socket = io('ws://localhost:3001', {
withCredentials: true,
});
3. Connect
socket.on('connect', () => {
console.log('connect');
});
socket.on('server', data => {
console.log(data);
});
socket.emit('client', '클라이언트 입니다.');여기까지 입력하셨으면, npm start 후 개발 서버로 html 파일을 열어 봅니다.
Server 쪽 터미널에서 그리고, Client 쪽 브라우저의 console을 확인해보시면 간단하게 메시지를 주고받은 것을 확인할 수 있습니다.
진짜 간단하게 소개하자면,
socket.on으로는 약속된 문자열을 통해 데이터를 받아오는 것이고,
socket.emit으로는 약속된 문자열로 뒤에 있는 데이터를 전달하는 것입니다.
자세한 건 꼭 공식문서 읽어보시는 걸 추천드립니다.
이제 다시 Server 4. 라이브 채팅을 위한 마지막 세팅으로 넘어가시면 됩니다.
4. 라이브 채팅을 위한 마지막 세팅
클라이언트에서는 약속된 키값을 서버에 요청을 해야 합니다.
그리고 추가로 연결이 잘 되었는지 'welcome'이라는 문자열로 확인해 보겠습니다.
아래에 이어서 해당 코드를 추가하시면 됩니다.
socket.on('welcome', data => {
console.log(data);
});
socket.emit('join', 1);이제는 개발 서버로 브라우저 2개를 열고 콘솔로그를 확인하면, 두 번째로 접속한 브라우저에서 'welcome 1을 통해 연결하였습니다.'
라는 메시지를 받을 수 있습니다.
여기까지 잘 동작하면 라이브 채팅을 위한 최소한의 로직이 구현된 것입니다. 🎉🎉🎉
5. 라이브 채팅
- html script 위에 아래의 태그를 추가합니다.
<input />
<button>전송</button>
<div class="chat"></div>- main.js에는 아래의 코드를 붙여 놓습니다.
const input = document.querySelector('input');
const button = document.querySelector('button');
const chatDiv = document.querySelector('.chat');
socket.on('chat', data => {
const chat = document.createElement('div');
chat.innerText = data;
chatDiv.appendChild(chat);
});
button.addEventListener('click', () => {
console.log(input.value);
socket.emit('chat', input.value, 1);
input.value = ''
});
6. 응용
- 텍스트를 실시간으로 주고받을 수도 있습니다.
Server 추가 코드
socket.on('liveChat', (liveChat, key) => {
socket.to(key).emit('liveChat', liveChat);
});
Client 추가 코드
html script 위에 아래처럼 마크업을 합니다.
<input />
<button>전송</button>
<div class="live"></div>
<hr />
<div class="chat"></div>
main.js 하단에 아래의 코드만 추가합니다.
const liveDiv = document.querySelector('.live');
socket.on('liveChat', data => {
liveDiv.innerText = data;
});
input.addEventListener('keyup', () => {
socket.emit('liveChat', input.value, 1);
});