Express - это библиотека на стороне сервера, а реакция - на стороне клиента.Поэтому для настройки приложения чата вы должны создать как экспресс-сервер, так и приложение реагирования.
Экспресс-сервер будет предоставлять приложение реагирования браузеру, а приложение реагирования получит данные чата из экспресса.server.
Для быстрого запуска
Внутри папки проекта создайте папку сервера, а внутри нее файл с именем index.js.Внутри серверной папки из терминала запустите:
npm init -y
, а затем:
npm i express socket.io
, который позаботится о зависимостях сервера.Теперь внутри index.js:
server / index.js:
const app = require("express")();
const server = require("http").Server(app);
const io = require("socket.io")(server);
server.listen(4000);
app.get("/", function(req, res) {
res.send("express-server");
});
io.on("connection", function(socket) {
socket.emit("news", { message: "Hello World" });
socket.on("my other event", function(data) {
console.log("response to my other event: ", data);
});
});
Это настраивает сервер на локальный хост: 4000.Чтобы проверить это, из терминала - внутри папки сервера - запустите:
node index.js
Теперь из браузера перейдите на localhost: 4000, и вы должны увидеть сообщение express-server.Это все, что сделано на бэкэнде.
Включено в приложение реагирования.
В стороне от папки проекта, из терминала запустите:
npx create-react-app client
Это может занять паруминут, но в папке клиента будет создано базовое приложение реакции.
Когда создание-реакции-приложения завершится, пора установить зависимости реагирования, поэтому внутри папки клиента запустите:
npm i socket.io-client
Почти там.
Перейдите в client / src / App.js и замените все внутри на:
import React, { Component } from 'react';
import './App.css';
import socketIOClient from 'socket.io-client'
class App extends Component {
state = {
news: ''
}
componentDidMount() {
const handleMessage = (message) => {
this.setState({ news: message })
}
const socket = socketIOClient('http://127.0.0.1:4000')
socket.on('news', function (data) {
handleMessage(data.message)
socket.emit('my other event', { my: 'data' })
})
}
render() {
return (
<div className="App">
<header className="App-header">
<h1>React Socket.io</h1>
<p>{this.state.news}</p>
</header>
</div>
);
}
}
export default App;
Теперь, если вы идете в терминал внутри папки клиента, изапустите:
npm run start
Это запустит приложение реагирования и автоматически откроет приложение в вашем браузере.
В этот момент вы должны запустить приложение реагирования в браузере и приложение Express.также работает.
Приложение реакции должно отображать:
React Socket.io
Hello World
, а экспресс-терминал должен показывать:
response to my other event: { my: 'data' }
Чтобы объяснить, что произошло в приложении «Реакция» -
- Мы импортировали socket.io-client в начале страницы - в реакции все зависимости импортируются в начале с помощью операторов import.
- В начале компонента мы устанавливаем пустую строку для state.newsэто мешает нам получить сообщение об ошибке при первом монтировании компонента, прежде чем мы получим и данные с сервера.
- Компоненты класса React имеют ряд встроенных методов, известных как методы жизненного цикла, компонентDidMount является одним изэто метод, который запускается один раз, как только компонент монтируется в браузере.Именно здесь мы подключились к серверу экспресс-связи, поэтому socket.io прослушивает данные с сервера, когда он получает сообщение, передает его в функцию handleMessage, которая вызывает setState () с сообщением.
- setState () - это метод, встроенный в реагирование, он используется для изменения / добавления значений в состояние компонента.
- Наконец, благодаря тому, как работает реагирование, так как состояние изменилось, компонент перерисовывается ипоявится сообщение «Hello World».