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

【问题标题】：Node.js, React socket.io emit() not workingNode.js，反应 socket.io 发射（）不工作
【发布时间】：2021-12-15 04:26:58
【问题描述】：

我想用 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');
})

有什么想法吗？提前非常感谢

【问题讨论】：

我不知道 ReactJS 的语法，但是在实际的 HTML 中应该是onclick="handleMessageSend()"。也许您应该使用 View Page Source 检查页面的实际 HTML，并查看生成的 HTML 到底是什么。您还可以将console.log("calling socket.emit()") 插入到您的handleMessageSend() 函数中，以便查看它是否被调用。我怀疑问题不在于socket.emit()，而是让handleMessageSend() 正确连接到点击事件。

标签： node.js reactjs socket.io

【解决方案1】：

我已将套接字代码移至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)
    })
})

【讨论】：