[JS] 웹 소켓으로 채팅서버 만들기

SJ·2022년 6월 21일
0

라이브 방송에 대한 실시간 채팅 서비스를 만들기 위해 공부하하고 실제 서비스를 한 내용을 바탕으로 간단히 정리해본다.

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로 만들어 보여주도록 하였다. 추후에 아예 채팅 프로젝트를 다시 만들어 볼 예정이다.

웹 소켓 자체에 대한 내용은 다른 글에 정리할 것이다.

profile
효율적이고 효과적이게

0개의 댓글