Нет ответа от сокета.сервер ввода-вывода, когда клиент устанавливает соединение

#node.js #reactjs #sockets #websocket #socket.io

#node.js #reactjs #сокеты #websocket #socket.io

Вопрос:

Я боролся с настройкой этого дольше, чем хотел бы признать.

Сначала у меня возникли проблемы с CORS, после того, как я выяснил, что такое сокет.документация по вводу-выводу / другие потоки переполнения стека, с которыми я сталкивался, ошибки GET / POST 400.

Наконец, после этого я заметил, что несколько потоков упоминают о передаче {transports: ['websocket']} на сервере и в клиенте.

Как только я это сделал, я перестал получать сообщения об ошибках, однако я все еще не могу установить соединение с моим клиентом к моему сокету.сервер ввода-вывода. Я надеюсь, что смогу получить некоторые рекомендации.

Я запускаю Socket.io 3.0 и экспресс 4

Вот как выглядит мой сервер / клиент на данный момент..

СЕРВЕР (как экспресс-маршрутизатор)

 const express = require('express');
const socketIO = require("socket.io");
const http = require('http');

let app = express();
let router = express.Router();
let server = http.createServer(app);

// The event will be called when a client is connected.
let io = socketIO(server, {transports: ['websocket']})

io.on("connection", socket => {
    console.log("connection")
    socket.emit("hello", { data: "more data" })

    socket.on("disconnect", () => {
        console.log("user left")
    })
})

server.listen(8081, () => console.log('Socket.io listening on *:8081'));

module.exports = router;
 

Клиент (реагирует)

 // Socket.IO
import io from 'socket.io-client';
const socket_io = io('localhost:8081', {transports: ['websocket']})

  // Socket.io UseEffect
  useEffect( () => {
    const initSocket = () => {
      console.log(socket_io)
      socket_io.on("hello", data => {
        setSocket(data);
        console.log(data);
      });
          // CLEAN UP THE EFFECT
      return () => socket_io.disconnect();
    }
      initSocket()
  },[])
 

Вот как выглядит моя консоль в настоящее время, когда я выхожу из сокет-соединения:
введите описание изображения здесь

Ответ №1:

Итак, как бы это ни было неловко, решающим изменением было то, что модуль socket.io-client в клиентском приложении React не был 3.0, как на сервере. Поэтому они не смогли пожать друг другу руки.

Мой совет, если у вас добавлено правило CORS или добавлено transport: websocket, убедитесь, что вы просматриваете свой файл package.json в своих серверных / клиентских приложениях, чтобы убедиться, что сокет.версия пакета ввода-вывода совпадает.