Хотите использовать сокет в приложениях React❓❓

Привет🤚, в этом видео я хочу научить вас, как написать сервер Socket с Node.js, Express.js и socket.io и использовать его в приложении React.js.

Простой пример реагирующего приложения с node.js, express.js, socket.io, созданного для ответа на вопрос в переполнении стека.

Вопрос о переполнении стека:

Отправка данных от клиента на сервер и вывод на терминал с помощью сокетов

СЕРВЕР — Бэк-Энд

Выполните следующие действия:

  1. Встроенный HTTP-модуль
  • Node.js имеет встроенный модуль HTTP, который позволяет Node.js передавать данные по протоколу передачи гипертекста (HTTP). Модуль HTTP может создать HTTP-сервер, который прослушивает порты сервера и возвращает ответ клиенту.
  • Используйте метод createServer() для создания HTTP-сервера:
const http = require(“http”);
const express = require(“express”);
const app = express();
const server = http.createServer(app);Create a utility file with a custom name, here is the name of this socketUtils.js :

2. Создайте файл утилиты с произвольным именем, вот имя этого socketUtils.js:

  • Здесь мы настраиваем сокет с пользовательскими конфигурациями и создаем экземпляр.
// <root-project-dir>/utils/socketUtils.js
const socketIO = require("socket.io");
exports.sio = (server) => {
  return socketIO(server, {
    transports: ["polling"],
    cors: {
      origin: "*",
    },
  });
};
exports.connection = (io) => {
  io.on("connection", (socket) => {
    console.log("A user is connected");
socket.on("message", (message) => {
      console.log(`message from ${socket.id} : ${message}`);
    });
socket.on("disconnect", () => {
      console.log(`socket ${socket.id} disconnected`);
    });
  });
};

3. Теперь пришло время использовать файл socketUtils.js:

const http = require("http");
const dotenv = require("dotenv");
const cors = require("cors");
dotenv.config({
  path: "./config.env",
});
const express = require("express");
const app = express();
const socketUtils = require("./utils/socketUtils");
const server = http.createServer(app);
const io = socketUtils.sio(server);
socketUtils.connection(io);

4. Создайте промежуточное ПО для сокетов:

  • Для глобального доступа к сокету в каждом запросе мы создаем промежуточное ПО.
const socketIOMiddleware = (req, res, next) => {
  req.io = io;
  next();
};

5. Используйте метод listen():

  • Вы можете написать другое промежуточное программное обеспечение в соответствии с приоритетом, который существует с нужными вам маршрутами, а затем поместить метод listen() в конец.
// CORS
app.use(cors());
// ROUTES
app.use("/api/v1/hello", socketIOMiddleware, (req, res) => {
  req.io.emit("message", `Hello, ${req.originalUrl}`);
  res.send("hello world!");
});
// LISTEN
const port = process.env.PORT || 8000;
server.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

Окончательный файл должен выглядеть так:

// <root-project-dir>/index.js
const http = require("http");
const dotenv = require("dotenv");
const cors = require("cors");
dotenv.config({
  path: "./config.env",
});
const express = require("express");
const app = express();
const socketUtils = require("./utils/socketUtils");
const server = http.createServer(app);
const io = socketUtils.sio(server);
socketUtils.connection(io);
const socketIOMiddleware = (req, res, next) => {
  req.io = io;
next();
};
// CORS
app.use(cors());
// ROUTES
app.use("/api/v1/hello", socketIOMiddleware, (req, res) => {
  req.io.emit("message", `Hello, ${req.originalUrl}`);
  res.send("hello world!");
});
// LISTEN
const port = process.env.PORT || 8000;
server.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

Наконец, для тестирования сервера вы можете использовать онлайн-инструмент SocketIO Client Tool, который очень полезен.

КЛИЕНТ – ВНЕШНЯЯ КОНСТРУКЦИЯ

После настройки сервера вы можете использовать его в приложении React следующим образом и генерировать событие:

import { useEffect, useRef } from "react";
import "./App.css";
import { io } from "socket.io-client";
function App() {
  const socket = useRef();
useEffect(() => {
    socket.current = io("ws://localhost:9013");
socket.current.on("connnection", () => {
      console.log("connected to server");
    });
  }, []);
const handleClick = () => {
    socket.current.emit("message", new Date().getTime());
  };
return (
    <div className="App">
      <p>Socket.io app</p>
<button type="button" onClick={handleClick}>
        Emit a time message
      </button>
    </div>
  );
}
export default App;

Вы можете посмотреть исходники этого примера на Github по ссылке ниже:

https://github.com/mohammadoftadeh/simple-react-socket-io

# В конце

Я надеюсь, что объяснения были краткими и полезными, и вам, дорогие друзья, понравится.