Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정

회사 업무를 하면서 실시간 채팅 기능을 구현할 기회가 생겼다.

 

이사님이 솔루션 사서 개발하라고 하셨지만 예전부터 소켓 통신 관련하여 공부도 해보고 싶었던 참이고, 

 

회삿돈이 아깝기도 해서 구글링의 도움을 받아 기능을 만들고자 한다!

 

 

준비

• node.js 설치
• IDE 설치(VSCode)
• npm 설치

 

순서

1. 프로젝트 폴더 생성 후 npm init 명령어를 이용하여 초기 설정

 

2. npm install 명령어를 이용하여 express, socket.io 라이브러리 설치

npm install express --save
npm install socket.io --save
npm install cors --save

 

3. app.js 파일 생성 후 코드 작성

const express = require('express')
const http = require('http')
const cors = require('cors')
const corsOption = {
    origin: "http://localhost:6060",
    methods:["GET","POST"]
 }

const app = express()
app.use(cors(corsOption))

const server = http.Server(app)
const socketio = require('socket.io')
const io = socketio(server)
const PORT = 9090

server.listen(PORT, () => {
    console.log('Listening on port ${port}')
})

app.get('/', function(req, res, next) {
    res.json('hi')
})

io.on('connection', (socket) => {
    socket.on('newUser', (data) => {
        io.emit('enter', data)
    })
  
    socket.on('message', (data) => {
        io.emit('upload', data);
    })
  
    socket.on('leaveUser', (nick) => {
        io.emit('out', nick)
    })
  })

 

4. node.js 서버 실행

node app.js

 

문제 해결

 

1. CORS 오류 발생

띠용

분명 코드에서 cors 처리를 해줬음에도 불구하고 오류가 뜬다.

구글링을 해보니 Socket.io 3버전 이상부터는 cors 라이브러리가 아닌 명시적인 코드로 처리해야 한다고 한다.

 

=> 아래처럼 코드 수정

const corsOption = {
    origin: "http://localhost:6060",
    methods:["GET","POST"]
}
 
const socketio = require('socket.io')
const io = socketio(server, {
    cors: corsOption
})

 

Spring 연동

채팅을 구현할 jsp 파일에 아래 자바스크립트 코드를 추가한다.

<script src="http://localhost:9090/socket.io/socket.io.js"></script>

var socket = io("http://localhost:9090");