npm i socket.io
server.js
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
.
.
.
app.listen(process.env.PORT, function () {
console.log('listening on port 8080');
});
// app.listen 코드 아래로 변경
=>
http.listen(process.env.PORT, function () {
console.log('listening on port 8080');
});
http.listen에서 http는 app.listen이랑 똑같은것 원래 생node.js서버를 띄울때 http.listen을 쓰는데, express 라이브러리때문에 app.listen을 써왔던것임
여기까지 하면 서버쪽에서 소켓io를 사용할 준비는 끝났다.
이제 유저가 보는 html파일에도 socket.io를 세팅하러가자.
우선,나는 ejs를 사용하고있기에, view>socket.ejs 파일을 하나 만들어준후, 스크립트 태그에 socket.io cdn을 복사 붙여넣기해줬다.
<주의!> 서버에 설치한 socekt.io의 버전과 똑같은 버전의 cdn코드를 가져와야함
<!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"
/>
<title>To Do App!~</title>
</head>
<body>
<%- include('nav.html') %>
<div class="container">채팅방</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.js" integrity="sha512-rwu37NnL8piEGiFhe2c5j4GahN+gFsIn9k/0hkRY44iz0pc81tBNaUN56qF8X4fy+5pgAAgYi2C9FXdetne5sQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/public/socket.js"></script>
</body>
</html>
그리고 페이지 랜더링을위해 server.js에서 라우터를 하나 연결해줬다.
그리고 라우터 연결코드 바로 밑에 io.on코드를 작성해줬다.
io.on('connection'): 누가 웹 소켓접속하면 내부코드 실행하라는 뜻
server.js
app.get('/socket', function (req, res) {
res.render('socket.ejs');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
socket.js
function init() {
var socket = io();
}
init();
여기까지 작성해주고나면 /socket 경로로 접속시 콘솔창에 a userconnected가 출력된다.
그럼이제, 유저가 서버에게 메세지를 보내보자
<div class="container">채팅방</div>
<button id="send">서버에 메세지 보내기</button>
function init() {
var socket = io();
$('#send').click(function(e) {
// socket.emit(작명,메시지)
socket.emit('user-send', '안녕하세요');
})
}
init();
이제 서버쪽에서 유저가 저렇게 데이터를 보내면 이렇게해달라는 코드를 작성해줘야한다.
server.js
io.on('connection', (socket) => {
// 누가 'user-send'이름으로 메세지 보내면 내부 코드실행해주세요..
socket.on('user-send', function (data) {
console.log(data);
});
});
여기까지하면, 웹페이지에서 '서버에 메세지 보내기' 버튼을 클릭하면, 안녕하세요 라는 문구가 서버 콘솔에 찍힌다.