[프로젝트]채팅앱기본 React에서 Socket.io를 사용해보자(node.js)

채팅 앱 같이 실시간 연결 되어 소통이 일어 날 수 있게 해야한다

 

친구 영빈이가 가르쳐 줬다

 

복습 해보자 

 

---

react 프레임워크에서 서버는 node.js 언어를 사용했다

 

우선 사용 할 모듈을 설치해 주자

 

npm install socket.io
npm install socket.io-client

 

서버 사용 하기 위해

npm install body-parser
npm install cors
npm install express

express, cors, bodyParser 모듈도 받아줬다

 

준비가 됐다

 

'클라이언트페이지1' 과 '클라이언트페이지2', 그리고 '서버페이지'

 

세개의 .js 파일을 만들 거다, 클라이언트는 라우터로 나눠주었다

 

"socket.emit 데이터 줄때"

"socket.on 데이터 받을때"

"socket.join 룸을 만든다"

 

 

 

천천히 보자 

 

클라이언트1

  userid: "been",  //state값으로 userid를 been으로 가짐
  
  
  
  componentWillMount() {  //렌더 되기전
    socket.emit("roomjoin", this.state.userid);  //socket.emit은 데이터를 보낼 때, 
                                                 //서버측의 roomjoin 이벤트명을 찾아 보내진다
                                                 //클라이언트1의 userid를 보냄
  }

 

이제 서버를 보자

io.on("connection", function (socket) { //소켓 연결

  socket.on("roomjoin", (userid) => {   //"roomjoin"이벤트 //socket.on: 데이터받기
    socket.join(userid);                // 받아온"been"이라는 이름으로 새로운 룸에 접속 했다
  });

});

 

클라이언트 2

  userid: "hwi",

  componentWillMount() {
    socket.emit("roomjoin", this.state.userid);  //roomjoin으로 userid를 보내 새로운 룸을 만든다
  }

 

두 개의 소켓이 만들어 지는 과정이고  예제에서 찐으로 보자

 

-클라이언트1에서 버튼 클릭하면

-상대에게 알람이 가게 할거다 

 

 

<클라이언트1>

import React from "react";
import io from "socket.io-client";   //모듈 가져오기

const socket = io("http://localhost:3001/");  //3001번 포트 사용(서버)

export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userid: "been",  // userid"been"
    };
  }
  componentWillMount() {
    socket.emit("roomjoin", this.state.userid);  // been이라는 방 만들기
  }
  onclick = (e) => {
    const str = "hwi";         //버튼을 클릭하면
    socket.emit("alert", str); //서버의 소켓 alert이벤트에 "hwi"를 보낸다 
  };
  render() {
    return (
      <div>
        <button onClick={this.onclick}>알림창 보내기</button>  //버튼 클릭
      </div>
    );
  }
}

 

<서버>

const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const port = 3001;                             //3001번 포트 사용
const route = require("./routes/index");

var http = require("http").createServer(app);  //모듈사용
const io = require("socket.io")(http);         //모듈 사용

app.use(bodyParser.json());

app.use(cors());
app.use("/", route);
//////////////////////////////////////////////////////////////

io.on("connection", function (socket) {
  console.log("소켓 접속 완료");

  socket.on("roomjoin", (userid) => {  //roomjoin 이벤트명으로 데이터받기 //socket.on
    console.log(userid);
    socket.join(userid);               //userid로 방 만들기
  });

  socket.on("alert", (touserid) => {  //alet 이벤트로 데이터 받기 
    io.to(touserid).emit("heejewake", touserid);  //touserid: 클라이언트1이 보낸데이터"hwi"
  });                                             //heejewake이벤트: hwi 에게 메시지 hwi를 보낸다
});                                              

http.listen(port, () => {
  console.log(`express is running on ${port}`);
});

 

클라이언트2

import React from "react";
import io from "socket.io-client";

const socket = io("http://localhost:3001/");

export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userid: "hwi",
    };
  }
  componentWillMount() {
    socket.emit("roomjoin", this.state.userid);
    socket.on("heejewake", (massage) => {  // 클라이언트1이 누른 버튼-> 서버-> heejewake이벤트
      alert(massage);                      // 에서 메시지 hwi를 받는다
    });
  }
  render() {
    return <div></div>;
  }
}

 

 

누르면 localhost:3000/2 (클라이언트2) 에게 alert이간다

 

성공!

 

 

 

 

 

 

 

참고: 영빈이