如何在 socket.io-client 中建立连接并做出反应？答案

【问题标题】：How to establish connection in socket.io-client and react?如何在 socket.io-client 中建立连接并做出反应？
【发布时间】：2021-05-23 06:43:36
【问题描述】：

我在使用带有 react 的 socket.io-client 时遇到问题。我刚刚开始如何使用它，所以我想在有连接时在控制台中显示一条消息，但控制台中没有出现任何内容。是的，我同时运行了 react 应用程序和服务器。

server.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')
})

App.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;

预期的控制台日志

listening on port 4001
ahoj

我的控制台日志

listening on port 4001

【问题讨论】：

标签： javascript reactjs socket.io backend

【解决方案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);
   });
 }, []);

替换：从 'socket.io-client' 导入 { io };

有：从'socket.io-client'导入socketIOClient；

【讨论】：