#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 в своих серверных / клиентских приложениях, чтобы убедиться, что сокет.версия пакета ввода-вывода совпадает.