실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다.
socket.io 라이브러리를 설치해서 한번 사용해보자.
사용 방법
npm install socket.ionpm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다.
(const app = express() 보다 아래에 위치해야한다.)
그리고 app.listen 코드를 http.listen 으로 바꿔준다.
이전에는 express 를 이용해서 서버를 띄웠던 걸
http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다.
socket.ejs 라는 파일을 하나 새로 만든다.
https://cdnjs.com/libraries/socket.io
socket.io - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
node.js realtime framework server - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it f
cdnjs.com
그리고 구글에 socket.io cdn 을 검색하면 cdn 을 제공해주는 페이지가 있다.
나는 위에 있는 링크의 페이지에 들어가서 코드를 복사해왔다.
script 태그를 이용해서 복사한 코드를 첨부해주자.
(이 때 내가 설치한 socket.io 라이브러리랑 버전이 같아야한다)
socket.ejs 파일에 채팅 기능을 개발해보려고 한다.
<script> 태그로 socket.io 설치한 곳 아래에 아래와 같이 작성한다.
이제 웹소켓을 이용해 서버와 실시간 소통 채널을 개설하게 된것이다.
socket.emit()
server.js 에서는
1. /socket 경로로 접속했을 때 socket.ejs 가 렌더링되도록 하기.
2. 누군가 웹소켓에 접속했을 때에 연결되었다고 콘솔에 출력되도록 하기.
.
먼저 경로로 접속했을 때 socket.ejs 가 렌더링 되도록 했고
socket.emit() 이라는 코드를 통해서
웹소켓에 유저가 접속했을 때 user connected 라는 문구가 콘솔에 출력되도록 했다.
유저가 서버에게 메세지를 전송할 때에는 socket.emit() 사용하기
그리고 socket.ejs 파일에 이번에는 버튼을 하나 만들어서
버튼을 눌렀을 때에 user-message 라는 이름으로 "서버야 안녕?" 이라는 값을 전송하도록 해봤다.
socket.on()
server.js 에서는 socket에 user-message가 들어오면 이것을 콘솔에 출력하도록 코드를 추가했다.
메세지 수신은 socket.on()
아래는 그 결과이다.
서버 -> 유저 메세지 전송
server.js 에서 서버-> 유저로 메세지를 보내려면
io.emit() 을 사용한다.
user-message 를 받았을 경우에
서버에서 유저로 "유저야 안녕?" 이라는 문구를 전송하도록 했다.
메세지 수신은 언제나 socket.on() 으로 진행한다.
서버에서 전송받은 메세지를 유저측에서 콘솔에 출력하도록 했다.
단체 채팅방 만들기
단체 채팅방을 만들려면 아래와 같이 작성할 수 있을 것이다.
(server.js)
io.on('connection', function (socket) {
socket.on('user-message', function (data) {
io.emit('broadcast', data) //모든사람에게 데이터 전송
});
});user-message 이벤트가 일어나면 모든 참여자에게 io.emit() 으로 broadcast 를 해준다.
이렇게 ejs 파일을 작성해주면 서버가 io.emit() 으로 데이터를 보낼때마다 수신이 가능하다.
위 코드는 전송받은 데이터를 콘솔에 출력하고 content 라는 div에 data 를 렌더링 해주는 코드이다.
📌 참고
io.to(소켓아이디).emit()
처럼 작성하면 특정 소켓아이디를 가진 사람에게만 메세지를 보낼 수 있다.
하지만 단체 채팅방이 아닌, 특정 채팅방 참여자만 채팅을 볼 수 있게 하려면 어떻게 해야할까?
하위 채팅방 만들기
먼저 서버가 유저를 특정 채팅방에 접속하도록 넣어주면 되는데
socket.join('room1');
이런식으로 작성하면 room1 이라는 채팅방에 넣어줄 수 있다.
아래의 코드를 보자
유저가 room1 이라는 id 를 가진 버튼을 클릭하면
서버에서 joinRoom 이라는 데이터를 보낸다. room1 이라는 값을 가진다.
그리고 room1-send 라는 메세지 전송 버튼도 따로 만든다.
이걸 클릭하면 서버로 (room1에서의)채팅 데이터를 전송할 수 있을 것이다.
서버의 코드를 보자.
서버는 joinRoom 이라는 메세지를 수신하면 room1 이라는 방에 socket.join() 을 통해 넣어주고
room1-send 라는 이름의 요청을 받으면 room1 에 있는 유저들에게만 broadcast 를 해준다.
ref: 코딩애플
