Node.js，反应 socket.io 发射（）不工作

Question

我想用 Socket IO 构建一个 ReactJS/NodeJs 应用程序。 我能够在客户端和服务器之间建立套接字连接，但是每当我按下按钮发出消息时，服务器端没有任何反应，这意味着没有触发console.log('new message:', msg) .

客户端代码：

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

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

function App() {

  socket.on('message', msg => {
    console.log('new message:', msg);
   });

  const handleMessageSend = () => {
    socket.emit('message', 'test');
  }

  return (
    <button onClick={handleMessageSend}>Send</button>
  );
}

export default App;

服务器：

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('new message:', msg);
        socket.emit('message', msg)
    })
})

http.listen(4000, () => {
    console.log('Listening on port 4000');
})

有任何想法吗 ？ 非常感谢提前

Answer 1

使用客户端代码，我找不到任何错误。 但是对于服务器代码，1）我认为您在使用 express 时不需要 http 模块。 所以，我把它拿出来以获得更易读的代码。 2）我相信socket.emit('message', msg)应该是io.sockets.emit('message', msg) 。 你能试试这个吗，让我知道它是否有效？

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

const server = app.listen(4000, () => {
  console.log('Listening on port 4000');
})

const io = socket(server);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('new message:', msg);
        io.sockets.emit('message', msg)
    })
})

Answer 2

我已经在handleMessageSend移动了套接字代码。

你可以添加 preventDefault 来防止你的页面刷新（我不确定你是否需要这个，因为你没有使用表单和提交按钮，但你现在可以使用它。）

你能试试这个，让我知道它是否有效吗？

反应组件：

import io from 'socket.io-client';

function App() {
  let serverUrl = 'localhost:4000'
  let socket = io(serverUrl);
  const handleMessageSend = (e) => {
    e.preventDefault();
    socket.emit("message", "test message")
    socket.on("message", function(msg){
      console.log("socket working on the frontend: ", msg);
    });
  }
  return (
    <button onClick={handleMessageSend}>Send</button>
  );
}

export default App;

这里是服务器文件：

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

const server = app.listen(4000, () => {
  console.log('Listening on port 4000');
})

const io = socket(server);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('socket working at the backend', msg);
        io.sockets.emit('message', msg)
    })
})