Socket.io с экспресс-реакцией

Question

Я пытаюсь реализовать простое соединение WebSocket с помощью Socket.io, Express и ReactJS.

Вот код сервера:

const express = require('express');
const socket = require('socket.io');
const path = require('path');
const app = express();
const port = 3030;

const server = app.listen(port, () => console.log(`App listening on port ${port}!`)); 
const io = socket(server);

io.on('connection', (socket) => {
  console.log(socket.id);

  socket.on('test', (data) => {
    console.log(data);
  })
}) 

app.get('/test', (req, res) => {   
    res.sendFile(
        path.join(__dirname, 'public', 'index.html'), 
        err => err && res.status(500)   
    ); 
});

А теперь код компонента React:

import React from "react";
import io from 'socket.io-client';

const socket = io.connect('http://localhost:3030/test');

socket.emit('test', {
    message: 'oh hi'
})

export const App = () => (
    <p> Sample <p/>
);

Результат прост - я получаю console.log с socket.id (так что соединение работает), но я не получаю второе с data. По какой-то неизвестной причине события emit и on работают неправильно. Я также пытался запустить emit с функцией onClick, переданной компоненту кнопки, но все равно ничего.

Есть идеи, что случилось?

РЕДАКТИРОВАТЬ:

Просто чтобы прояснить, on('disconnect') также работает:

  socket.on('disconnect', () => {
    console.log('disconnected');
  });

Answer 1

внесены незначительные изменения, и он работает нормально.

import React from "react";
import io from 'socket.io-client';

const socket = io.connect('http://localhost:8080');

socket.emit('test', {
 message: 'oh hi'
})

export const FarmerPayment = () => {
 return <p> Sample </p>
}

Answer 2

Мой рабочий пример выглядит немного иначе, чем ваш

var server = app.listen(3000);
var io = require('socket.io').listen(server);

io.sockets.on("connection", function(socket){

  socket.once("disconnect", function(){});

  socket.on("create", function(payload){});

  socket.on("join", function(payload){});

  socket.on("newMessage", function(payload){});

  socket.on("login", function(payload){});

  socket.on("logout", function(payload){});

  connections.push(socket);

  socket.emit("groups", groups);

  io.sockets.emit("users", users);

 });

// CLIENT

var io = require("socket.io-client");

componentWillMount(){
  this.socket = io("http://localhost:3000");
  this.socket.on("connect", () => {});
  this.socket.on("disconnect", this.onConnect);
  this.socket.on("groups", this.onReceivedGroups);
  this.socket.on("group", this.onReceivedGroup);
  this.socket.on("users", this.onUsers);
  this.socket.on("info", this.onInfo);
  this.socket.on("launch", this.onLaunch);
  this.socket.on("close", this.onClose);
  this.socket.on("closed", this.onClosed);
}

onConnect = () => {};

onReceivedGroups = () => {};

onReceivedGroup = () => {};

onUsers = () => {};

onInfo = () => {};

onLaunch = () => {};

onClose = () => {};

onClosed = () => {};

render = () => {};

Это добавляется к компоненту интерфейса, который взаимодействовал с сервером

Daniel