반응형
1. 개요
- socket.io 를 이용해서 실시간 채팅 기능을 구현
- 단체 채팅 및 1:1 채팅 기능 구현
2. 코드
(1) server.js
// 누가 웹소켓 접속하면 코드 실행
io.on('connection', function(socket){
console.log('유저 접속됨');
console.log(socket.id);
// room1-send 이벤트 발생 시 코드 실행
socket.on('room1-send', function(data){
// room1 채팅방 내 모든 사람들에게 메시지 전송
io.to('room1').emit('broadcast', data);
});
// joinroom 이벤트 발생 시 코드 실행
socket.on('joinroom', function(data){
// 채팅방 만들어서 유저 접속시킴
socket.join('room1');
});
// ejs파일에서 만들어준 이벤트이름을 집어넣어줌
// 브라우저에서 메시지 보내면 코드 실행
socket.on('user-send', function(data){
console.log(data);
// 소켓으로 데이터 전송하는 코드('이벤트명', '전달할내용')
// io.emit은 user-send이벤트에 접속중인 모든 유저에게 메시지를 보냄
// 그래서 전달받은 데이터를 emit하면 소켓에 접속된 모두에게 채팅 내용 전송 가능
// 이게 바로 단체 채팅방 기능
io.emit('broadcast', data);
// socket.id에게만 메시지 전송할수도 있음
// 이건 1:1 채팅방 기능
io.to(socket.id).emit('broadcast', data);
});
})
- 소켓에 접속한 모든 유저에게 메시지를 전달(echo)해주는 코드와
- 특정 이벤트에 접속한 유저에게만 메시지를 전달해주는 코드
(2) socket.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/public/main.css" />
<title>Hello, world!</title>
</head>
<body>
<%- include('nav.html') %>
<script
src="https://code.jquery.com/jquery-3.6.3.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
<!-- socket.io cdn셋팅
socket.io의 라이브러리 버전과 동일해야 함 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
<div>채팅방</div>
<input id="input1">
<div id="content"></div>
<button id="send">서버에 메시지 보내기</button>
<button id="room1">room1입장</button>
<button id="room1-send">room1에서 msg전송</button>
<script>
var socket = io();
// room1 사람들에게만 메시지 전송
$('#room1-send').click(function(){
socket.emit('room1-send', $('#input1').val());
})
// socket연결되어 있을땐 GET, POST 별도로 요청 안해도 됨
// 걍 바로 emit으로 서버에 요청할 수 있음
$('#room1').click(function(){
socket.emit('joinroom', '채팅방입장시켜줘');
})
$('#send').click(function(){
// 서버에 소켓으로 실시간 데이터 전송하는 코드 ('이벤트명', '전달할내용')
socket.emit('user-send',$('#input1').val());
});
// 서버로부터 데이터 전송받는 코드
socket.on('broadcast', function(data){
console.log(data);
$('#content').append('<div>'+data+'</div>')
});
</script>
</body>
</html>- room1에 입장시키는 코드와
- 단순히 소켓으로 통신중인 서버에 데이터를 전송하는 코드
반응형
'코딩 > NodeJS' 카테고리의 다른 글
| 메모리 효율적인 자바스크립트 기반 Fulltext 검색엔진 MiniSearch 소개 (0) | 2024.01.20 |
|---|---|
| nodejs에서 웹소켓 기능 구현하기 (0) | 2023.02.09 |
| nodejs로 실시간 채팅 기능 만들기 (0) | 2023.02.08 |
| nodejs로 채팅방 기능 만들기 (0) | 2023.02.07 |
| 구글 클라우드로 nodejs 프로젝트 배포하기 (0) | 2023.02.06 |
