#socket.io 따라하기 reactjs socket.io-client 구현 하기 ( cors 적용)
socket.io chat 예제를 nodejs 로 구현한 것은 이전 블러그에서 언급하였다.
그래서, nodejs 로 서버로 만들고 reactjs 로 클라이언트를 구현하는 예제를 하나 실행해 보았다.
동작하지 않는다.
그냥 locahost 에 3000 번 포트와 30005번 포트 이런식으로 만들어서 실행햇는데도
cors 이슈를 만나게 되었다.
cors 이슈에 대해서는 구글에 cors 검색하면 무지하게 많이 나온다.
간단히 말하면 서버1의 내용을 서버2에서 호출하면 접속할수 없다고 하면서 발생하는 문제이다.
이번 예제로 동일한 이슈에 대한 내용이다.
아래 블러그에 내용을 그대로 실행 보았다.
https://www.valentinog.com/blog/socket-react/
아쉽게도 소스는 github 가 없었다.
그래서 해당 블러그에 있는 내용을 그대로 가져와서 실행해 보았다.
서버는 아래와 같이 만들었다.
mkdir socket-io-server
cd socket-io-server
npm init -y
npm i express socket.io
1. app.js 파일을 만들고 아래의 코드를 넣는다.
내용은 웹서버를 만들고 socket.io 를 만들어서 접속하면 시간정보를 내려주는 것이다.
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);
let interval;
io.on("connection", (socket) => {
console.log("New client connected");
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket), 1000);
socket.on("disconnect", () => {
console.log("Client disconnected");
clearInterval(interval);
});
});
const getApiAndEmit = socket => {
const response = new Date();
// Emitting a new message. Will be consumed by the client
socket.emit("FromAPI", response);
};
server.listen(port, () => console.log(`Listening on port ${port}`));2. routes 폴더를 만들고 index.js 파일을 만든다.
내용은 route 를 설정하기 위한 내용이다.
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.send({ response: "I am alive" }).status(200);
});
module.exports = router이렇게 하면 서버 준비는 끝난다.
소스 구조는
실행 해 보겠다.
node app.js
실행 화면이다.
정상적으로 켜지는 것을 확인할수 있다.
yarn create react-app socket-io-client cd socket-io-client yarn add socket.io-client rm src/app.css src/index.css src/log.svg src/reportWebVitals.js src/setupTests.js
src 폴더에 App.js 와 index.js 를 제외하고 모두 삭제한다.
index.js 소스는
import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));
App.js 소스는
import React, { usetState, useEffect } from "react"; import socketIOClient from "socket.io-client";const ENDPOINT = "http://127.0.0.1:4001";function App() {const [response, setResponse] = useState("");useEffect(() => {const socket = socketIOClient(ENDPOINT);socket.on("FromAPI", data => {setResponse(data);});}, []);return (<p>It's <time dateTime={response}>{response}</time></p>);}export default App;
index.js 는 app.js 를 호출하기 위한 내용이고
App.js 는 socket.io-client 를 이용해서
endpoint 인 http://127.0.01:4001 에 socket.io server 를 접속하는 내용이다.
실행 해 보겠다.
yarn start실행 결과는
아무동작이 이루어 지지 않는다.
디버깅 창을 열어 보겠다. ( F12 번 누르는 것은 알고 있을것이라 생각한다.)
Access to XMLHttpRequest at 'http://127.0.0.1:4001/socket.io/?EIO=4&transport=polling&t=NUHQhDW' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
cors 이슈가 발생한다.
내용은 http://locahost:3000 에서 http://127.0.0.1:4001/socket.io/?EIO 를 호출할수 없다는 내용이다.
해결 방법은 cors 를 설정하면 된다.
검색하면 socket.io 관련 cors 설정을 어떻게 하라고 잘 나와 있지 않다.
공식 사이트에 가서 찾았다.
https://socket.io/docs/v3/handling-cors/
우선 socket-io-server 폴더로 가서 아래의 내요을 설치한다.
npm i cors아래와 같이 socket-io-server 의 app.js 를 수정하였다.
수정한 부분은 socket.io 를 생성할때 cors 설정을 추가하였다.
공식 사이트에 있는 내용을 그대로 가져와서 적용한 것이다.
결과 화면 정상적으로 동작하는 것을 확인 할수 있다.
해당 소스는 github 를 확인 하기 바란다.
https://github.com/wonsolution/socket-io-server
https://github.com/wonsolution/socket-io-client
댓글
댓글 쓰기