6. React와 Express, MongoDB 연동하기 - Socket.io

Socket.io

1. react-server

1-1) npm install socket.io

1-2) react-server/bin 삭제

1-3) react-server/app.js 수정

const createError = require('http-errors');

const express = require('express');

const path = require('path');

const cookieParser = require('cookie-parser');

const logger = require('morgan');

require('dotenv').config();

const webSocket = require('./socket');

const indexRouter = require('./routes/index');

const usersRouter = require('./routes/users');

const connect = require('./schemas');

const app = express();

connect();

app.set('views', path.join(__dirname, '../react-client/build'));

app.set('view engine', 'jade');

app.set('port', process.env.PORT || 8080);

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../react-client/build')));

app.use('/', indexRouter);

app.use('/users', usersRouter);

app.use(function(req, res, next) {

next(createError(404));

});

app.use(function(err, req, res, next) {

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

res.status(err.status || 500);

res.render('error');

});

const server = app.listen(app.get('port'), () => {

console.log(`${app.get('port')}번 포트에서 대기 중`);

});

webSocket(server);

1-4) react-server/package.json 수정

"scripts": {

"start": "babel-node app"

},

2. react-client

2-1) npm install socket.io-client

2-2) react-client/src/App.js 수정

import React, { Component } from 'react';

import './App.css';

import socketIOClient from 'socket.io-client';

class App extends Component {

constructor(props) {

super();

this.state = {

users: [],

name : '',

age : '',

};

}

componentDidMount() {

this.getUser();

const socket = socketIOClient('http://localhost:8080');

socket.on('news', data => {

console.log(data);

socket.emit('reply', 'Hello, Node.js');

});

}

getUser = () => {

fetch('/users')

.then(res => res.json())

.then(users => this.setState({ users }));

}

handleChange = (e) => {

this.setState({

[e.target.name]: e.target.value

});

}

handleClick = () => {

const { name, age } = this.state;

fetch('/users', {

method: 'POST',

body: JSON.stringify({

name,

age,

}),

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json'

},

})

.then(res => res.json())

.then(res => this.getUser());

document.getElementById('name').value = "";

document.getElementById('age').value = "";

}

handleupdate = (e) => {

e.preventDefault();

const { id } = e.target;

const name = prompt("바꿀 이름을 입력하세요.");

if(!name) {

return alert("이름을 입력해주세요.");

}

fetch(`/users/${id}`, {

method: 'PATCH',

body: JSON.stringify({

name,

}),

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json'

}

})

.then(res => this.getUser());

}

handledelete = (e) => {

e.preventDefault();

const { id } = e.target;

fetch(`/users/${id}`, {

method: 'DELETE',

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json'

},

})

.then(res => this.getUser());

}

render() {

return (

<div className="App">

<h1>Users</h1>

<p>

이름 : <input id="name" name="name" onChange={this.handleChange}></input><br/>

나이 : <input id="age" name="age" onChange={this.handleChange}></input><br />

<button onClick={this.handleClick}>등록</button>

</p>

{this.state.users.map(user =>

<div key={user._id}>

{user.name} {user.age}

<button id={user._id} onClick={this.handleupdate}>수정</button>

<button id={user._id} onClick={this.handledelete}>삭제</button>

</div>

)}

</div>

);

}

}

export default App;

3. 결과

- npm start => http://localhost:3000/

1) react-server

2) react-client