Socket.io 與 Express 和 React

Question

我正在嘗試通過使用 Socket.io、Express 和 ReactJS 來實現簡單的 WebSocket 連接。

這是服務器代碼：

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/>
);

結果很簡單——我得到了帶有socket.id的console.log （所以連接正常），但我沒有得到帶有data的第二個。 看起來由於某種未知原因， emit和on事件無法正常工作。 我還嘗試使用onClick function 傳遞給按鈕組件的火emit ，但仍然沒有。

知道有什么問題嗎？

編輯：

為了清楚起見， on('disconnect')也在工作：

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

Answer 1

我的工作示例看起來也有點不同

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);

 });

// 客戶

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 = () => {};

這被添加到與服務器通信的前端組件中

丹尼爾

Answer 2

做了一些小的改動，它工作正常。

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>
}