티스토리 뷰

Server/Node.js

[Node.js] 채팅 - 5. WebSocket으로 실시간 업데이트

공부하는 승승 2023. 7. 27. 02:03

SSE와 WebSocket의 차이점

  • SSE: 서버 -> 사용자 - 일방적 통신
  • WebSocket: 서버 <-> 사용자 - 양방향 통신

 

 

1. socket.io 설치

npm install socket.io

 

2. socket.io 설정

<server.js>

const http = require('http').createServer(app);
const { Server } = require('socket.io');
const io = new Server(http);

 app.listen -> http.listen으로 변경

 // app.listen -> http.listen으로 변경
http.listen(process.env.PORT, function () {
    // listen(서버 띄울 포트번호, 띄운 후 실행할 코드)
});

 

여기까지 하면 WebSocket 오픈 가능 하지만, 사용자가 보는 html파일에도 socket.io 설정을 해야함

 

3.socket io cdn 설정

socket io cdn 검색 > https://cdnjs.com/libraries/socket.io

스크립트 복사해서 html파일에 붙여넣기

❗ 서버에 설치한 socket 버전과 동일한 것으로 복사해야함 ( package.json에서 버전 확인 가능)

 

<socket.ejs>

<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js"></script>
    <h4 class="ml-2 my-3 text-center">채팅방</h4>
    <script>
        var socket = io();
    </script>
</body>

 

4. 버튼 클릭 시 메시지 보내기

서버 -> 웹소켓 실시간 메시지 전송

socket.emit(작명, 메시지)

 

<socket.ejs>

<div class="input-group mt-3">
	<div class="content"></div>
    <input class="form-control" id="input" />
    <button class="btn btn-outline-secondary" id="send">서버에 메시지 보내기</button>
</div>
 <script>
    var socket = io();
    $('#send').click(function () {
        socket.emit('user-send', $('#input').val()); // 서버 -> 웹소켓 실시간 메시지 보내는법: socket.emit(작명, 메시지)
    });
    socket.on('broadcast', function (data) {
        console.log(data);
        $('.content').append('<span>' + data + '</span>');
    });
</script>

 

5. 서버에서 해당 메시지 수신하기

socket.on(작명, 콜백함수)

<server.js>

// 누군가 웹소켓에 접속하면 여기 내부 코드를 실행
io.on('connection', function (socket) {
    console.log('사용자가 접속함');
    socket.on('user-send', function (data) { // <--
        console.log(data);
    });
});

 

6. 서버에서 사용자에게 메시지 전송하기

io.emit() // 모든 사용자에게 메시지를 보내줌 == brodcast

<server.js>

io.on('connection', function (socket) {
    console.log('사용자가 접속함');
    socket.on('user-send', function (data) {
        // 서버 -> 사용자 메시지 전송 io.emit() - 모든 사용자에게 메시지를 보내줌 == broadcast
        io.emit('broadcast', data); // <--
        console.log(data);
    });
});

 

+ 단체 채팅말고 1:1 개인 채팅 만들기

 // 개인 채팅 - socket.id가 일치하는 사람한테만 메시지를 보내줌
io.to(socket.id).emit('broadcast', data);

 

7. 채팅방 개설 및 입장

<socket.ejs>

 <button id="room1">채팅방1 입장</button>
 <script>
    var socket = io();
    $('#room1').click(function () {
        socket.emit('join-room', '채팅방입장시켜줘');
    });
 </script>

 

<server.js>

socket.join(방이름)
socket.on('join-room', function (data) {
    socket.join('room1');
});
// 누군가 웹소켓에 접속하면 여기 내부 코드를 실행
io.on('connection', function (socket) {
    console.log('사용자가 접속함');

    // 채팅방 개설 및 입장 socket.join(방이름)
    socket.on('join-room', function (data) { // <--
        socket.join('room1');
    });

    // 서버가 수신하려면 socket.on(작명, 콜백함수)
    socket.on('user-send', function (data) {
        io.emit('broadcast', data);
    });
});

 

8. 입장한 채팅방에서 메시지 보내기

 

<socket.ejs>

<button id="room1-send">채팅방1에서 메시지 보내기</button>
<script>
    var socket = io();
    $('#room1-send').click(function () {
        socket.emit('room1-send', '채팅방1에 입장함');
    });
</script>

 

<server.js>

socket.on('room1-send', function (data) {
    socket.to('room1').emit('broadcast', data);
});
io.on('connection', function (socket) {
    console.log('사용자가 접속함');

    // 채팅방 개설 및 입장 socket.join(방이름)
    socket.on('join-room', function (data) {
        socket.join('room1');
    });

    // 입장한 채팅방에서 메시지 전송
    socket.on('room1-send', function (data) {
        socket.to('room1').emit('broadcast', data);
    });

    // 서버가 수신하려면 socket.on(작명, 콜백함수)
    socket.on('user-send', function (data) {
        io.emit('broadcast', data);

    });
});

'Server > Node.js' 카테고리의 다른 글

[Node.js] Node + Express 서버와 React 연동  (0) 2023.07.28
[Node.js] 채팅 - 4. DB 변동사항 실시간 업데이트  (0) 2023.07.27
[Node.js] 채팅 - 3. 서버와 실시간 소통; SSE  (0) 2023.07.26
[Node.js] 채팅 - 2. 메세지 발행  (0) 2023.07.26
[Node.js] 채팅 - 1. 채팅방  (0) 2023.07.25
댓글