Отправка данных с клиента на сервер сокетов с использованием библиотеки socket.io-client

Я пытаюсь отправить данные с клиента React на сервер Express, используя библиотеку socket.io-client. Но я не могу понять, как это можно сделать.

сервер.js

const express = require("express");
const http = require("http");
const socketio = require("socket.io");
const app = express();

const server = http.createServer(app);
const io = socketio(server);
server.listen(3000);

var connectedUsers = new Set();

io.on("connect", function(socket) {
  var socketId = socket.id;
  console.info("ADDING :: " + socket.id);
  connectedUsers.add(socket);
  console.info("length of usersList " + connectedUsers.size);
  socket.on("data", data => {
    console.info("received session data");
    console.info(data.session);
  });
  socket.once("disconnect", function() {
    console.info("LEAVING :: " + socket.id);
    connectedUsers.delete(socket);
    console.info("length of usersList " + connectedUsers.size);
  });
});

socketConnection.js

import io from "socket.io-client";

let socket = io.connect("http://localhost:3000");

console.info(socket);

export default socket;

реагироватьклиент.js

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      searchIconClicked: false,
      eventKey: 1
    };
  }

  componentDidMount() {
    const session = getSession() || {};
    socket.on("connect", function(socket) {
      console.info("connected to the server");
    data = {
        session: session,
        state: state

            }
      socket.emit("data", data);
    });
}

Но это не работает для меня. Вот вывод консоли

bundle.js:150635 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MmthEJc net::ERR_CONNECTION_REFUSED
Request.create @ bundle.js:150635
Request @ bundle.js:150537
XHR.request @ bundle.js:150464
XHR.doPoll @ bundle.js:150494
Polling.poll @ bundle.js:74172
Polling.doOpen @ bundle.js:74117
Transport.open @ bundle.js:38330
Socket.open @ bundle.js:149843
Socket @ bundle.js:149716
Socket @ bundle.js:149623
Manager.open.Manager.connect @ bundle.js:73642
(anonymous) @ bundle.js:73956

Invalid Host/Origin header
error @ bundle.js:84210
onmessage @ bundle.js:86117
EventTarget.dispatchEvent @ bundle.js:86297
(anonymous) @ bundle.js:87014
SockJS._transportMessage @ bundle.js:87012
EventEmitter.emit @ bundle.js:86213
WebSocketTransport.ws.onmessage @ bundle.js:89088

вы когда-нибудь получали connected to the server в консоли браузера?

Jazib 28.07.2019 14:22

Да, в журнале консоли я вижу сокет, сгенерированный после подключения к серверу.

wandermonk 28.07.2019 14:26

попробуйте переименовать параметр, который вы получаете в connect обработчике событий socket.on("connect", function(socket), на socket.on("connect", function(socketOnConnect)

Jazib 28.07.2019 14:35

в переднюю сторону

Jazib 28.07.2019 14:35

обязательно попробую.\

wandermonk 28.07.2019 15:08

@Jazib попытался изменить имя. Все еще не работал

wandermonk 28.07.2019 15:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
6
123
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел проблему. После изменения кода клиента React на приведенный ниже проблема устранена и может передавать данные между клиентом и сервером.

class Home extends Component {
   constructor(props) {
     super(props);
     this.state = {
     term: "",
     searchIconClicked: false,
     eventKey: 1
 };
 }

 componentDidMount() {
    const session = getSession() || {};
    socket.emit("data", session);
 }
}

Другие вопросы по теме