React 不响应来自 socket.io 服务器的广播

Question

我目前正在学习 WebSockets 和 Socket.io。为此，我构建了一个简单的文本字段和一个按钮。这是我的前端代码：

import React, { Component } from 'react'
import './App.css'
import io from 'socket.io-client'
const socket = io.connect("http://localhost:8080")
import { useEffect } from 'react'


function App() {
    
  
    const sendMessage = () => {
        
        socket.emit('sendMsg', {
            msg: "Hello World!"
        })
    }

    useEffect(() => {
        socket.on('receiveMsg', (data) => {
            alert(data.msg);
            console.log(data.msg);
        });
    }, [socket]);

    
    return (
      <div className='flex h-screen bg-neutral-900'>
        <div className='m-auto'>
            <div className='flex flex-col'>
                <div></div>
                <div className='flex flex-row gap-4'>
                <input className='p-4 bg-neutral-800 rounded-xl focus:outline  focus:outline-purple-400' type="text" placeholder='Message...' />
                <button onClick={sendMessage} className='bg-purple-400 hover:bg-purple-600 text-white font-bold h-14 w-14 rounded-xl'>↑</button>
                 </div>
            </div>
        </div>
      </div>
    )
  
}

export default App

这是我的后端代码：

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');

const server = http.createServer(app);

app.use(cors());

const io = new Server(server, {
    cors: {
        origin: "http://localhost:5173",
        methods: ["GET", "POST"]
        
    }
})

io.on("connection", (socket) => {
    console.log('a user connected with ID: ' + socket.id);
    socket.on('sendMsg', (data) => {
        console.log('message: ' + msg.msg);
        socket.broadcast.emit('receiveMsg', data);
    });
});

server.listen(8080, () => {
    console.log('listening on *:8080');
});

发送消息是有效的，因为服务器记录了“Hello World！”每当我点击按钮时。

但是每当我在隐身选项卡中发送消息时，另一个浏览器窗口就不会收到该消息，该消息应该在警报中发送。

Answer 1

我太傻了。之前加了一些分号之后，由于习惯了 React 的即时刷新，所以忘记重启服务器了。抱歉浪费了您的时间。