如何在 socket.io-client 中建立連接並做出反應？

Question

我在使用帶有反應的 socket.io-client 時遇到問題。 我剛剛開始如何使用它，所以我想在有連接時在控制台中顯示一條消息，但控制台中沒有出現任何內容。 是的，我同時運行了反應應用程序和服務器。

服務器.js

const app = require('express')

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

let subject = ''

io.on('connection', (socket) => {
    console.log('ahoj')
    
})

http.listen(4001,function(){
    console.log('listening on port 4001')
})

應用程序.js

import './App.css';
import CreateSubject from './components/CreateSubject'
import Hangman from './components/Hangman'
import { HangmanProvider } from './context/HangmanContext'
import io from 'socket.io-client'

io.connect('http://localhost:4001')



function App() {
  return (
    <HangmanProvider>
      <div className="App">
        <CreateSubject/>
        <Hangman/>
      </div>
    </HangmanProvider>
  );
}

export default App;

預期的 console.log

listening on port 4001
ahoj

我的控制台.log

listening on port 4001

Answer 1

將此添加到您的 server.js 文件以啟用 cors，此處“3000”是您的 React 應用程序運行的端口。

const io = require("socket.io")(http, {
  cors: {
     origin: "http://localhost:3000",
  },
});

在您的 App.js 文件中添加這些行

 import socketIOClient from 'socket.io-client';
 const ENDPOINT = 'http://localhost:4001';

 useEffect(() => {
   const socket = socketIOClient(ENDPOINT);
   socket.onAny((event, ...args) => {
    console.log(event, args);
   });
 }, []);
 

替換： import { io } from 'socket.io-client';

與：從'socket.io-client'導入socketIOClient；