라이브 방송에 대한 실시간 채팅 서비스를 만들기 위해 공부하하고 실제 서비스를 한 내용을 바탕으로 간단히 정리해본다.
npm install socket.io 로 소켓을 먼저 설치한 이후에 작업
*** 코드는 샘플 코드로 대체
- index.html
<!doctype html>
<html lang="en">
<head>
///...skip
</head>
<body>
<!-- 채팅 보여주는 곳 -->
<div class='messages'></div>
<!-- 채팅 입력 -->
<input class='inputMessage' placeholder="메세지를 입력하세요.">
<script src="/socket.io/socket.io.js></script>
<script src="/main.js">
<!-- 그 밖의 필요한 것들 -->
</body>
</html>
먼저 웹소켓을 연결할 html과 서버를 열 app.js 파일을 만든다.
- app.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const {Server} = require('socket.io');
const io = new Server(server);
//서버 관련 세팅...
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
//소켓 연결
io.on('connection', (socket) => {
console.log('connected');
});
server.listen(3000, () => {
console.log('listening on port 3000');
}
웹소켓은 간단하게 이런 식으로 연결하면 되지만 여러 채팅관련 이벤트들을 정리해서 달아 줘야하므로 소켓 관련 function을 socket.js 파일로 옮겨 작업하고 app.js를 수정하였다.
- app.js
const webSocket = require('./socket.js');
///...
webSocket(server, app);- socket.js
const SocketIO = require('socket.io');
module.exports = (server, app) => {
const io = SocketIO(server, { path : '/socket.io'});
app.set('io', io);
//네임 스페이스 설정
const chat = io.of('/chat');
chat.on('connection', async (socket) => {
console.log('chat namespace socket connected');
//socket room을 만들기 위한 설정
let tmp = 'test';
//test room에 join
socket.join(tmp);
socket.on('join', async (data) => {
//data로 db등의 로직처리 return _data
//test 방으로 event, data 전송
socket.to(tmp).emit('join', _data);
socket.emit('join', _data);
});
socket.on('chat', async (data) => {
//data로 db등의 로직처리 return _data
//test 방으로 event, data 전송
socket.to(tmp).emit('chat', _data);
socket.emit('chat', _data);
});
//exit 등 필요하거나 원하는 event 함수들 추가 ...
}
}
웹소켓을 연결하고 이벤트를 주고 받는 main.js 를 만들자
- main.js
$(function() {
//채팅 data로 화면을 바꿔주기 위한 사전 세팅
const $message = $('.messages')[0];
const $inputMessage = $('.inputMessage');
//join 여부
let isJoin = 'N';
//roomid
let roomid = 'tmp';
//채팅아이디
let chatid = 'user';
//소켓 연결 신청 url 은 각자 사용하는 것으로
const socket = io.connect(url + '/chat', {
path : '/socket.io',
},
//query로 방 룸 id 넘겨주면 해당 room 으로 바로 들어가게 세팅가능
//query: { roomid : roomid }
});
socket.emit('join', chatid);
socket.on('join', function(data) {
//채팅 들어왔다는 알림
const div = document.createElement('div');
div.textContext = data + '님이 참여하였습니다.' //user 님이 참여하였습니다.
$messages.appendChild(div);
$messages.scrollTop = $messages.scrollHeight;
isJoin = 'Y';
}
socket.on('chat', function(data) {
//채팅 메세지 보여주기
const div = document.createElement('div');
div.textContext = data //$inputMessage.val()
$messages.appendChild(div);
$messages.scrollTop = $messages.scrollHeight;
}
//그밖의 필수 이벤트 및 원하는 이벤트 들 ...
//엔터눌러 메세지 보내기
$window.keydown(event => {
if(event.which === 13) {
var message = $inputMessage.val();
socket.emit('chat', message);
$inputMessage.val('');
}
}
}이런식으로 간단하게 데이터를 웹소켓으로 주고 받을 수 있다.
실제 라이브 서버를 구성할땐 chat 네임스페이스 안에 각 라이브의 pk 값으로 방을 만들고 방들을 db로 관리하였다.
chat을 들어오면 최근 채팅을 저장한 db를 조회하여 데이터를 html로 만들어 뿌려주었고
chat을 칠때마다 db에 업데이트하였다.
유저가 들어오고 나가고 모두 확인 할 수 있게 이벤트를 받고 html로 만들어 보여주도록 하였다. 추후에 아예 채팅 프로젝트를 다시 만들어 볼 예정이다.
웹 소켓 자체에 대한 내용은 다른 글에 정리할 것이다.
효율적이고 효과적이게