socket.io

정중식·2023년 2월 9일
0

socket.io

목록 보기
1/2

socket 세팅

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);
  });
});

여기까지하면, 웹페이지에서 '서버에 메세지 보내기' 버튼을 클릭하면, 안녕하세요 라는 문구가 서버 콘솔에 찍힌다.

profile
내 가치를 찾아서

0개의 댓글