[js/express] socket.io 설치

 

드디어.. 댓글 + 채팅 페이지를 만들었습니다! 와아! 보완 & 추가해야할 기능들이 남아있어서 미완성이지만 확장할 토대를 만들었다는 점에서 만족스럽습니다. 카카오 채팅처럼 '나' 일 경우 방향을 다르게 해서 출력하고 싶고, 댓글은 페이징하고 싶습니다. 이 부분들은 이 지식으로 1시간만에 하기에는 좀 걸릴 것 같고 또 더 공부해서 더 좋은 방법으로 하고 싶어서 잠시 패스했습니다. 그런데 페이징은 조만간 하지 않을까 싶습니다. 

 

채팅 + 댓글 중에서 댓글은 강의 내용 일부에 가까워서 아마 채팅 기능만 다룰 것같습니다.

 

배포까지 마치고 블로그에서 다루려고 했는데 시간이 늦어지기도 하고 해서 배포는 다음 게시글에 언급하겠습니다. (지식 부족 + 보안 문제 이유로 다루지 않은 기능들이나 차차 업데이트할 기능들도 다음 게시글에 함께 올릴 예정입니다.)

 

이 기능을 적용하려면 우선 2가지 준비가 필요한데

 

1. express 설치.

 

2. socket 설치.

 

블로그에서 express 설치하는 방법을 다뤘었으니 참고 바랍니다.

 

아래는 socket.io 설치 방법입니다.

---

npm install socket.io 설치한 후,

 

# JS 그리고 html

 

1. 불러오기 

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

참고로 붙여 넣기 할 때 const app = express() 보다 밑에와야 합니다.

 

2. app.listen()을 http.listen()으로 바꿉니다.

http.listen(8080, function () {
  console.log('listening on 8080')
});

 

3. 구글에 socket.io CDN 이라고 검색해서 socket 연결할 html 파일에 CDN을 복붙 합니다. ( * package.json을 보면 npm으로 설치한 socket.io 버전이 나와있는데 그 버전과 동일해야 합니다.)

 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js" integrity="sha512-nYuHvSAhY5lFZ4ixSViOwsEKFvlxHMU2NHts1ILuJgOS6ptUmAGt/0i5czIgMOahKZ6JN84YFDA+mCdky7dD8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

위 코드는 제가 복붙 한 socket.io CDN입니다.

 

4. html 파일에 socket.io를 적용합니다.(준비)

<script>
  var socket = io();
</script>

 

5. 마지막으로 server.js 파일에서 socket.io로 연결하고자 하는 페이지와 서버가 연결되도록 설정합니다.

 

io.on('connection', function(){
  console.log('연결 완료');
});